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

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

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

Answer 1

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

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

基本上，你创建对话框，当它打开时，从你的服务器加载一个html文件，替换

，这些内容应该在你的对话框中

。

Answer 2

您可以在页面上创建一个空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插件来显示正在加载的东西

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