Obligé de recharger la page

Version imprimable

Bonsoir,
Je peux pas appuyer sur +1 ET -1 (simultanément) ... je suis obligé de recharger la page :cry:
Vous auriez une idée s'il vous plait?

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<title>Page !</title>
<meta charset="UTF-8">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>$(function() {
 
$('.pouce').click(function() {
// lorsque l'on clique sur la class css class_du_pouce
 
var id = $(this).data("id"); //tu récupère l'id, nécessaire pour faire un +1 dans la bdd
 
$.ajax({
type: 'POST',
url: 'pouce2.php',
data: {pouce: id},
success: function(d) {
$('#res1').html(d);
}
});
});
});
</script>
<span id="res4"></span>
</head>
 
<body>
<input type="text" name="champdunom" id="1" data-champ="1" onBlur="envoyer(1)"/><br>
<input type="text" name="champdunom" id="2" data-champ="2" onBlur="envoyer(2)"/><br>
<input type="text" name="champdunom" id="3" data-champ="3" onBlur="envoyer(3)"/><br>
<input type="submit" name="submit" id="4" data-bouton="4" onclick="envoyer2(4)"/><br>
<span id="res3"></span><br>
<script>
     function envoyer(num){
        var valeurchamp = document.getElementById(num).value; 
        $.ajax({
        type: 'POST',
        url: 'pouce2.php',
        data: {champ: valeurchamp},
        success: function(d) {
        $('#res3').html(d);}
});
} 
     function envoyer2(4){
        var bouton = document.getElementById(4).value; 
        $.ajax({
        type: 'POST',
        url: 'pouce2.php',
        data: {bouton: bouton},
        success: function(d) {
        $('#res4').html(d);}
});
}   
</script><br>
<hr>
<span id="res1">
<span class="pouce" data-id="1" style="cursor:pointer;">+1</span> | <span class="pouce" data-id="0" style="cursor:pointer;">-1</span>
</span>
</body>
</html>

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
<?php
if(isset($_POST['champ']))
{
	if(isset($_POST['bouton']))
	{
		echo '<script>
		document.title = \'(1) Page !\';
		</script>';
		?>
		<script>document.title = '(1) Page !';</script>
		<?php
	}
	else
	{
		echo $_POST['champ'];
	}
}
else
{
	if($_POST['pouce']==1)
	{
		echo '<span class="pouce" style="color:green;cursor:pointer;" data-id="1">+1</span> | <span class="pouce" style="color:none;cursor:pointer;" data-id="0">-1</span>';
	}
	else if($_POST['pouce']==0)
	{
		echo '<span class="pouce" style="color:none;cursor:pointer;" data-id="1">+1</span> | <span class="pouce" style="color:red;cursor:pointer;" data-id="0">-1</span>';
	}
	else
	{
		echo '<span style="color:red;">Erreur</span>';
 
	}
}
?>

Merci bcp !

28/01/2014, 17h44
Bovino

Simultanément ? :weird:
Tu veux donc cliquer en même temps à deux endroits différents de la page ? :mouarf:

Sinon, puisque tu remplaces le contenu de #res1 dans ton retour AJAX, cela veut dire que tu supprimes les éléments qui y étaient et donc les gestionnaires d'événement liés...
Du coup, c'est sûr que s'il n'y a plus de gestionnaire d'événement, tu ne risques plus de déclencher beaucoup d'événements !

Solution : fais une recherche sur la délégation d'événements à l'aide de jQuery.
28/01/2014, 17h46
Anonyme1784

Merci,
oui non en fait c'est plutôt cliquer sur l'un puis sur l'autre sans recharger la page.

Je ne comprends pas trop ? Quand je clique sur +1 par exemple et bien j'ai fait en sorte que j'ai la même page à l'identique avec seulement la couleur qui change, donc je comprends pas du tout pourquoi ça marche pas s'il est en couleur...
28/01/2014, 17h50
Bovino

Citation:

j'ai fait en sorte que j'ai la même page à l'identique avec seulement la couleur qui change

:nono:

Tu confonds ce que tu vois et l'arborescence du DOM.

Code:

$('#res1').html(d);

en faisant ça, tu supprimes les éléments existants pour les remplacer par de nouveaux. Même si le code te semble identique, ce ne sont pas les mêmes éléments. En particulier, les événements qui sont affectés aux anciens ne sont pas miraculeusement affectés aux nouveaux.
28/01/2014, 18h06
Anonyme1784

Merci,
vous pouvez constatez que j'ai un code assez simple, je trouve personnellement que c'est le plus simple et je l'espère.
Cependant j'ai trouvé pas mal de tuto avec ce que vous me proposez (gestionnaire d’événements) mais ça à l'air long et compliqué, à première vue je comprends pas comment faire, il faut que je cherche quelque chose de précis ?
28/01/2014, 18h19
Anonyme1784

UPDATE :
· C'est pas logique puisque les onblur marchent à l'infini (en gros j'ai pas besoin de recharger la page !)
+ Je ne comprends pas pourquoi les onBlur fonctionnent plus :( ils fonctionnaient avant...
28/01/2014, 19h09
Bovino

Citation:

Solution : fais une recherche sur la délégation d'événements à l'aide de jQuery.

"Une recherche" ça veut dire chercher sur google ? ou ça a une signification particulière ?

J'ai essayé ça avec les déléguations dévenement mais ça ne fonctionne pas :(
:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 $(function() { $(".pouce").on('click', function() { // lorsque l'on clique sur la class css class_du_pouce var id = $(this).data("id"); //tu récupère l'id, nécessaire pour faire un +1 dans la bdd $.ajax({ type: 'POST', url: 'pouce2.php', data: {pouce: id}, success: function(d) { $('#res1').html(d); } }); }); });

28/01/2014, 19h46
Anonyme1784

FORMIDABLE !!!!! CA MARCHE AVEC CA !!!!

Code:

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

MERCIIIIII

Mais euh une dernière chose svp :)

Pourquoi mais onBlur et le bouton ne fonctionnent pas s'il vous plait ?