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

【问题标题】：How to have jQueryUI dialog box dynamically load content如何让 jQueryUI 对话框动态加载内容
【发布时间】：2011-04-11 07:35:42
【问题描述】：

我喜欢 jQueryUI 的对话框。但是，似乎没有一种方法可以动态加载内置内容。我想我必须使用其他方法来实现这一点？ iframe 只有在内容可见时才会加载内容吗？这是正确的做法吗？

如果其他对话框机制更适合仅在首次打开时加载内容，我愿意接受。

【问题讨论】：

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

【解决方案1】：

我会亲自为您的对话框创建一个“视图”，然后扩展到您正在生成的对话框。对于测试用例，我使用了以下“视图”：

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

【讨论】：

【解决方案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 上调用 dialog Open。下面是一个在按钮单击时加载动态页面的示例。

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

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

【讨论】：

【解决方案3】：

这并不难做到——我不会仅仅因为这个而开始使用 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 - 在大多数情况下，您也可以只使用$(this).load("url") :)
@Nick，如此真实......我只是习惯于这样做，因为我的对话框中有一些静态内容。感谢您指出。
谢谢牛头人和尼克，这就是我想要的。如果用户关闭对话框然后再次打开，.load() jQuery 函数会再次检索数据吗？我想如果没有，我总是可以为此设置一个 javascript 变量...
@at：是的，每次打开对话框都会发生open事件，所以每次都会替换内容。看看文档：jqueryui.com/demos/dialog/#event-open
回复有点晚。这是我使用的机制。但现在的问题是，有时内容会使对话框太高（低于屏幕）。如何限制高度？ maxHeight 选项仅在您调整对话框大小时起作用。