Boîte de dialogue jQuery UI - modifier le contenu d'une boîte de dialogue ouverte (Ajax)

Question

J'ai des liens que je veux ouvrir dynamiquement dans une boîte de dialogue jQuery UI en utilisant jQuery.load(). Une fois la boîte de dialogue ouverte, je veux que les liens soient chargés dans la boîte de dialogue déjà ouverte.

1. Ainsi, le site se charge, vous cliquez sur un lien, et il s'ouvre dans une boîte de dialogue. C'est très bien. Vous pouvez le fermer et l'ouvrir autant de fois que vous le souhaitez.
2. Bien qu'il soit ouvert, si vous cliquez sur l'un des liens du contenu chargé, cela ne fonctionne pas.
   • Une requête GET Ajax est exécutée, mais le contenu résultant n'est pas chargé avec succès dans la boîte de dialogue. (Firebug affiche la demande)
   • Le titre de la boîte de dialogue précédente et le contenu de la boîte de dialogue sont effacés. Mais le nouveau contenu n'est pas affiché, NOR est-il inséré dans le DOM. (La source ne montre pas le contenu partout. Généré)

Les liens ressemblent à ceci ...

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

L'événement click est lié ...

$('body').delegate("a[rel~=dialog]", "click", function(e){return ajax_dialog(this, e);}); 

La fonction ajax_dialog vérifie s'il existe une boîte de dialogue, les appels pour en créer un s'il n'y en a pas, les appels pour charger le contenu, définit le titre et ouvre la boîte de dialogue si elle n'est pas ouverte.

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; 
} 

La fonction crée init_dialog la boîte de dialogue s'il n'y a pas un ...

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();} 
    }); 
} 

La fonction load_dialog charge le contenu souhaité dans la boîte de dialogue.

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

Hah. Comme indiqué dans le code, j'utilisais $jQuery.load() et en tirant le exact href du lien comme URL pour demander. Toutes les URL avaient des fragments/ancres à la fin, c'est-à-dire: .... html#id-of-div.

Dans ce cas, le script fonctionnait correctement, mais le # id-of-div n'existait pas encore sur la page. C'est pourquoi je pouvais voir le contenu renvoyé, mais la boîte de dialogue s'est simplement vidée. :-)