Bonjour à tous,
Je recontre un petit problème sans gravité, mais pas pratique.
J'explique la situation :
Je dois lancer des requêtes AJAX sur base d'un $.each() en jquery.
Le problème :
Le code boucle bien tout, mais du coup lance toutes mes requêtes AJAX en parallèle.
En ajoutant "async: false" dans la fonction .ajax => cela fait mieux le travail mais le contenu de "beforeSend" et de "success" ne s'affichent à l'écran que APRES toutes les requêtes AJAX.
Or je souhaiterais ajouter un progressbar => qui n'aurait aucun sens dans la situation actuelle.
$("#api-send-start").click(function(){
$("table tbody tr[data-id]").each(function(){
ajaxApi($(this), $(this).data('id'));
});
});
function ajaxApi (element, id) {
let lastTD = element.find('td:last');
$.ajax({
//async: false,
url: Routing.generate('superAdmin_fwbApi_setUser', {id: id}),
beforeSend: function() {
lastTD.html('EN COURS !!!');
},
success : function(response) {
console.log(response);
lastTD.html(response.idEsahr);
}
})
}
Je voudrais :
Lors que je lance l'opération décrite en code ci-dessous, étape par étape cela devrait donner :
- Lire le 1er item
- Préparer le resuête AJAX
- Exéctuer la fonction "beforeSend" => changement du contenu texte d'un TD
- Effectuer la requête AJAX
- si c'est "success" => changement du contenu texte d'un TD ET (à l'avenir) modifier la progressbar.
- Lire l'item suivant et on recommence au point 2.
Si l'un d'entre vous aurait la petite solution miracle pour que tout se fasse au fur et à mesure (et non une fois que tout est fini) ce serait bien gentil !!!
Merci pour votre aide précieuse !!!