Empêcher envoi multiple requêtes ajax

Version imprimable

Bonjour,

Je ne comprends ni pourquoi ni comment, mais j'ai une page phtml qui fait appel à une page php par le biais de $.ajax de jQuery et parfois, mon navigateur envoie 2 requêtes, ou plus, d'un coup. Si je re-clique, ça renvoie à chaque fois les anciennes requêtes j'imagine.
Pourtant, en cherchant sur internet, j'avais trouvé unbind, mais ça ne change rien... En ajoutant async : false, le bug se produit moins souvent.

Voici la requête :
Code:

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 $('#transfer').click(function() { $.ajax({ url: '/index/update', async: false, data: { tid: eventId, wid: '<?php echo $this->wid; ?>', statut: 4 }, type: "POST", success: function(responseText) { // on change la couleur if(event.color == "green") { event.color = "darkblue"; } else { event.color = "green"; } $('#calendar').fullCalendar('updateEvent', event); $('#transfer').unbind('click'); }, error: function(jqXHR, textStatus, errorThrown) { alert('Impossible de marquer la tâche comme "transferée"'); $('#transfer').unbind('click'); } }) });
Je précise tout de même que je ne suis pas expert en jQuery...

Merci pour vos réponses.

Une des techniques les plus radicales pour prévenir de multiples click c'est de faire disparaitre le bouton le temps de l'opération

Code:

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
27
28
29
30
$('#transfer').click(function() {
	me=$(this);
	me.hide();
	$.ajax({
		url: '/index/update',
		async: false,
		data: {
			tid: eventId,
			wid: '<?php echo $this->wid; ?>',
			statut: 4
		},
		type: "POST",
		success: function(responseText) {
			// on change la couleur
			if(event.color == "green") {
				event.color = "darkblue";
			} else {
				event.color = "green";
			}
			$('#calendar').fullCalendar('updateEvent', event);
			me.unbind('click');
			me.show();	
		},
		error: function(jqXHR, textStatus, errorThrown) {
			alert('Impossible de marquer la tâche comme "transferée"');
			me.unbind('click');
			me.show();
		}
	})
});

29/01/2013, 16h40
M4kn4sh

Merci pour cette réponse, mais en fait, ce n'est pas un problème de "double clic" étant donné que je ne clique qu'une seule et unique fois.
De toute façon, avec l'unbind, ça empêche toute autre action.
29/01/2013, 17h07
SpaceFrog

il n'y a rien dans le bout de code montré qui declenche plusieurs envois...

Code:

$('#transfer').click

on peut vois le html du id transfer ?

Bah pareil, je ne comprends pas non plus...
Pour le code de transfer, c'est un simple menu qui s'affiche lorsque l'on clique sur une div, qui fait ensuite apparaître un menu avec une balise p contenant le transfer et quand on clique, c'est censé faire le traitement ajax...

C'est vraiment tout bête, rien de bien méchant, pour les autres ça fonctionne, mais pas pour transfer, c'est assez aléatoire en fait : tantôt ça marche, tantôt ça ne marche pas.
Code:

1 2 3 4 5 6 7 <div id="menuArea" style="position:absolute;top:0px;left:0px;Z-index:10;visibility:collapse;"> <ul id="menu" class="ulMenuArea"> <li id="1"><p id="consult">Consulter la fiche du client</p></li> <li id="2"><p id="transfer">Transférer au groupe</p></li> <li id="3"><p id="markAsFinished">Marquer comme terminé</p></li> </ul> </div>
Le fait de mettre async: false permet de beaucoup moins le faire, et quand ça se produit, ça m'exécute d'abord une fois l'action et, quand elle est finie, ça relance une action... C'est à s'arracher les cheveux car pour moi le code est correct

29/01/2013, 18h25
ABCIWEB

Avec jquery il y a bien le .one qui permet de ne déclencher l'action qu'une seule fois. Mais il doit y avoir un pb ailleurs dans ton code et l'emploi de async: false est déconseillé la plupart du temps (sauf à en avoir réellement besoin mais pas pour régler ce genre de problème).
Faut te mettre en mode debug, cad revoir et tester ton code bloc par bloc pour voir quand ça cloche.
29/01/2013, 18h33
M4kn4sh

Citation:

Envoyé par ABCIWEB

Avec jquery il y a bien le .one qui permet de ne déclencher l'action qu'une seule fois. Mais il doit y avoir un pb ailleurs dans ton code et l'emploi de async: false est déconseillé la plupart du temps (sauf à en avoir réellement besoin mais pas pour régler ce genre de problème).
Faut te mettre en mode debug, cad revoir et tester ton code bloc par bloc pour voir quand ça cloche.

Le .one ne peut pas être utilisé dans mon cas étant entendu qu'il faut pouvoir effectuer le transfert plusieurs fois d'affilée.
Pour le async: false, j'ai vu le contraire sur un tuto parlant de ça justement, et je crois même que c'était un tuto officiel jQuery.8O
Il est vrai que ce n'est pas vraiment logique de faire du synchrone avec de l'ajax (Asynchronous JavaScript and XML) mais bon, dans certains cas ça reste utile. Dans le miens, ça l'est vu qu'il ne doit rien faire tant que ce n'est pas fini...
Je ne vois pas de problème et je ne sais pas vraiment tester étant donné que ça survient une fois de temps à autres... et ce même en debug.
29/01/2013, 23h50
danielhagnoul

Il n'y aurait pas plus d'un ID portant le nom "transfer" ?
30/01/2013, 07h33
M4kn4sh

Citation:

Envoyé par danielhagnoul

Il n'y aurait pas plus d'un ID portant le nom "transfer" ?

Je viens de regarder au cas où et non, ce n'est malheureusement pas ça non plus...

Bonjour

Suggère un essai avec :

Code:

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
27
28
29
30
31
32
33
34
35
var transferClickEventHandler = function( event ){
	var jObj = $( this );
 
	jObj.off( "click" );
 
	$.ajax({
		url: '/index/update',
		async: false,
		data: {
			tid: eventId,
			wid: '<?php echo $this->wid; ?>',
			statut: 4
		},
		type: "POST",
		success: function(responseText) {
			// on change la couleur
			if(event.color == "green") {
				event.color = "darkblue";
			} else {
				event.color = "green";
			}
			$('#calendar').fullCalendar('updateEvent', event);
		},
		error: function(jqXHR, textStatus, errorThrown) {
			alert('Impossible de marquer la tâche comme "transferée"');
		},
		complete: function(){
			jObj.on( "click", transferClickEventHandler );
		}
	});
 
	return false;
};
 
$( "#transfer" ).on( "click", transferClickEventHandler );

30/01/2013, 16h42
M4kn4sh

Merci pour ta réponse, je laisse comme ça pour le moment car je suis passé sur un autre projet et on n'a plus rencontré le bug.

Merci tout de même pour votre aide à tous :-)
01/02/2013, 12h46
M4kn4sh
Je viens de retourner sur ce projet, et je comprends mieux le problème.
J'utilise full calendar, et à chaque fois que je fais un clic sur plusieurs events et qu'ensuite je fais le transfert, ça m'envoie ma requête autant de fois que j'ai fais des clics sur les events...

Exemple : je clique sur 3 events différents et je fais transfert sur le 3ème, ça m'envoie 3 fois la requête.

EDIT : c'est bon, je viens de trouver, j'ai ajouté un unbind dans un mouseleave de la div contenant une infobulle pour les évènements.
:
Code:

1 2 3 $('#transfer').unbind(); $('#markAsFinished').unbind(); $('#consult').unbind();
01/02/2013, 16h59
ABCIWEB

Citation:

Envoyé par M4kn4sh

EDIT : c'est bon, je viens de trouver, j'ai ajouté un unbind dans un mouseleave de la div contenant une infobulle pour les évènements.

Peut-être ferais-tu mieux d'utiliser les nouvelles méthodes recommandées depuis la version 1.7 à savoir on et off plutôt que bind et unbind...
01/02/2013, 17h05
M4kn4sh

Merci, je ne connaissais pas, je ne suis pas très fort en jQuery, je n'ai pas assez manipulé. Mais sur internet j'entendais toujours parler d'unbind, du coup j'ai utilisé ça...
Je retiendrai ça pour la prochaine fois, car là, tout est stable, je préfère laisser comme ça vu que ça fonctionne très bien