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

Posted 2023-03-06

【中文标题】如何让 jQueryUI 对话框动态加载内容

【英文标题】：How to have jQueryUI dialog box dynamically load content

【发布时间】：2011-04-11 07:35:42

【问题描述】：

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

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

【参考方案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 选项仅在您调整对话框大小时起作用。