我想要使用jQuery.load()
在jQuery UI对话框中动态打开一些链接。打开对话框后,我希望链接在已打开的对话框中加载。
链接看起来像这样......
<a href="http://www.example.com/index.php?action=something&search=somethingelse#fragment" rel="dialog" title="Title Attribute">
点击事件已绑定...
$('body').delegate("a[rel~=dialog]", "click", function(e){return ajax_dialog(this, e);});
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;
}
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();}
});
}
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.
}
答案 0 :(得分:1)
哈。如代码所示,我使用$jQuery.load()
并将链接的确切href
拉为要求的URL。所有的URL都有最终的片段/锚点,即:.... html#id-of-div
。
在这种情况下,脚本本身工作正常,但页面上还没有#id-of-div。这就是我可以看到内容返回的原因,但对话框刚刚结束。 : - )