Comment rendre ce code plus "générique" ?

**Yann39** · 05/11/2010, 17h07

Bonjour

voici mon problème, j'ai plusieurs listes déroulantes, à côté de chacune d'elles une petite image qui permet d'ajouter la valeur sélectionnée dans la liste dans un panier.

J'aimerais que l'orsque que la valeur nulle est sélectionnée dans une liste, il ne soit pas possible de cliquer sur l'image associée pour ajouter la valeur au panier. Entre j'aimerais :
- changer le src de l'image pour mettre une image grisée
- enlever le onclick pour que l'ajout ne se fasse pas
- enlever l'effet "transfer" qui montre l'ajout au panier (cadre qui se déplace)

J'ai enlever le superflu mais en gros le code HTML ressemble à ceci (pour une liste déroulante et son image associée) :

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
<table>
 <tbody>
  <tr>
   <td>
    <div>
     <div>
      <select id="P3_FILTRE_AREA_NAME">
       <option selected="selected" value="%"> </option>
       <option value="BIDON">BIDON</option>
      </select>
     </div>
    </div>
   </td>
   <td>
    <img alt="" src="mettre_panier.png" class="img_to_panier">
   </td>
  </tr>
 </tbody>
</table>

voici le code jquery qui fonctionne pour chaque liste déroulante, ici pour la liste dont l'id est P3_FILTRE_AREA_NAME :

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
 
$("#P3_FILTRE_AREA_NAME").change(
		function () {
			if ($(this).val() == '%') {
				$(".img_to_panier:eq(0)").attr('src','#APP_IMAGES#mettre_panier_grise.png');
				$(".img_to_panier:eq(0)").unbind('click');
				$(".img_to_panier:eq(0)").unbind('mouseenter',mouseover).unbind('mouseleave',mouseout);
			}
			else {
				$(".img_to_panier:eq(0)").attr('src','#APP_IMAGES#mettre_panier.png');
				$(".img_to_panier:eq(0)").unbind('click').click(function () {
					$(this).effect("transfer", { to: $("#table_panier") }, 600);
					add_to_cart('#APP_IMAGES#', html_GetElement('P3_FILTRE_AREA_NAME').value, 'area_name', 1);
				});
				$(".img_to_panier:eq(0)").hover(mouseover,mouseout);
			}      
		}
	);

Pour la liste déroulante P3_FILTRE_ACCL_NAME :

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
 
$("#P3_FILTRE_ACCL_NAME").change(
		function () {
			if ($(this).val() == '%') {
				$(".img_to_panier:eq(1)").attr('src','#APP_IMAGES#mettre_panier_grise.png');
				$(".img_to_panier:eq(1)").unbind('click');
				$(".img_to_panier:eq(1)").unbind('mouseenter',mouseover).unbind('mouseleave',mouseout);
			}
			else {
				$(".img_to_panier:eq(1)").attr('src','#APP_IMAGES#mettre_panier.png');
				$(".img_to_panier:eq(1)").unbind('click').click(function () {
					$(this).effect("transfer", { to: $("#table_panier") }, 600);
					add_to_cart('#APP_IMAGES#', html_GetElement('P3_FILTRE_ACCL_NAME').value, 'accl_name', 1);
				});
				$(".img_to_panier:eq(1)").hover(mouseover,mouseout);
			}      
		}
	);

etc...

Comme vous le voyez le code est très similaire, il y a juste l'id de l'image qui change (eq(x)) et les paramètres de la fonction add_to_cart(). J'aimerais donc faire quelquechose de générique.

j'ai essayer avec des combinaisons de closest(), next(), nextAll(), etc... afin de faire une fonction générique qui pour chaque changement dans les listes déroulantes, récupère l'image qui suit et fait les traitement associés, mais je ne m'en sort pas j'ai laissé tombé.

Avez-vous une idée de comment je pourrais faire ça ?

Merci !

**llaffont** · 05/11/2010, 17h58

J'ai pas testé mais dans le principe sa doit ressembler à ça :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function Move2Box() {
if ($(this).val() == '%') {
$(".img_to_panier:eq(1)").attr('src','#APP_IMAGES#mettre_panier_grise.png');
$(".img_to_panier:eq(1)").unbind('click');
$(".img_to_panier:eq(1)").unbind('mouseenter',mouseover).unbind('mouseleave',mouseout);
}
else {
$(".img_to_panier:eq(1)").attr('src','#APP_IMAGES#mettre_panier.png');
$(".img_to_panier:eq(1)").unbind('click').click(function () {
$(this).effect("transfer", { to: $("#table_panier") }, 600);
add_to_cart('#APP_IMAGES#', html_GetElement(this).value, 'accl_name', 1);
});
$(".img_to_panier:eq(1)").hover(mouseover,mouseout);
}  
}
</script>
  </head>
  <body>
<table>
  <tbody>
<tr>
  <td>
<div>
  <select id="P3_FILTRE_AREA_NAME" onChange="Move2Box();">
<option value="BIDON1">BIDON1</option>
<option value="BIDON2">BIDON2</option>
  </select>
</div>
  </td>
  <td>
<img alt="" src="mettre_panier.png" class="img_to_panier" />
  </td>
</tr>
  </tbody>
</table>
  </body>
</html>

Les évènements directement gérés par ta balise select via onChange. Ce qui te permet via la variable this de donner un point de départ à ta gestion d'aspect.

**Yann39** · 06/11/2010, 23h06

Merci pour ta réponse.

Néanmoins, je me suis peut-être mal exprimé, mais ça ne résoud pas le problème, le code que tu m'a indiqué corresponbd à ce que j'utilise déjà, il fonctionne pour une seule liste déroulante, il faut que je le duplique pour chacune d'elles.

Le but est d'avoir une seule fonction jquery que j'appelerais sur chacune des listes déroulantes (pour ne pas être obligé d'écrire la fonction associée à chaque fois que j'ajoute une liste déroulante).

Merci

**llaffont** · 06/11/2010, 23h15

Envoyé par Yann39

Le but est d'avoir une seule fonction jquery que j'appellerais sur chacune des listes déroulantes

As tu seulement testé ? Voir compris.
Car ce code réponds à ton besoin à condition que tu appliques l'évènement au Select et non au gestionnaire d'évènement JQUERY

J'allais pas changé ta fonction puisqu'elle fonctionne et que tu le dis toi même.
J'ai juste modifié un ou deux truc (regarde le this) en plus de sa déclaration évènementiel.

**Yann39** · 07/11/2010, 16h40

Désolé mais je n'ai pas de quoi tester le week-end, je testerai demain au boulo.

Le simple fait d'avoir vu $(".img_to_panier:eq(1)") dans ton code m'a fait penser que ça ne fonctionnerait pas puisque je pensais que $(".img_to_panier:eq(1)") récupérait la 2ème image dans le code HTML, et non "la prochaine image" après la liste déroulante.

Mais peut-être que je me trompe. Je regarde ça demain.

Merci.

**llaffont** · 07/11/2010, 17h06

J'ai repris ton code. L'index du selecteurs: ":eq" n'est initialisé par moi mais bien par ton code.

Tu me diras demain quelles sont tes impressions.

**Yann39** · 08/11/2010, 09h07

C'est bien ce que je me disais

$(".img_to_panier:eq(1)") change toujours la même image (celle de la 2eme liste déroulante), quelquesoit l'endroit où le code est appelé.

Je voudrais récupérer "la prochaine image qui suit la liste déroulante" pour que ce soit dynamique. C'est pour ça que j'avais tenté avec closest(), next(), nextAll(), etc... mais sans succès.

Mais bon dans tous les cas je serai forcé de passer le 3ème paramètre de la fonction add_to_cart qui change à chaque fois ('accl_name' pour la liste déroulante concernant les accélarateurs, 'area_name' pour la liste déroulante concernant les zones, etc...). Alors je vais passer le numéro de l'image en même temps.

Merci pour ton aide

**danielhagnoul** · 08/11/2010, 10h22

Bonjour

Je viens de tester, autant qu'il est possible, car il me manque des éléments, le code suivant :

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
$("select[id^='P3_FILTRE_']").change(function(){
	var ID = this.id;
	var objThis = $(this);
	var objImg = objThis.parents("tr").children("td:eq(1)").children("img.img_to_panier");
 
	// Firebug
	// console.log(ID, objThis, objImg);
 
	if ($(this).val() == '%') {
		objImg.attr('src','#APP_IMAGES#mettre_panier_grise.png');
 
		objImg.unbind('click');
 
		objImg.unbind('mouseenter',mouseover).unbind('mouseleave',mouseout);
	} else {
		objImg.attr('src','#APP_IMAGES#mettre_panier.png');
 
		objImg.unbind('click').click(function(){
			objThis.effect("transfer", { to: $("#table_panier") }, 600);
 
			add_to_cart('#APP_IMAGES#', html_GetElement(ID).value, 'area_name', 1);
		});
 
		objImg.hover(mouseover,mouseout);
	}
});

Il semble donner satisfaction. Mais pour les éléments manquants, j'ai des incompréhensions et des inquiétudes !

Code :

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

1
2
3
objImg.unbind('mouseenter',mouseover).unbind('mouseleave',mouseout);
 
objImg.hover(mouseover,mouseout);

mouseover et mouseout sont des événements jQuery obsolètes, mais toujours présents, si vous avez nommés des fonctions comme cela il faut changé les noms.

**Yann39** · 08/11/2010, 14h29

Bonjour,

merci d'avoir pris le temps de regarder mon problème.

Le code fonctionne parfaitement, bravo

Il y a juste ce paramètre 'area_name' qui doit être différent selon la liste déroulante, mais il faut que je regarde si je ne peux pas procéder autrement pour ma fonction add_to_cart afin d'enlever ce paramètre.

Je ne connaissais pas la notation $("select[id^='P3_FILTRE_']"). C'est plutôt pratique

Je trouve quand même dommage que Jquery ne propose pas de méthode permettant de trouver "le prochain élément img" (par exemple) dans le code, depuis l'endroit où on fait l'appel. Cela éviterait les parents(), children(), ... Car là imaginons que j'ajoute une colonne entre la liste et l'image, alors il faudra que je modifie le code jquery (("td:eq(2)")), c'est dommage.

Concernant les fonctions mouseover et mouseout ce sont des fonctions que j'ai définis moi même, qui permettent simplement de changer l'apparence du curseur :

Code :

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

1
2
function mouseover() {$(this).css('cursor','pointer');}
function mouseout() {$(this).css('cursor','auto');}

Ca n'a pas l'air de poser de problème, mais je peux toujorus changer le nom par précaution.

Merci !

**llaffont** · 08/11/2010, 15h01

Le gros problème ici c'est ta pagination dans un Table.
Si ton image avait été dans ton div avec ton Select tu aurais rencontrés moins de problèmes.

Tu n'a pas essayé de paginer en CSS ?

Enfin félicitation danielhagnoul pour avoir pensé au REGEX

**Yann39** · 08/11/2010, 15h48

Oui il est vrai qu'il faut que je m'habitue à ne plus utiliser ces bons vieux table.

Je vais regarder pour passer ça en CSS histoire de simplifier le code.

Bref je devrais pouvoir m'en sortir seul.

Merci à vous deux pour votre aide bien appréciée !

**danielhagnoul** · 08/11/2010, 20h01

Bonsoir

N.B. :

J'avais oublié de convertir $(this).val() en objThis.val().
L'utilisation de parent(), parents() et children() n'est pas pénalisante, bien au contraire cela a été fortement optimisé. Si vous écrivez un sélecteur complexe -- par exemple : $("#monID tr td span img") jQuery réécrit le tout en interne en utilisant children().

Si j'ai bien compris, voici la solution :

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
$("select[id^='P3_FILTRE_']").change(function(){
	var ID = this.id;
	var areaName = this.id.slice(10).toLowerCase();
	var objThis = $(this);
	var objImg = objThis.parents("tr").children("td:eq(1)").children("img.img_to_panier");
 
	// Firebug
	//console.log(ID, areaName, objThis, objImg);
 
	if (objThis.val() == '%') {
		objImg.attr('src','#APP_IMAGES#mettre_panier_grise.png');
 
		objImg.unbind('click');
 
		objImg.unbind('mouseenter',mouseover).unbind('mouseleave',mouseout);
	} else {
		objImg.attr('src','#APP_IMAGES#mettre_panier.png');
 
		objImg.unbind('click').click(function(){
			objThis.effect("transfer", { to: $("#table_panier") }, 600);
 
			add_to_cart('#APP_IMAGES#', html_GetElement(ID).value, areaName, 1);
		});
 
		objImg.hover(mouseover,mouseout);
	}
});

**Yann39** · 09/11/2010, 15h54

Hehe tu as pensé à la même chose que moi

Mais du coup j'ai modifié ma fonction add_to_cart() et je lui passe l'id complet de l'élément (et non seulement les derniers caractères

ce qui évite le slice).

Je me suis rendu compte que j'avais également besoin d'exécuter ce code sur quelques input, mais les valeurs nulles dans mes input renvoies '' et non '%' comme dans mes listes déroulantes, j'ai donc modifié comme ceci (utilisation de filter et modification du if). Ca semble fonctionner à merveille

:

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
$("select,input").filter("[id^='P3_FILTRE_']").change(function(){
		var ID = this.id;
		var objThis = $(this);
		var objImg = objThis.parents("tr").children("td:eq(1)").children("img.img_to_panier");
		if ((this.tagName == 'SELECT' && objThis.val() == '%') || (this.tagName == 'INPUT' && objThis.val() == '')) {
			objImg.attr('src','#APP_IMAGES#mettre_panier_grise.png');
			objImg.unbind('click');
			objImg.unbind('mouseenter',mouseover).unbind('mouseleave',mouseout);
		} else {
			objImg.attr('src','#APP_IMAGES#mettre_panier.png');
			objImg.unbind('click').click(function(){
				objThis.effect("transfer", { to: $("#table_panier") }, 600);
				add_to_cart('#APP_IMAGES#', html_GetElement(ID).value, ID, 1);
			});
			objImg.hover(mouseover,mouseout);
		}
	});

J'en profite pour glisser une dernière question

:
Si je veux exécuter le code sur le onChange des listes déroulantes et sur le onKeyUp des input, je fais comment ?

**danielhagnoul** · 09/11/2010, 22h24

Bonsoir

Exemple (voir les commentaires du 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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
		<select id="P3_FILTRE_select">
			<option value="1">Un</option>
			<option value="2">Deux</option>
		</select>
		<input id="P3_FILTRE_input" type="text" />
	</div> 
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.3.min.js"></script>
	<script>
		$(function(){
			/*
			 * Attention un id doit être unique, l'id du select et
			 * celui de l'input doivent être différent.
			 *
			 * Attention, avec keyup la fonction s'activera
			 * pour chaque frappe d'une touche.
			 */
			$("select,input").filter("[id^='P3_FILTRE_']").bind("change keyup", function(){
				if (this.nodeName == "INPUT"){
					console.log(this, $(this).val());
				} else {
					console.log(this, $(this).val(), $(this).children("option:selected").text());
				}
			});
		});
 	</script>
</body>  
</html>

**Yann39** · 10/11/2010, 10h42

Super, c'est tout ce que je voulais

Merci à toi Daniel

Comment rendre ce code plus "générique" ?

jQuery

Discussions similaires

Partager

Partager