jQuery UI Dialog - ändern Sie den Inhalt eines geöffneten Dialogs (Ajax)

Question

Ich habe einige Links, die ich dynamisch in einem jQuery UI Dialog mit öffnen möchten jQuery.load() . Sobald das Dialogfeld geöffnet ist, sollen die Links innerhalb des bereits geöffneten Dialogfelds geladen werden.

1. Die Website wird also geladen, Sie klicken auf einen Link, und es öffnet sich ein Dialogfeld. Das ist in Ordnung. Sie können es so oft schließen und öffnen, wie Sie wollen.
2. Wenn Sie im geöffneten Zustand auf einen der Links aus dem geladenen Inhalt klicken, funktioniert er nicht.
   • Eine Ajax Die GET-Anfrage wird ausgeführt, aber der Inhalt wird nicht erfolgreich in das Dialogfeld geladen. ( Firebug zeigt die Anfrage an)
   • Der vorherige Dialogtitel und Dialoginhalt wird gelöscht. Der neue Inhalt wird jedoch nicht angezeigt, noch wird er in das DOM eingefügt. (Der generierte Quelltext zeigt den Inhalt nirgendwo an.)

Die Links sehen wie folgt aus...

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

Das Klick-Ereignis ist gebunden...

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

El ajax_dialog prüft, ob ein Dialog vorhanden ist, ruft auf, um einen zu erstellen, wenn nicht, ruft auf, um den Inhalt zu laden, setzt den Titel und öffnet den Dialog, wenn er nicht geöffnet ist.

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

El init_dialog Funktion erstellt den Dialog, wenn noch keiner vorhanden ist...

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

El load_dialog Funktion lädt den gewünschten Inhalt in den 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

Hah. Wie im Code gezeigt, habe ich verwendet $jQuery.load() und das Ziehen der genauen href der Verbindung als die URL zu beantragen. Alle URLs hatten Fragmente/Anker am Ende, d. h.: .... html#id-of-div .

In diesem Fall funktionierte das Skript selbst einwandfrei, aber die #id-of-div war noch nicht auf der Seite vorhanden. Deshalb konnte ich sehen, dass der Inhalt zurückgegeben wurde, aber das Dialogfeld war einfach leer :-)