[Résolu] Ajax => plusieurs requêtes simultanées

Bonjour j'ai une petite question au sujet de jquery et ajax

Sur mon site il y a plusieurs <button> qui permettent de charger des données en ajax, ce qui prend quelques secondes

Quand je clique sur un seul <button> tout se passe normalement

Mais si je clique rapidement sur plusieurs boutons, seul le premier sur lequel j'ai cliqué affichera les données.

Pourtant Firebug me montre que les responses de chaque request sont chargées correctement et les autres boutons continueront à avoir la class "blink"

Voici mon code:

								currentBtn.addClass( "blink" );

								$.post("[[~[[++ajax_page]]]]",{ 

									arrayId: currentBtn.val(), 
									ajax: 1,

								}, function(data, status){

									currentBtn.after( data.output );

								}).done(function( data ) {

									currentBtn.removeClass( "blink" );

								});

Si vous avez des conseils je vous en remercie
Modifié par Kougelhoupf2000 (22 Oct 2017 - 01:34)

Et donc tu veux empêcher qu'on puisse cliquer partout ou traiter tout tes appels ajax à la suite ?

je ne souhaite pas empecher qu'on puisse cliquer partout, mais il faudrait juste que tous les appels ajax fonctionnent correctement, c'est à dire qu'ils affichent le resultat

ton objet currentBtn montre nous le code où tu le cible.

Dommage que tu ne fasses pas d'Ajax pur, car ce serait enfantin.
Tu vois il n'y a qu'un "window.XMLHttpRequest" appel d'un php en Ajax et gestion de son retour.
Ceux qui ne maîtrisent pas Ajax se servent de cette usine à gaz qui est Jquery, perdant ainsi toute maîtrise de leur programmation, ce qui est évident,vu ta question !

Je te signales que rédacteur de cours et articles sur un autre forum ami, je n'ais eu aucun mal à convaincre mes lecteurs, de revenir à un Ajax "pur".

Depuis 1995 je procèdes ainsi, c'est de cette façon qu'AXA par exemple gère depuis 5 ans tout ces payement avec des programmes de ce type.

A ta disposition pour basculer en AJAX d'origine.

Pour info on perd pas le contrôle de l'event avec le jquery vue que les différents callback(s) sont parfaitement gérés. La typiquement c'est juste que son objet currentBtn doit probablement cibler toujours le même élément du DOM, et du coup c'est juste le dernier callback "done" qui prend la main et comme c'est du multi-threads il est impossible de prévoir le quel finira avant l'autre. Le principe de l'asynchrone quoi...
Modifié par black_magic (22 Oct 2017 - 16:22)

Un peu hors sujet Christele, tu ne crois pas ?

Salut black_magic et bzh , je comprends bien votre réaction mais comme disait Coluche, ce n'est pas parce qu’ils sont nombreux à avoir tort qu'ils ont raison.
Pas hors sujet car je lui donne une piste que j'estime valide ,voir plus "pur" coté langage.

Bonjour et merci pour vos réponses

Excusez-moi pour ma réaction tardive

Voici où je cible le bouton:

$( document ).ready(function() {

	$("body").on("click", "button.toggle", function(){

		currentBtn 	= $(this);

		currentBtn.addClass( "blink" );

		$.post("http://localhost/ajaxcall.php",{ 

			arrayId: currentBtn.val(), 
			timeout: 5,

		}, function(data, status){

			currentBtn.after( data.output );

		}).done(function( data ) {

		}).fail(function() {
			alert( "error ajax" );
		}).always(function() {

			currentBtn.removeClass( "blink" );

		});

Si je clique sur plusieurs boutons très rapidement, les résultats seront tous affichés en dessous du premier bouton, et seul le premier bouton sera correctement débarrassé de la class "blink" et s'arretera de clignoter

Théoriquement, les résultats chargés devraient s'afficher sous le bouton correspondant sur lequel on a cliqué et la class "blink" devrait être enlevée de chaque bouton correspondant quand le chargement ajax est fini
Modifié par Kougelhoupf2000 (26 Oct 2017 - 21:21)

Apparemment il faut utiliser un "context"

J'essaie d'implémenter "context" mais il semblerait que ça bloque le script...

car le "alert('ok');" n'est jamais executé

$( document ).ready(function() {
 
	$("body").on("click", "button.toggle", function(){
 
		currentBtn 	= $(this);

		$.post("http://localhost/ajaxcall.php",{ 
 
			context:currentBtn
 
		}, function(data, status){

                     alert('ok');  // cette ligne ne sera jamais executée

		}).done(function( data ) {
		}).fail(function() {
		}).always(function() {
		});

et firebug ne montre pas qu'il y a des erreurs javascript
par contre si j'attends quelque dizaines de secondes j'ai l'erreur firebug "maximum callstack exceeded"

Merci Kustolovic ! en effet il fallait déclarer var = currentBtn !