Discussion :

[M4kn4sh]

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 :

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
$('#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.

[SpaceFrog]

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 :

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
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();
		}
	})
});

[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.

[SpaceFrog]

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

Code :

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

$('#transfer').click

on peut vois le html du id transfer ?

[M4kn4sh]

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 html :

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

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

[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.

[M4kn4sh]

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.
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.

[danielhagnoul]

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

[M4kn4sh]

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...

[danielhagnoul]

Bonjour

Suggère un essai avec :

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
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 );

[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 :-)

[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 :

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

1
2
3
$('#transfer').unbind();
$('#markAsFinished').unbind();
$('#consult').unbind();

[ABCIWEB]

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...

[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