Même événement sur plusieurs id de même nom [Résolu]

arthuro45 · 06/03/2011, 15h11

Bonjour,

J'ai un tableau html qui contient des enregistrements dont voici la ligne à tester :
<td><input type='text' name='qte' id='qte' value='' /></td>

Pour chaque input 'qte' générés en fonctions du nombre d'enregistrement retourné par une requête, je dois tester la valeur saisie. Pour ce faire j'utilise un événement qui lance une requête Ajax et teste la valeur renvoyée.

L'événement teste bien le 1er input mais pas les autres quand l'événement se déclenche.
Je n'ai pas trouvé comment dire à Jquery : tu testes n'importe quel input 'qte' chaque fois que l' événement se déclenche.

var qt = $("input[name='qte']").val(); La ligne qui pose problème.

Jquery :

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
$("document").ready(function()  {
$("#tderreur").css({"visibility": "hidden"});
  $("#qte").bind('mouseout',
    function() {
        var qt = $("input[name='qte']").val();
	var rf = $("#ref").val();
	$.get("test.php",
	{ qte:qt },
	function(data){
	  if(qt!=""){
		if(data<0) {
			alert("La quantité saisie est supérieure à la quantité disponible !");
			$("#erreur").html("<img id='imger' src='../images/erreur.png' title='La quantité saisie est supérieure à la quantité disponible'>");
			$("#tderreur").css({"visibility": "visible"});
			$("#qte").css({"border": "1px solid red"});
		} 
		else{
			$("#imger").remove();
			$("#tderreur").css({"visibility": "hidden"});
			$("#qte").css({"border": ""});
		}
	  }
	  else{
		$("#imger").remove();
		$("#tderreur").css({"visibility": "hidden"});
		$("#qte").css({"border": ""});
	  }
	});
     }
   );
});

Html :

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
 
<body>
	<table border="1">
	  <tr>
		<th>Réf</th>
		<th>Libellé</th>
		<th>Stock</th>
		<th>Qte</th>
	  </tr>
<?php while($tabInfo = mysql_fetch_array($info)) {
  echo "<tr>";
	echo "<td>".$tabInfo['reference']."</td>";
	echo "<td>".$tabInfo['libelle']."</td>";
	echo "<td>".$tabInfo['stock']."</td>";
 
	echo "<td><input type='text' name='qte' id='qte' value='' /></td>";
 
	echo "<td id='tderreur'><div id='erreur'></div></td>";
  echo "</tr>";
	  }
?>
	</table>

roster · 06/03/2011, 16h24

Bonjour,

Une règle de base veut que l'attribut id soit unique à chaque balise.
Un id commun à plusieurs balises ne peut que générer des erreurs.

Dans ton cas, un code du genre pourrait parfaitement fonctionner (pas testé!):

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./js/jquery/jquery.api.js"></script>
</head>
<body>
	<table border="1">
	  <tr>
		<th>Réf</th>
		<th>Libellé</th>
		<th>Stock</th>
		<th>Qte</th>
	  </tr>
	  <tr>
		<td>#ref1</td>
		<td>libellé1</td>
		<td>20</td>
		<td>
			<input type="text" name="qte" value="" />
		</td>
 
		<td class="tderreur">
			<div></div>
		</td>
	  </tr>	 
	  <tr>
		<td>#ref2</td>
		<td>libellé2</td>
		<td>50</td>
		<td>
			<input type="text" name="qte" value="" />
		</td>
 
		<td class="tderreur">
			<div></div>
		</td>
	  </tr>	 
	</table>
</body>
</html>
 
<script type="text/javascript">
$("document").ready(function()  {
$(".tderreur").css({"visibility": "hidden"});
  $('input[name="qte"]').bind('blur mouseout',
    function() {
        var qt = $(this).val();
	var rf = $(this)
		        .parent()
                        .parent()
			.children(':first-child')
			.text();//et non val ds ce cas!!!
	$.get("test.php",
	{ qte:qt },
	function(data){
	  if(qt!="" && data<0){
			alert("La quantité saisie est supérieure à la quantité disponible !");
			$(this)
				.css({"border": "1px solid red"})
				.parent()
				.next()
				.css({"visibility": "visible"})
				.append(
					$('<div/>')
						.html("<img src='../images/erreur.png' title='La quantité saisie est supérieure à la quantité disponible'>")
				)			
		} 
	  else{
		$(this)
			.css({"border": ""})
			.parent()
			.next()
			.empty()
			.css({"visibility": "hidden"});
	  }
	});
     }
   );
});
</script>

arthuro45 · 06/03/2011, 17h23

Merci pour ta réponse.

Ton code ne génère pas d'erreur et fonctionne sur toutes les lignes du tableau, mais il tourne en boucle sur l'alerte "alert("La quantité saisie est supérieure à la quantité disponible !");" dès que la quantité > 0 (normale), de plus l'image n'apparait pas.

Pourquoi mets-tu 2 parent() ici :

Code :

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

1
2
3
4
 
var rf = $(this)
		.parent()
                .parent()

Tu l'avais compris, je débute avec Jquery. Ce qui m'a décidé c'est la simplicité avec laquelle on peut faire de l'Ajax. (en autre)

roster · 06/03/2011, 17h57

Pour ce qui est de tourner en boucle sur l'alerte, essais en virant l'event blur que j'avais ajouté, certains browsers refocus l'elem à l'origne de l'appel de la boite de dialogue lors de la fermeture de celle-ci, à l'ouverture de la fenêtre, le blur de l'input s'enclenchant (perte focus), et ainsi de suite... {si j'ai bien compris ton problème!}
Remplaces donc:
.bind('blur mouseout', ===>>>> .bind('mouseout', {ce que tu avais mis au départ!!!

Mais tester le valeur d'un input sur un évènement mouseout n'est pas très fréquent! En général, on utilise l'évènement keyup (ou mieux textchange, event customisé que tu pourras trouver sur le net).

.parent().parent() ===>>> pour retomber sur la balise <tr> depuis l'input.
Le plus simple serait ici de donner un id à <tr> pour redescendre directement à partir de celui-ci.

Pour le problème d'image, il faudrait que tu montres ton code pour que je puisse éventuellement cibler le problème.

Mais en fait, je ne comprend pas vraiment ton code. Tu exécute une requête ajax pour comparer la quantité souhaitée par rapport au stock dispo, mais ton tableau semble déjà contenir le stock dispo.

Pourquoi ne pas simplement comparer la valeur stock du tableau avec la quantité saisie? Cela éviterait des requêtes inutiles, l'évènement mouseout se produisant très souvent, et sûrement souvent pour rien.

EDIT: j'ai oublié en fait de faire les cast en utilisant parseInt(). Ton problème de boucle vient sûrement de là. Je vais tester sur Fiddle.

roster · 06/03/2011, 18h33

http://jsfiddle.net/8Bxa7/8/

J'ai testé en virant la requête ajax, cela te permettra de te faire une idée!

EDIT: cette fois le lien correct!

arthuro45 · 06/03/2011, 19h11

Citation:

Pourquoi ne pas simplement comparer la valeur stock du tableau avec la quantité saisie? Cela éviterait des requêtes inutiles, l'évènement mouseout se produisant très souvent, et sûrement souvent pour rien.

Je voulais tester l'ajax avec Jquery

. Effectivement ta solution est meilleur : autant se servir du stock déjà présent.

Tu vas me trouver chi***

mais c'est quand même possible de faire fonctionner mon code avec l'ajax ou c'était ça qui bloqué ?

Sympa le site Fiddle pour tester, je ne connaissais pas.

roster · 06/03/2011, 20h37

Oui bien sûr, tu peux dans la fonction callback de l'ajax mettre le code que tu veux.

Ce qui bloqué dans ton code venait du fait que tu utilisé comme selector l'id qte (#) et non l'attribut name. {En fait, on utilise de préférence les classes comme selector!}

Je me répète mais l'attribut id doit être unique à chaque élément. Et lorsque l'on peut s'en passer, on évite de le déclarer.

06/03/2011, 17h57	#4
roster Membre éclairé Inscription : décembre 2008 Messages : 399 Détails du profil Informations forums : Inscription : décembre 2008 Messages : 399 Points : 352 Points : 352	Pour ce qui est de tourner en boucle sur l'alerte, essais en virant l'event blur que j'avais ajouté, certains browsers refocus l'elem à l'origne de l'appel de la boite de dialogue lors de la fermeture de celle-ci, à l'ouverture de la fenêtre, le blur de l'input s'enclenchant (perte focus), et ainsi de suite... {si j'ai bien compris ton problème!} Remplaces donc: .bind('blur mouseout', ===>>>> .bind('mouseout', {ce que tu avais mis au départ!!! Mais tester le valeur d'un input sur un évènement mouseout n'est pas très fréquent! En général, on utilise l'évènement keyup (ou mieux textchange, event customisé que tu pourras trouver sur le net). .parent().parent() ===>>> pour retomber sur la balise <tr> depuis l'input. Le plus simple serait ici de donner un id à <tr> pour redescendre directement à partir de celui-ci. Pour le problème d'image, il faudrait que tu montres ton code pour que je puisse éventuellement cibler le problème. Mais en fait, je ne comprend pas vraiment ton code. Tu exécute une requête ajax pour comparer la quantité souhaitée par rapport au stock dispo, mais ton tableau semble déjà contenir le stock dispo. Pourquoi ne pas simplement comparer la valeur stock du tableau avec la quantité saisie? Cela éviterait des requêtes inutiles, l'évènement mouseout se produisant très souvent, et sûrement souvent pour rien. EDIT: j'ai oublié en fait de faire les cast en utilisant parseInt(). Ton problème de boucle vient sûrement de là. Je vais tester sur Fiddle.
	00

06/03/2011, 18h33	#5
roster Membre éclairé Inscription : décembre 2008 Messages : 399 Détails du profil Informations forums : Inscription : décembre 2008 Messages : 399 Points : 352 Points : 352	http://jsfiddle.net/8Bxa7/8/ J'ai testé en virant la requête ajax, cela te permettra de te faire une idée! EDIT: cette fois le lien correct!
	00

06/03/2011, 20h37	#7
roster Membre éclairé Inscription : décembre 2008 Messages : 399 Détails du profil Informations forums : Inscription : décembre 2008 Messages : 399 Points : 352 Points : 352	Oui bien sûr, tu peux dans la fonction callback de l'ajax mettre le code que tu veux. Ce qui bloqué dans ton code venait du fait que tu utilisé comme selector l'id qte (#) et non l'attribut name. {En fait, on utilise de préférence les classes comme selector!} Je me répète mais l'attribut id doit être unique à chaque élément. Et lorsque l'on peut s'en passer, on évite de le déclarer.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email