Afficher 3 combos box dynamiques

**morpheus0010** · 11/04/2011, 20h31

bonjour ,

je viens de mettre au fameux jquery depuis peu mais je rencontre un problème ,
et j'ai beau le tournée dans tous les sens je ne voie pas d'ou il viens .

le but :

simple afficher 3 combobox de façons dynamique ( affichage de la combobox enfant au changement de la combox parent )

donc j'affiche une première combobox , au .change la seconde est bien générer mais malheureusement le .change de ma 2 eme combobox ne provoque pas d’évènement et ne charge donc pas la dernière combobox .

voici le code jquery ainsi que les pages appeler get_img_cartouche et get_img_categories :

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
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
<script type="text/javascript" src="jquery-1.3.2.js"></script>
 
<script type="text/javascript">
 
$(document).ready(function() {
 
	$('#loader').hide();
	$('#loader2').hide();
	$('#show_heading').hide();
	$('#show_heading2').hide();
 
	$('#search_category_id').change(function(){
		$('#show_sub_categories').fadeOut();
		$('#loader').show();
		$.post("get_chid_categories.php", {
			parent_id: $('#search_category_id').val(),
 
		}, function(response){
 
			setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);
 
		});
		});
 
 
	$('#sub_category_id').change(function(){
 
		$('#show_img_cartouche').fadeOut();
		$('#loader2').show();
		$.post("get_img_cartouche.php", {
			cartouche_id: $('#sub_category_id').val(),
		}, function(response){
 
			setTimeout("finishAjax2('show_img_cartouche', '"+escape(response)+"')", 400); 
 
		});
 
	});
 
 
 
 
});
 
function finishAjax(id, response){
  $('#loader').hide();
  $('#show_heading').show();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
} 
 
function finishAjax2(id, response){
  $('#loader2').hide();
  $('#show_heading2').show();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
} 
 
function alert_id()
{
	if($('#sub_category_id').val() == '')
	alert('Please select a sub category.');
	else
	alert($('#sub_category_id').val());
	return false;
}
 
</script>

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
echo'<form action="#" name="form" id="form" method="post" onsubmit="return alert_id();" enctype="multipart/form-data">';
 
	echo'<div class="both">';
		echo'<h4>Selectionnez une marque : </h4>';
		echo'<select name="search_category"  id="search_category_id">';
		echo'<option value="" selected="selected"></option>';
 
		$query = "select * from marque";
		$results = mysql_query($query);
 
 
		while ($rows = mysql_fetch_assoc(@$results))
		{
 
 $NOMMARQUE=$rows['NOMMARQUE'];
 $IDMARQUE=$rows['IDMARQUE'];
 
 echo "<option value=\"$IDMARQUE\">$NOMMARQUE</option>";
 
		}
 
		echo'</select>';
 
/// sous categorie ( cartouche )
 
 
	echo'<div class="both">';
		echo'<h4 id="show_heading">Selectionnez une cartouche :</h4>';
		echo'<div id="show_sub_categories" align="left">';
			echo'<img src="loader.gif" style="margin-top:8px; float:left" id="loader" alt="" />';
		echo'</div>';
	echo'</div>';
 
 
 
/// affichage de la cartouche selectionnez 
 
	echo'<div class="both">';
		echo'<h4 id="show_heading2">votre cartouche :</h4>';
		echo'<div id="show_img_cartouche" align="left">';
			echo'<img src="loader.gif" style="margin-top:8px; float:left" id="loader2" alt="" />';
		echo'</div>';
	echo'</div>';
 
 
	echo'<br clear="all" /><br clear="all" />';
 
	echo'<input type="submit" name="" value="GO" />';
echo'</form>';

**************************************************
GET_child_categories.php
**************************************************

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
if($_REQUEST)
{
	$id 	= $_REQUEST['parent_id'];
	$query = "select * from cartouche where IDMARQUE = ".$id;
	$results = mysql_query( $query)or die(mysql_error()); // requete
 
	echo'<select name="sub_category"  id="sub_category_id">';
 
 
	while ($rows = mysql_fetch_assoc(@$results))
 
	{
	 $MODELCART=$rows['MODELCART'];
     $IDCARTOUCHE=$rows['IDCARTOUCHE'];
		echo"<option value=\"$IDCARTOUCHE\" >$MODELCART</option>";
 
	}
	echo'</select>';
 
}

**************************************************
GET_child_categories.php
**************************************************

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
if($_REQUEST)
{
	$id 	= $_REQUEST['cartouche_id'];
	$query = "select * from cartouche where IDCARTOUCHE=".$id;
	$results = mysql_query( $query)or die(mysql_error()); // requete
 
	echo'<select name="img_cartouche"  id="img_cartouche__id">';
	echo'<option value="" selected="selected"></option>';
 
	while ($rows = mysql_fetch_assoc(@$results))
 
	{
	 $SERIECART=$rows['SERIECART'];
     $IDCARTOUCHE=$rows['IDCARTOUCHE'];
		echo"<option value=\"$IDCARTOUCHE\" >$SERIECART</option>";
 
	}
	echo'</select>';
 
}

voila en espérant que vous pourrez m’éclairer sur ce soucis
cordialement
morpheus0010

**x-zolezzi** · 13/04/2011, 10h30

Quand tu crées dynamiquement un select il faut lui re-binder la fonction à exécuter sur l’élément change.

http://api.jquery.com/bind/

**morpheus0010** · 18/04/2011, 21h44

Envoyé par x-zolezzi

Quand tu crées dynamiquement un select il faut lui re-binder la fonction à exécuter sur l’élément change.

http://api.jquery.com/bind/

j'essai depuis quelques jour de comprendre cette ce fameux Bind mais il plante et recharge en boucle a chaque fois mes deux dernière combobox
j'ai fais plusieurs essai mais rien de concluant :

Code :

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

$("#sub_category_id").bind("change", function(event){ .... }

merci de m’éclairer

**x-zolezzi** · 18/04/2011, 22h13

Il me semble que tu es sur la bonne voie, $("#sub_category_id").bind("change", function(event){ .... } il faut que tu écrive la fonction que tu veux exécuter.

Je ne peux pas trop t'aider comme ça, le mieux se serait d'avoir une version en ligne pour que le voie, où à la limite les fichiers sources.

**danielhagnoul** · 18/04/2011, 22h36

Bonsoir

Éclaircir du code PHP et SQL sur un sous-forum JS ?

Mais voici un exemple :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		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; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur { width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* TEST */
    </style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<button id="btnCreation">Ajoute un select au formulaire</button>
		<form id="dvjhForm"></form>
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script>
		$(function(){
			/*
			 * Exemple de création et d'ajout du select dans le code.
			 */
			$("#btnCreation").click(function(){
				$("<select/>", {
					"id":"dvjhSelect",
					"html":"<option>Un</option><option>Deux</option><option>Trois</option>"
				}).appendTo("#dvjhForm");
			});
 
			/*
			 * Bind change sur un select inexistant
			 * à l'ouverture de la page web.
			 *
			 * Ne fonctionne pas, bien entendu.
			 */
 
			/*
			$("#dvjhSelect").change(function(){
				console.log($(this).val());
			});
			*/
 
			/*
			 * Bind sur un select d'id dvjhSelect qui n'existe pas
			 * encore mais qui sera ajouté par le code
			 * dans le formulaire d'id dvjhForm.
			 *
			 * On doit préférer delegate à live car il est
			 * plus performant.
			 *
			 * live : http://api.jquery.com/live/
			 * delegate : http://api.jquery.com/delegate/
			 */
			$("#dvjhForm").delegate("#dvjhSelect", "change", function(){
				console.log($(this).val());
			});
		});
	</script>
</body>  
</html>

Afficher 3 combos box dynamiques

jQuery

Discussions similaires

Partager

Partager