web-dev-qa-db-ja.com

jQueryUIダイアログボックスでコンテンツを動的に読み込む方法

私はjQueryUIのダイアログボックスが大好きです。ただし、組み込みのコンテンツを動的にロードする方法がないようです。これを達成するために他のアプローチを使用する必要があると思いますか？ iframeは、表示されたときにのみコンテンツをロードしますか？これを行う正しい方法ですか？

他のダイアログボックスメカニズムが開かれているのは、それらが最初に開かれたときにのみコンテンツをロードするのに適している場合です。

jqueryajaxjquery-uimodal-dialogjquery-ui-dialog
16
at.

これを行うのは難しくありません-これだけでiframeをいじり始めません。このようなものはどうですか？

$( ".selector" ).dialog({
   open: function(event, ui) {
     $('#divInDialog').load('test.html', function() {
       alert('Load was performed.');
     });
   }
});

基本的に、あなたはあなたのダイアログを作成し、それが開かれるとき、htmlファイルがあなたのサーバーからロードされ、あなたのダイアログ<div id="divInDialog"></div>の中にあるはずの<div class="selector"/>の内容を置き換えます。

31
Tauren

ページに空のdivを作成できます

<div id="dialog-confirm"><div>

jquery ui dialogをautoopen = false;で設定します。

    $("#dialog-confirm").dialog({
        resizable: false,
        autoOpen: false,
        height:140,
        modal: true,
        buttons: {
          'Delete all items': function() {
            $(this).dialog('close');
          },
         Cancel: function() {
            $(this).dialog('close');
         }
       }
   });

次に、動的ページをロードする場合は、jquery ajax呼び出しを使用してhtmlを動的にdivに入れ、そのdivでdialog Openを呼び出します。以下は、ボタンをクリックしたときに動的ページをロードする例です。

  $("#someButton").click(function()
  {
       $.post("Controller/GetPage", function(data){
            $('#dialog-confirm').html(data);
            $('#dialog-confirm').dialog('open');
       }, "html")};
  }

また、ページがajax呼び出しでロードするのにしばらく時間がかかる場合は、ロード画像または jquery blockui plugin を使用して、何かがロードされていることを示すことができます。

14
leora

個人的にダイアログボックスの「ビュー」を作成し、生成されるダイアログボックスに拡張します。テストケースでは、次の「ビュー」を使用しました。

var dialog = {
    title: 'Dialog WITHOUT Modal',
    modal: false,
    height: 300
};

次に、ダイアログボックスに拡張します。

$('#modal-btn-btns').click(function(){
    $('#dialog-modal-btns')
        .dialog($.extend(dialog, {
            modal: true,
            width: 500,
            title: "Dialog with modal AND buttons",
            buttons: {
                "Trigger ALERT": function(){alert("Nice CLICK!@!@!")},
                "Cancel": function(){$(this).dialog('close');}
            }
        }))
        .html('This form has buttons!');
});
1
Wizard