Je ne peux pas sembler sortir de la boucle

Question

A .each $() Je ne peux pas sembler réussir à sortir de ma chaque boucle si la ajax renvoie une erreur. J'ai essayé

return false; 

et autre chose similaire, mais le $. $ Continue encore à courir. Je dois pouvoir faire cela pour que je puisse afficher les messages d'erreur de mon backend après l'avoir posté via ajax (je sais que c'est une mauvaise pratique mais un client devait pouvoir envoyer plusieurs formulaires immediatement.).

Quelqu'un peut-il expliquer ce que je l'ai fait mal?

var postAll = function(button_clicked) 
{ 
e.preventDefault(); 

var form_response = []; 
var formsCollection = document.getElementsByTagName("form"); 

$.each(formsCollection, function (key, value) 
{ 
    console.log(value.action); 
    console.log(value.id); 

    var url = value.action; 
    var id = value.id; 
    var data = ($('#' + id + '').serialize()); 


    if (id == 'additionalInfo') 
    { 
     data = {'Add_info': $('#Add_info').val(),}; 
    } 

    if (id != 'DONE') 
    { 
     $.ajax({ 
     type: "POST", 
     dataType: 'json', 
     url: url, 
     beforeSend: function (xhr) 
     { 
      xhr.setRequestHeader('X-CSRF-TOKEN',$("#token").attr('content')); 
     }, 
     data: data, 
     success: function (data) 
     { 
      console.log('success'); // show response from the php script. 
      form_response.push(data); // show response from the php script. 
     }, 
     error: function (data) 
     { 
      console.log('fail'); // show response from the php script. 
      display_errors(data, id); // show response from the php script. 
      return true; 
     } 
     }); 
    } 
}); 
} 

Answer 1

AJAX est asynchrone, lors de l'exécution de votre $ .Chaque fonction il exécutera l'appel AJAX et « pas attendre » pour les autres pour finir

Pour résoudre votre problème, vous devrez écrire une fonction qui exécutera le premier appel ajax et dans le succès il s'exécutera de nouveau avec le deuxième appel ajax.

Exemple:

var data = [form1,form2...etc]; 
function letsLoop(data,index = 0){ 
    $.ajax({ 
     url:.... 
     success: function(){ 
      letsLoop(data,index+1); 
     }, 
     error: function(){ 

     } 
    }); 
} 

et ici vous appelez votre fonction:

letsLoop(data,0); 

Answer 2

Si par la rupture de la boucle que vous voulez dire que le return dans votre gestionnaire d'erreurs, il ne fonctionnera pas comme vous pensez qu'il serait.

Votre boucle crée des requêtes asynchrones »à la fois. Puis chacune de ces requêtes est traitée par le navigateur (plus ou moins simultanément), puis viennent les réponses. Ainsi, au moment où votre gestionnaire d'erreurs s'exécute, la boucle est terminée depuis longtemps.

BTW, le retour dans le cas concerne le gestionnaire d'erreur, pas la fonction à l'intérieur de la boucle.

Alors, pour obtenir ce que vous voulez, vous devriez « file d'attente » vos requêtes AJAX et les effectuer un par un. Une solution possible consiste à créer un tableau de formes puis à prendre (et à retirer du tableau) le premier, à effectuer une requête, à répéter le tout et à répéter jusqu'à ce que le tableau soit vide.