Wer viel mit Ajax arbeitet, ist vielleicht schon einmal an den Punkt angekommen, bei dem er wiederholt die Funktionen, die in einer Ajax-Rückmeldung verfügbar sein sollen, eingebettet hat. Solltest du bspw. mit einem CSS-Framework arbeiten und in jeder Rückmeldung die Tooltips von Bootstrap benötigen, dann gibt es einen kleinen Trick, der deine Funktionen, die du einmal festlegst, in jeder Ajax-Rückmeldung zur Verfügung stellt.

Problem

function meine_function() {
    alert('Ich bin ein Alert!');
}

var ajaxRequestEins = $.ajax({
    url: 'ajax.pixelbart.de',
});

ajaxRequestEins.done(function() {
    // im ersten Response verfügbar
    meine_function();

    var ajaxRequestZwei = $.ajax({
        url: 'ajax.pixelbart.de',
    });
    
    ajaxRequestZwei.done(function() {
        // im zweiten Response verfügbar
        meine_function();
    
        var ajaxRequestDrei = $.ajax({
            url: 'ajax.pixelbart.de',
        });
        
        ajaxRequestDrei.done(function() {
            // im dritten Response verfügbar
            meine_function();
        });
    });
});Code-Sprache: JavaScript (javascript)

Hier in dem Beispiel haben wir verschachtelte Ajax-Requests, in denen wir jedes Mal unsere meine_function() abfragen, damit sie in jeder Rückmeldung verfügbar ist. Wenn wir jetzt viele Funktionen haben, wird das schnell unübersichtlich, vorwiegend dann, wenn du mal eine nicht mehr benötigst und dich dann auf die Suche nach Verwendung der Funktion macht.

Es gibt aber einen einfachen Trick, um das Problem zu umgehen.

Lösung

function meine_function() {
    alert('Ich bin ein Alert!');
}

var ajaxRequestEins = $.ajax({
    url: 'ajax.pixelbart.de',
});

ajaxRequestEins.done(function() {
    var ajaxRequestZwei = $.ajax({
        url: 'ajax.pixelbart.de',
    });
    
    ajaxRequestZwei.done(function() {    
        var ajaxRequestDrei = $.ajax({
            url: 'ajax.pixelbart.de',
        });
        
        ajaxRequestDrei.done(function() {});
    });
});

$(document).ajaxComplete(function(event, request, settings) {
    // in allen Responses verfügbar
    meine_function();
});Code-Sprache: JavaScript (javascript)

Hier in dem Beispiel nutzen wir ajaxComplete, um jedes Mal, wenn ein Ajax-Request vollständig abgeschlossen ist, unsere Funktion zu übergeben. Jetzt ist in jeder unserer Ajax-Rückmeldungen unsere Funktion verfügbar. Sollte das mal nicht funktionieren, dann liegt das womöglich daran, dass ein Ajax-Request niemals abgeschlossen wird.

Diese Lösung funktioniert nur, wenn Ajax-Requests auch vollständig abgeschlossen werden. Ansonsten wird unsere Funktion in keine Ajax-Rückmeldung geladen.