jQuery 如何让 jQueryUI 对话框动态加载内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3694693/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to have jQueryUI dialog box dynamically load content
提问by at.
I love jQueryUI's dialog boxes. However, there doesn't seem to be a way to dynamically load content built-in. I guess I have to use some other approach to achieve this? Will iframes load content only when they're made visible? Is that the right way to do this?
我喜欢 jQueryUI 的对话框。但是，似乎没有一种方法可以动态加载内置内容。我想我必须使用其他方法来实现这一目标？iframe 是否仅在内容可见时才加载内容？这是正确的方法吗？
I'm open to other dialog box mechanisms if they're more suited for loading the content only when they're first opened.
如果其他对话框机制更适合仅在首次打开时加载内容，我愿意接受它们。
回答by Tauren
This isn't hard to do -- I wouldn't start messing with iframes for this alone. How about something like this?
这并不难做——我不会为了这个而开始搞乱 iframe。这样的事情怎么样？
$( ".selector" ).dialog({
open: function(event, ui) {
$('#divInDialog').load('test.html', function() {
alert('Load was performed.');
});
}
});
Basically, you create your dialog, and when it is opened, an html file is loaded from your server, replacing the contents of your <div id="divInDialog"></div>, which should be inside your dialog <div class="selector"/>.
基本上，您创建对话框，当它打开时，会从您的服务器加载一个 html 文件，替换<div id="divInDialog"></div>您的<div class="selector"/>.
回答by leora
you can create an empty div on your page
您可以在页面上创建一个空的 div
<div id="dialog-confirm"><div>
setup a jquery ui dialogwith autoopen = false;
使用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');
}
}
});
then when you want to load a dynamic page, use a jquery ajax call to dynamically put the html into the div and then call dialog Openon that div. here is an example below loading a dynamic page on a button click.
然后当你想加载动态页面时，使用jquery ajax调用将html动态放入div中，然后在该div上调用dialog Open。下面是一个在单击按钮时加载动态页面的示例。
$("#someButton").click(function()
{
$.post("Controller/GetPage", function(data){
$('#dialog-confirm').html(data);
$('#dialog-confirm').dialog('open');
}, "html")};
}
also, if you page takes a while to load in the ajax call, you might want to use some loading image or jquery blockui pluginto show that something is loading
此外，如果您的页面需要在 ajax 调用中加载一段时间，您可能需要使用一些加载图像或jquery blockui 插件来显示某些内容正在加载
回答by Wizard
I would personally create a "view" for your dialog box, then extend onto your dialog box being generated. For a test case I used the following "view":
我会亲自为您的对话框创建一个“视图”，然后扩展到您正在生成的对话框。对于测试用例，我使用了以下“视图”：
var dialog = {
title: 'Dialog WITHOUT Modal',
modal: false,
height: 300
};
Then extending onto a dialog box:
然后扩展到一个对话框：
$('#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!');
});
