javascript jQuery UI Dialog - 更改打开的对话框的内容 (Ajax)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3357370/
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
jQuery UI Dialog - change the content of an open dialog (Ajax)
提问by morewry
I've got some links I want to have dynamically open in a jQuery UI Dialog using jQuery.load(). Once the dialog is open, I want the links load inside the already opened dialog.
我有一些链接我想在 jQuery UI 对话框中使用jQuery.load(). 对话框打开后，我希望链接加载到已打开的对话框中。
- So, the site loads, you click a link, and it opens in a dialog. That's fine. You can close and open it as many times as you want.
- While it's open, if you click on one of the links from the loaded content, it doesn't work.
- An AjaxGET request IS performed, but the resulting content is not successfully loaded into the dialog. (Firebugshows the request)
- The previous dialog title and dialog content is erased. But the new content is not shown, NOR is it inserted into the DOM. (The generated source does not show content anywhere.)
- 因此，站点加载，您单击一个链接，它会在一个对话框中打开。没关系。您可以根据需要多次关闭和打开它。
- 当它打开时，如果您单击加载内容中的链接之一，它将不起作用。
The links look like this...
链接看起来像这样......
<a href="http://www.example.com/index.php?action=something&search=somethingelse#fragment" rel="dialog" title="Title Attribute">
The click event is bound...
点击事件绑定...
$('body').delegate("a[rel~=dialog]", "click", function(e){return ajax_dialog(this, e);});
The ajax_dialogfunction checks to see if there's a dialog, calls to create one if there isn't, calls to load the content, sets the title, and opens the dialog if it's not open.
该ajax_dialog函数检查是否有对话框，如果没有则调用创建对话框，调用加载内容，设置标题，如果没有打开则打开对话框。
function ajax_dialog(_this, _event){
var urlToLoad = $(_this).attr("href").replace("#", "&ajax=true #");
var linkTitle = $(_this).attr("title");
// Create dialog
if(!$('body').find('#ajaxDialog').size()){
$('body').append('not yet init<br />'); // This shows up the first click only.
init_dialog('#ajaxDialog');
}
// Load Dialog Content
load_dialog('#ajaxDialog', urlToLoad);
// Add title
$('#ajaxDialog').dialog('option', 'title', linkTitle);
// Open dialog (or reload)
if(!$('#ajaxDialog').dialog('isOpen')){
$('#ajaxDialog').dialog('open');
$('body').append('not yet open<br />'); // This shows up the first click only.
}
return false;
}
The init_dialogfunction creates the dialog if there isn't one...
init_dialog如果没有对话框，该函数会创建对话框...
function init_dialog(_this){
$('body').append('<div id="ajaxDialog"></div>');
// Set Dialog Options
$(_this).dialog({
modal:true,
autoOpen:false,
width:900,
height:400,
position:['center','center'],
zIndex: 9999,
//open:function(){load_dialog(this, urlToLoad);}, This didn't work without destroying the dialog for each click.
close:function(){$(this).empty();}
});
}
The load_dialogfunction loads the desired content into the dialog.
该load_dialog函数将所需的内容加载到对话框中。
function load_dialog(_this, urlToLoad){
$(_this).load(urlToLoad, function(){
$('body').append(urlToLoad + ' load function<br />'); // This shows up each click
$(_this).append("Hihi?"); // This shows up each click
});
// The loaded information only shows the first click, other times show an empty dialog.
}
采纳答案by morewry
Hah. As shown in the code, I was using $jQuery.load()and pulling the exact hrefof the link as the URLto request. All the URLs had fragments/anchors on the end, that is: ....html#id-of-div.
哈。如代码所示，我使用$jQuery.load()并提取href链接的确切内容作为要请求的URL。所有 URL 的末尾都有片段/锚点，即： .... html#id-of-div.
In this case, the script itself was working fine, but the #id-of-div didn't exist on the page yet. That's why I could see content returned, but the dialog just ended up blank. :-)
在这种情况下，脚本本身运行良好，但页面上尚不存在 #id-of-div。这就是为什么我可以看到返回的内容，但对话框最终是空白的。:-)
