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.