Obligé de recharger la page

**Anonyme1784** · 28/01/2014, 17h36

Bonsoir,
Je peux pas appuyer sur +1 ET -1 (simultanément) ... je suis obligé de recharger la page

Vous auriez une idée s'il vous plait?

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

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
<?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 !

**Bovino** · 28/01/2014, 17h44

Simultanément ?

Tu veux donc cliquer en même temps à deux endroits différents de la page ?

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.

**Anonyme1784** · 28/01/2014, 17h46

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

**Bovino** · 28/01/2014, 17h50

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

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

Code :

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

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

**Anonyme1784** · 28/01/2014, 18h06

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 ?

**Anonyme1784** · 28/01/2014, 18h19

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

**Bovino** · 28/01/2014, 19h09

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

**Anonyme1784** · 28/01/2014, 19h36

"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 JavaScript :

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

**Anonyme1784** · 28/01/2014, 19h46

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

Code :

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

$("#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 ?

Obligé de recharger la page

jQuery

Discussions similaires

Partager

Partager