jQuery UI对话框 - 更改打开对话框（Ajax）的内容

Question

我有一些链接，我想动态地在jQuery UI对话框中使用jQuery.load()打开。一旦对话框打开，我想要在已打开的对话框中加载链接。

1. 因此，网站加载，您点击一个链接，并在对话框中打开。没关系。您可以根据需要多次关闭并打开它。
2. 当它打开时，如果您从加载的内容中单击其中一个链接，它不起作用。
   • Ajax GET请求被执行，但结果内容未成功加载到对话框中。 （Firebug显示请求）
   • 以前的对话标题和对话框内容被删除。但新内容未显示，NOR插入到DOM中。 （生成的源不显示内容的任何地方。）

的链接看起来像这样...

<a href="http://www.example.com/index.php?action=something&amp;search=somethingelse#fragment" rel="dialog" title="Title Attribute"> 

click事件势必...

$('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. 
} 

Answer 1

哈。如代码所示，我使用$jQuery.load()并将链接的确切href作为URL进行请求。所有的网址末尾都有分段/锚定，即：...... html#id-of-div。

在这种情况下，脚本本身工作正常，但＃id-of-div在页面上还不存在。这就是为什么我可以看到返回的内容，但对话框只是空白。 :-)