web-dev-qa-db-fra.com

Comment savoir quand tous les appels ajax sont terminés

J'ai une page de style de tableau avec des lignes. Chaque ligne a une case à cocher. Je peux sélectionner toutes/plusieurs cases à cocher et cliquer sur "Soumettre" et ce qui se passe est un appel ajqu Jquery pour chaque ligne.

Fondamentalement, j'ai un formulaire pour chaque ligne et j'itère sur toutes les lignes cochées et soumets ce formulaire qui fait l'appel jquery ajax.

J'ai donc un bouton qui fait:

       $("input:checked").parent("form").submit();

Ensuite, chaque ligne a:

            <form name="MyForm<%=i%>" action="javascript:processRow(<%=i%>)" method="post" style="margin:0px;">
                <input type="checkbox" name="X" value="XChecked"/>
                <input type="hidden" id="XNumber<%=i%>" name="X<%=i%>" value="<%=XNumber%>"/>
                <input type="hidden" id="XId<%=i%>" name="XId<%=i%>" value="<%=XNumber%>"/>
                <input type="hidden" id="XAmt<%=i%>" name="XAmt<%=i%>" value="<%=XAmount%>"/>
                <input type="hidden" name="X" value="rXChecked"/>
            </form>

Ce formulaire soumet à processRow:

   function processRow(rowNum)
   {
        var Amount = $('#XAmt'+rowNum).val();
        var XId = $('#XId'+rowNum).val();
        var XNum = $('#OrderNumber'+rowNum).val();
        var queryString = "xAmt=" + "1.00" + "&xNumber=" + OrdNum + "&xId=" + xId;


        $('#coda_'+rowNum).removeClass("loader");
        $('#coda_'+rowNum).addClass("loading");


        $.ajax({
          url: "x.asp",
          cache: false,
          type:  "POST",
          data:  queryString,
          success: function(html){
            $('#result_'+rowNum).empty().append(html);
            $('#coda_'+rowNum).removeClass("loading");
            $('#coda_'+rowNum).addClass("loader");
          }
        });
   }

Ce que je voulais savoir, c'est qu'à partir de là, je peux savoir si tous mes appels Ajax sont terminés. La raison en est que vous souhaitez activer/désactiver le bouton de soumission pendant que tous ces appels sont en cours.

Merci et veuillez noter que j'ai dû modifier mes noms de variables en raison de la sensibilité de l'application, donc beaucoup d'entre eux peuvent être dupliqués.

jqueryajax
74
Brian G

La manière simple

Le moyen le plus simple consiste à utiliser le gestionnaire d'événements .ajaxStop() :

$(document).ajaxStop(function() {
  // place code to be executed on completion of last outstanding ajax call here
});

À la dure

Vous pouvez également détecter manuellement si un appel ajax est toujours actif:

Créez une variable contenant le nombre de connexions Ajax actives:

var activeAjaxConnections = 0;

juste avant d'ouvrir un nouvel incrément de connexion Ajax cette variable

$.ajax({
  beforeSend: function(xhr) {
    activeAjaxConnections++;
  },
  url (...)

in success part vérifier si cette variable est égale à zéro (si c'est le cas, la dernière connexion est terminée)

success: function(html){
  activeAjaxConnections--;
  $('#result_'+rowNum).empty().append(html);
  $('#coda_'+rowNum).removeClass("loading");
  $('#coda_'+rowNum).addClass("loader");
  if (0 == activeAjaxConnections) {
    // this was the last Ajax connection, do the thing
  }
},
error: function(xhr, errDesc, exception) {
  activeAjaxConnections--;
  if (0 == activeAjaxConnections) {
    // this was the last Ajax connection, do the thing
  }
}

Comme vous pouvez le voir, j'ai également ajouté la vérification du retour avec erreur

130
Tomasz Tybulewicz

Une bonne solution serait d'utiliser;

$("body").ajaxStop(function() {
    //Your code
});

Pour plus d'informations, consultez la fonction jQuery .ajaxStop sur http://api.jquery.com/ajaxStop/

23
Tebo

Peut être:

jQuery.active == 0

Volé à:

http://artsy.github.com/blog/2012/02/03/reliably-testing-asynchronous-ui-w-slash-rspec-and-capybara/

Plus d'informations sur StackOverflow:

fonction jQuery.active

14
nothing-special-here