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

Question

我喜欢jQueryUI的对话框。但是，似乎没有内置的方式来动态加载内容。我猜我得使用其他方法来实现这个功能？当iframe被显示时，它们只会加载内容吗？这是正确的方法吗？

如果有其他对话框机制更适合仅在首次打开时加载内容，我也可以尝试使用它们。

- at.

Answer 1

这并不难 -- 我不会为了这个单独的问题去搞iframe。怎么样尝试用这个方法？

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

基本上，您创建对话框，当它打开时，会从服务器加载一个html文件，替换掉您对话框内的 <div id="divInDialog"></div> 的内容，该

应该在您的对话框

中。

- Tauren

---

对于大多数情况，您也可以只使用 $(this).load("url") 进行操作 :) - Nick Craver

谢谢Tauren和Nick，我想这就是我要找的。如果用户关闭对话框，然后再次打开它，.load() jQuery函数会再次检索数据吗？我猜如果不行，我总可以为此设置一个javascript变量... - at.

我正在尝试使用这个例子，但是我无法打开div... http://codetidy.com/722（代码链接，问题在第32行） - Bri

我已经解决了。 :) 谢谢你的帮助！ - Bri

好的，假设加载的页面有自己的CSS...如何防止其覆盖基本页面？ - Roy Lee

Answer 2

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

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

设置一个 jQuery UI对话框，其中 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动态放入

中，然后在该

上调用dialog Open。下面是一个示例，单击按钮加载动态页面。

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

如果您的页面在ajax调用中需要加载一段时间，您可能需要使用一些加载图像或jquery blockui插件来显示正在加载的内容。

- leora

Answer 3

我个人建议为您的对话框创建一个“视图”，然后扩展生成的对话框。作为测试案例，我使用了以下“视图”：

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

- Wizard