web-dev-qa-db-de.com

Wie kann ich mithilfe von jQuery feststellen, ob eine Ajax-Anfrage abgeschlossen wurde?

Ich habe eine Seite, auf der ich Javascript/JQuery einfügen kann, um die Ausgabe zu manipulieren. Ich habe keine andere Kontrolle über das Seiten-Markup usw.

Ich muss nach jedem auf der Seite vorhandenen Element ein zusätzliches Element über jquery hinzufügen. Das Problem ist, dass die Elemente über einen asynchronen Aufruf auf der vorhandenen Seite generiert werden, nachdem $ (document) .ready vollständig ist.

Grundsätzlich brauche ich eine Methode, um meine jquery aufzurufen, nachdem die Seite geladen wurde und die nachfolgenden Ajax-Aufrufe abgeschlossen sind. Gibt es eine Möglichkeit, den Abschluss eines Ajax-Aufrufs auf der Seite zu erkennen und dann meine eigene benutzerdefinierte Funktion aufzurufen, um die zusätzlichen Elemente nach den neu erstellten s einzufügen?

13
Brian Scott

Leider trifft dies nicht zu, da es so aussieht, als würde das OP - $.ajax() oder keine jQuery-ajax-Methode zum tatsächlichen Laden von Inhalten verwenden, aber hier belassen, falls zukünftige Googler dies tun .


Sie können jedes der globalen Ajax-Ereignisse, das Ihren Anforderungen entspricht, hier verwenden , Sie sind wahrscheinlich nach $.ajaxComplete() oder $.ajaxSuccess() .

Zum Beispiel:

$(document).ajaxSuccess(function() {
  alert("An individual AJAX call has completed successfully");
});
//or...
$(document).ajaxComplete(function() {
  alert("ALL current AJAX calls have completed");
});

Wenn Sie nur eine generische Funktion ausführen möchten, hängen Sie sie an das Dokument an (es handelt sich lediglich um Ereignisse darunter). Wenn Sie etwas Bestimmtes anzeigen möchten, z. B. ein Modal oder eine Nachricht, können Sie sie etwas aufgeräumter verwenden (obwohl dies anscheinend nicht das ist, was Sie suchen):

$("#myModal").ajaxComplete(function() {
  $(this).fadeIn().delay(1000).fadeOut();
});
45
Nick Craver

In diesem Beispiel werden nur Elemente am Anfang und Ende von Ajax-Aufrufen mit jQuery angezeigt und ausgeblendet:

    $("#contentLoading").ajaxSend(function(r, s) {
        $(this).show();
        $("#ready").hide();
    });

    $("#contentLoading").ajaxStop(function(r, s) {
        $(this).hide();
        $("#ready").show();
    });

#contentLoading ist eine Fortschrittsanzeige für GIF-Bilder.

2
Gutzofter

Wie ich verstehen konnte, verwenden Sie in Ihrem ready-Handler einige Ajax-Funktionen von jQuery. Sie können also einfach eine weitere Funktion übergeben, die aufgerufen wird, nachdem Ihre Ajax-Funktion eine Antwort erhalten hat. Zum Beispiel

$(document).ready(function(){
    $("#some_div").load('/some_url/', function(){
        /* Your code goes here */
    });
});
1
sanya

Sie könnten die send () - Funktion des XMLHttpRequest-Objekts neu schreiben.

Sehen Sie sich eine Lösung an, bei der Sie reines Javascript hier verwenden.

1

Sie könnten .live () / .delegate () verwenden.

0
Tgr