Discussion :

[setni]

Bonsoir,

Voici mon sujet du jour pour mon site. Je créé un bouton de "jaime" à la facebook.

Après l'avoir fait correctement en php j'ai décidé d'utiliser AJAX pour éviter le rechargement de la page.

J'ai donc fait ce 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
$("input[data-xxx=jaime]").on('click', function() {
 
	if($(this).attr('name') === 'like') {
 
	jaime = $(this).parent('div').children("input[name=jaime]").val();
	$(this).parent('div').children("input[name=jaime]").attr('name', 'jaimepas');
	id = $("input[name=id]").val();
	$(this).css('background', 'url(coeur_on.png) transparent no-repeat center').attr('name', 'dislike');
	alert(id);
 
	$.ajax({
			url : 'acceuil.class.php',
			type: 'post',
			data : 'jaime=' + jaime + '&id='+ id ,
			dataType : 'text',
			success : function (text, statut){
 
				 $('#'+jaime+'jaime').text(text);
 
			},
			error : function(resultat, statut, erreur){ 
 
			},
			complete : function(resultat, statut){
 
 
			}
 
		});
 
	} else {
 
	$("input[name=dislike]").on('click', function() {
	jaimepas = $(this).parent('div').children("input[name=jaimepas]").val();
	$(this).parent('div').children("input[name=jaimepas]").attr('name', 'jaime');
	id = $("input[name=id]").val();
	$(this).css('background', 'url(coeur_off.png) transparent no-repeat center').attr('name', 'like');
 
	$.ajax({
			url : 'acceuil.class.php',
			type: 'post',
			data : 'jaimepas=' + jaimepas + '&id='+ id ,
			dataType : 'text',
			success : function (text, statut){
 
				 $('#'+jaimepas+'jaime').text(text);
 
			},
			error : function(resultat, statut, erreur){ 
 
			},
			complete : function(resultat, statut){
			}
 
		});
 
	});
	}
});

Celui ci fonctionne très bien au premier clique, la requête se lance, met à jour la base, modifie les paramètre du bouton.

Mais au second clique, sa se gâte.

Voici le rapport firebug:

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
POST http://localhost:8888/acceuil.class.php
 
200 OK
		40ms	
jquery.min.js (ligne 4)
POST http://localhost:8888/acceuil.class.php
 
200 OK
		41ms	
jquery.min.js (ligne 4)
POST http://localhost:8888/acceuil.class.php
 
200 OK
		31ms	
jquery.min.js (ligne 4)
POST http://localhost:8888/acceuil.class.php
 
200 OK
		5ms	
jquery.min.js (ligne 4)

La première ligne représente le premier clique, ici suppression du jaime, les trois suivantes le second...

Dans le détail, il lance la requête d'ajout une fois puis deux fois la requête de suppression et à la seconde fois, la variable "jaimepas" qui est l'id de l'élément concerné est "undefined".

Je ne comprends absolument pas ce comportement. Étant très novice, je remercie celui qui saura au moins me dire ce qui ce passe et encore mieux comment le corriger.

[SpaceFrog]

fais une recherche avec on() par délégation ...

=>
http://www.developpez.net/forums/d12...te-evenements/

[setni]

Merci

Mais cela ne répond pas à ma question...

Merci

[NoSmoking]

Bonjour,
si ta question est

Je ne comprends absolument pas ce comportement.

la réponse est tout à fait contenu, avec la solution, dans la discussion mise en lien par SpaceFrog.

[setni]

Bonsoir

la réponse est tout à fait contenu, avec la solution, dans la discussion mise en lien par SpaceFrog.

Ici, le sujet traite de .click() et propose en solution l'utilisation de .on(), la seule méthode utilisable après Jquery 1.7 (si je lis bien)

Moi, j'utilise déja .on()

Donc ce sujet (très intéressante au passage). Ne m'aide pas. Après peut etre que je ne comprends pas ce qui est écrit...

Merci

[NoSmoking]

effectivement.

La question qui peut se poser concerne cette ligne

Code :

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

$("input[name=dislike]").on('click', function() {

à chaque fois que tu passes dans le else tu rajoutes un événement, ce n'est peut être pas le but du jeu!