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

时间:2010-09-12 11:40:54

标签: jquery ajax jquery-ui modal-dialog jquery-ui-dialog

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

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

3 个答案:

答案 0 :(得分:31)

这并不难做到 - 我不会因此而开始搞乱iframe。这样的事情怎么样?

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

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

答案 1 :(得分:14)

您可以在页面上创建一个空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上调用对话框打开。下面是一个示例,在点击按钮上加载动态页面。

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

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

答案 2 :(得分:1)

我个人会创建一个&#34;视图&#34;对于您的对话框,然后扩展到正在生成的对话框。对于测试用例,我使用了以下&#34; view&#34;:

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!');
});