web-dev-qa-db-fra.com

Comment puis-je détecter "toute" demande ajax en cours de traitement à l'aide de jQuery?

J'ai une page où je peux insérer du javascript/jquery pour manipuler la sortie. Je n'ai aucun autre contrôle sur le balisage de page, etc.

J'ai besoin d'ajouter un élément supplémentaire via jquery après chaque présent sur la page. Le problème est que les éléments sont générés via un appel asynchrone sur la page existante, qui survient une fois que $ (document) .ready est terminé.

Essentiellement, j'ai besoin d'un moyen d'appeler mon jQuery une fois la page chargée et les appels ajax suivants terminés. Existe-t-il un moyen de détecter l'achèvement d'un appel ajax sur la page, puis d'appeler ma propre fonction personnalisée pour insérer les éléments supplémentaires après le nouveau s créé?

jqueryajaxloaddetect
13
Brian Scott

Malheureusement, cela ne s'applique pas, car il semble que le PO n'utilise pas $.ajax() ni aucune méthode ajax jQuery pour le chargement du contenu, mais le laisse ici au cas où un futur googler le ferait. .

Vous pouvez utiliser n’importe lequel des événements ajax globaux qui répondent à vos besoins ici , vous êtes probablement après $.ajaxComplete() ou $.ajaxSuccess() .

Par exemple:

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

Si vous voulez exécuter seulement une fonction générique, attachez-la à un document (ce ne sont que des événements situés en dessous). Si vous souhaitez afficher quelque chose en particulier, par exemple un modal ou un message, vous pouvez les utiliser un peu mieux (bien que cela ne semble pas être ce que vous cherchez), comme ceci:

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

Cet exemple montre et masque les éléments au début et à la fin des appels ajax à l'aide de jQuery:

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

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

#contentLoading est un indicateur de progression de l'image gif.

2
Gutzofter

Si j'ai bien compris, vous utilisez une fonction Ajax de jQuery dans votre gestionnaire Ready. Vous pouvez donc simplement lui transmettre une autre fonction, qui sera appelée une fois que votre fonction Ajax aura obtenu une réponse. Par exemple

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

Vous pouvez réécrire la fonction send () de l'objet XMLHttpRequest.

Voir une solution pour ce faire en utilisant purement Javascript ici .

1
Sébastien Brodeur

Vous pouvez utiliser .live () / .delegate () .

0
Tgr