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在頁面上還不存在。這就是爲什麼我可以看到返回的內容，但對話框只是空白。 :-)