.on("click" et AJAX

**setni** · 09/10/2014, 21h54

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** · 10/10/2014, 09h17

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

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

**setni** · 11/10/2014, 20h57

Merci

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

Merci

**NoSmoking** · 12/10/2014, 16h11

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** · 12/10/2014, 19h53

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** · 12/10/2014, 22h06

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!

**SpaceFrog** · 13/10/2014, 08h36

l'utilisation de on() certes ...

on() par délégation ...

le secret est dans "par délégation "...

**setni** · 14/10/2014, 08h40

Bonjour,

Je ne comprends pas les échange mais, en codant une autre page, un semblant de solution est venu:

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
$("#jaime").on('click', function (){
	jobj = $(this).attr('src');
	alert(jobj);
	if(jobj == 'coeur_on.png') {$(this).attr('src', 'coeur_off.png');jaimepas();}
	if(jobj == 'coeur_off.png') {$(this).attr('src', 'coeur_on.png');jaime();}
});
 
function jaime() {
	$.ajax({
 
	});
}
 
function jaimepas() {
	$.ajax({
 
	});
}

Je reviens sur le sujet plus tard pour donner le résultat.

**NoSmoking** · 14/10/2014, 19h08

Je ne comprends pas les échange mais...

ce que je ne comprends pas c'est ta logique

Code :

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

$("#jaime").on('click', function (){

tu gères l'événement sur un élément ayant pour ID jaime, QUI DOIT ETRE UNIQUE, dans ce cas comment UN élément peut-il avoir un attribut différent, (jobj = $(this).attr('src')), en le changeant tu me diras tu, certes mais pourquoi ne pas gérer 2 éléments bien distincts?

**setni** · 14/10/2014, 19h54

Tu veux dire, en ayant 2 images l'une sur l'autre?

Cela serait beaucoup plus complexe à coder non? Et aussi, au chargement de la page, ce n'est pas 1 mais 2 images qui seraient chargés depuis le serveur.

**NoSmoking** · 14/10/2014, 21h47

Je parlais de gérer 2 éléments différents un peu à l'instar du vote sur les réponses du forum
exemple :

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Plus/Moins</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
span{
  display:inline-block;
  margin:0.5em;
  width:2em;
}
</style>
</head>
<body>
<img data-vote="plus"  src="http://www.developpez.net/forums/images/buttons/poucehaut.gif"><span>0</span>
<img data-vote="moins" src="http://www.developpez.net/forums/images/buttons/poucebas.gif"><span>0</span>
<script>
$("[data-vote='moins']").click(
    function(){
      var oSpan =$(this).next();
      oSpan.text( parseInt(oSpan.text(),10) +1);
    }
  );
$("[data-vote='plus']").click(
    function(){
      var oSpan =$(this).next();
      oSpan.text( parseInt(oSpan.text(),10) +1);
    }
 );
</script>
</body>
</html>

tu peux bien sûr factoriser et faire tes requête dans les fonctions.

**SpaceFrog** · 15/10/2014, 13h45

Ce ne serait pas le même souci ?

http://www.developpez.net/forums/d14...importes-ajax/

**setni** · 20/10/2014, 07h35

Désolé pour la réponse tardive, je suis pris par un problème de serveur apache.

Je suis d'accord d'appliquer la solution des deux éléments mais la question c'est :

Est-ce que le serveur charge les deux images avec ma solution? Si la réponse est non, alors elle est plus économique

**NoSmoking** · 25/10/2014, 17h19

Est-ce que le serveur charge les deux images avec ma solution?

pas bien compris mais tu peux toujours passer par les sprites ce qui pourrait correspondre à ton besoin visiblement.

**setni** · 26/10/2014, 08h54

Oui, on regarde pour faires des sprites avec CSS.

Les possibilités sont immenses.

Merci
Discution résolue.

.on("click" et AJAX [AJAX]

jQuery

Partager

Partager