如何让jQueryUI对话框动态加载内容

Question

我喜欢jQueryUI的对话框.但是,似乎没有办法动态加载内置内容.我想我必须使用其他一些方法来实现这一目标？iframe会在内容可见时加载内容吗？这是正确的方法吗？

如果它们更适合仅在首次打开时加载内容,我会对其他对话框机制开放.

Answer 1

这并不难 - 我不会因此而开始搞乱iframe.这样的事怎么样？

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

基本上,您创建对话框,当它打开时,从您的服务器加载一个html文件,替换您的内容<div id="divInDialog"></div>,这些内容应该在您的对话框中<div class="selector"/>.

Answer 2

您可以在页面上创建一个空div

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

使用autoopen = false设置jquery ui对话框 ;

    $("#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上调用对话框Open.这是下面按钮点击加载动态页面的示例.

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

另外,如果你的页面需要一段时间加载ajax调用,你可能想使用一些加载图像或jquery blockui插件来显示正在加载的东西