Discussion :

[Kougel2000]

Hello,

J'ai une question au sujet de jquery / 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 sur d'autres boutons avant que la première requete ait fini de charger, seul le premier bouton sur lequel j'ai cliqué affichera les données correctement.

Firebug me montre que les responses de chaque request sont chargées correctement

Voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$( 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" );
 
		});

En gros et pour résumer, si je clique sur plusieurs boutons rapidement, les résultats chargés par ajax s'afficheront tous sous le même bouton alors que chaque résultat devrait s'afficher sous le bouton correspondant sur lequel on a cliqué, même si on a cliqué comme un malade sur les boutons

Est-ce que vous arrivez à repérer l'erreur par hasard ?

Merci !

[mathieu]

le contenu de "currentBtn" se modifie peut-être entre chaque appel.
essayez de passer le bouton avec l'argument "context" de la requête AJAX pour que vous puissiez l'utiliser dans les fonctions anonymes.

[Kougel2000]

merci Mathieu !

J'essaie d'implémenter "context" mais il semblerait que ça bloque le script... en effet, le "alert('ok');" n'est jamais executé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$( 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"

[ABCIWEB]

Salut,

Si tu cliques plusieurs fois sur un même bouton "comme un malade" il est possible aussi que tu envoies plusieurs fois la même requête avant d'avoir reçu une réponse et que cela pose des conflits. On peut éventuellement désactiver la fonctionnalité onclick du bouton dans le beforesend de la requête ajax et le réactiver dans le done ou le always pour éviter ce genre de problème. C'est ce que je fais en employant la syntaxe longue de jQuery pour les requêtes ajax, mais il y a peut-être des raccourcis pour faire plus rapide et éviter ce genre de problèmes.

[Kougel2000]

j'ai trouvé : il fallait déclarer la variable currentBtn avec var = ce qui permet de ne pas la considérer comme une globale

Par ailleurs, il faut utiliser "ajax" et non "post" car "post" n'accepte pas "context"

merci à tous pour l'aide !