[AJAX] 3 listes liées AJAX

**gearsofcha** · 26/01/2013, 19h20

Bonjour à tous,

Voila j'ai visité plusieurs sites expliquant le fonctionnement des listes liées en AJAX.
Voila je suis entrain de réaliser un test non plus avec deux listes mais 3 listes liées (marque - modèle - cylindrée)
Je sais faire fonctionner les deux premières listes mais la troisième pas moyen :s
Pourtant j'ai lu des sujets traitant du même problème et il parlait de faire attention au nom des div.

Ma DB:
-> marque (id_marque,marque)
-> modele (id, modele, ref_marque)
-> cylindree (id, cylindree,ref_modele)

Voici la page index.php :

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('modele').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","modele.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('marque');
				idmarque = sel.options[sel.selectedIndex].value;
				xhr.send("idMarque="+idmarque);
			}
 
			function go2(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('cylindree').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","cylindree.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('modele');
				idmodele = sel.options[sel.selectedIndex].value;
				xhr.send("idModele="+idmodele);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 1500px">
				<legend>Liste liées</legend>
				<label>Marque</label>
				<select name='marque' id='marque' onchange='go()'>
					<option value='0'>Aucune</option>
					<?php
						mysql_connect("localhost","root","");
						mysql_select_db("eshop");
						$res = mysql_query("SELECT * FROM marque ORDER BY marque");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id_marque"]."'>".$row["marque"]."</option>";
						}
					?>
				</select>
				<label>Modele</label>
				<div name ="modele" id='modele' onchange='go2()' style='display:inline'>
				<select name='modele'>
					<option value='0'>Choissisez un modele</option>
				</select>
				</div>
 
				<label>Cylindree</label>
				<div name ="cylindree" id='cylindree' style='display:inline'>
				<select name='cylindree'>
					<option value='0'>Choissisez une cylindrée</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

la page modele. 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
<?php
	echo "<select name='modele' onchange='go2()'>";
	if(isset($_POST["idMarque"])){
		mysql_connect("localhost","root","");
		mysql_select_db("eshop");
		$res = mysql_query("SELECT id,modele FROM modele
			WHERE ref_marque=".$_POST["idMarque"]." ORDER BY modele");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".$row["modele"]."</option>";
		}
	}
 
	echo "</select>";
?>

la page cylindree.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
<?php
	echo "<select name='cylindree'>";
	if(isset($_POST["idModele"])){
		mysql_connect("localhost","root","");
		mysql_select_db("eshop");
		$res = mysql_query("SELECT id,cylindree FROM cylindree
			WHERE ref_modele=".$_POST["idModele"]." ORDER BY cylindree");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".$row["cylindree"]."</option>";
		}
	}
 
	echo "</select>";
?>

Voila je sais pas ou cela ne fonctionne pas :s
Merci et bonne soirée à tous

++

**andry.aime** · 27/01/2013, 06h18

Bonjour,

Suspect:

document.getElementById('modele').innerHTML = leselect;

sel = document.getElementById('modele');
idmodele = sel.options[sel.selectedIndex].value;

Peut-on voir le code HTML généré?

A+.

**gearsofcha** · 28/01/2013, 09h29

Merci de m'avoir lu,

Voici le code généré lorsque je lance la page :

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supportÃ© par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* MÃ©thode qui sera appelÃ©e sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On dÃ©fini ce qu'on va faire quand on aura la rÃ©ponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reÃ§u et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('modele').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","modele.php",true);
				// ne pas oublier Ã§a pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('marque');
				idmarque = sel.options[sel.selectedIndex].value;
				xhr.send("idMarque="+idmarque);
			}
 
			function go2(){
				var xhr = getXhr();
				// On dÃ©fini ce qu'on va faire quand on aura la rÃ©ponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reÃ§u et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('cylindree').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","cylindree.php",true);
				// ne pas oublier Ã§a pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('modele');
				idmodele = sel.options[sel.selectedIndex].value;
				xhr.send("idModele="+idmodele);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 1500px">
				<legend>Liste liÃ©es</legend>
				<label>Marque</label>
				<select name='marque' id='marque' onchange='go()'>
					<option value='0'>Aucune</option>
					<option value='5'>Alpha Romeo</option><option value='6'>Alpina</option><option value='7'>Aston Martin</option><option value='8'>Audi</option><option value='9'>Austin</option><option value='11'>Bentley</option><option value='12'>BMW</option><option value='13'>Bugatti</option><option value='14'>Buick</option><option value='15'>Cadillac</option><option value='16'>Chevrolet</option><option value='17'>Chrysler</option><option value='18'>Citroen</option><option value='19'>Dacia</option><option value='20'>Dodge</option><option value='21'>Ferrari</option><option value='22'>Fiat</option><option value='23'>Ford</option><option value='24'>GMC</option><option value='25'>Honda</option><option value='26'>Hummer</option><option value='27'>Infiniti</option><option value='28'>Isuzu</option><option value='29'>Jaguar</option><option value='30'>Jeep</option><option value='31'>Kia</option><option value='32'>Lamborghini</option><option value='33'>Lancia</option><option value='34'>Land Rover</option><option value='35'>Lexus</option><option value='36'>Lincoln</option><option value='37'>Lotus</option><option value='38'>Maserati</option><option value='39'>Mazda</option><option value='40'>McLaren</option><option value='41'>Mercedes-Benz</option><option value='42'>MINI</option><option value='43'>Mitsubishi</option><option value='44'>Nissan</option><option value='45'>Opel</option><option value='46'>Pagani</option><option value='47'>Peugeot</option><option value='48'>Porsche</option><option value='49'>Renault</option><option value='50'>Rolls-Royce</option><option value='51'>Rover</option><option value='52'>Saab</option><option value='53'>Seat</option><option value='54'>Skoda</option><option value='55'>Smart</option><option value='56'>Subaru</option><option value='57'>Suzuki</option><option value='58'>Toyota</option><option value='59'>Volkswagen</option><option value='60'>Volvo</option>				</select>
				<label>Modele</label>
				<div name ="modele" id='modele' onchange='go2()' style='display:inline'>
				<select name='modele'>
					<option value='0'>Choissisez un modele</option>
				</select>
				</div>
 
				<label>Cylindree</label>
				<div name ="cylindree" id='cylindree' style='display:inline'>
				<select name='cylindree'>
					<option value='0'>Choissisez une cylindrÃ©e</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

Le code lorsque je choisis une marque :

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supportÃ© par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* MÃ©thode qui sera appelÃ©e sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On dÃ©fini ce qu'on va faire quand on aura la rÃ©ponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reÃ§u et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('modele').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","modele.php",true);
				// ne pas oublier Ã§a pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('marque');
				idmarque = sel.options[sel.selectedIndex].value;
				xhr.send("idMarque="+idmarque);
			}
 
			function go2(){
				var xhr = getXhr();
				// On dÃ©fini ce qu'on va faire quand on aura la rÃ©ponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reÃ§u et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('cylindree').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","cylindree.php",true);
				// ne pas oublier Ã§a pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('modele');
				idmodele = sel.options[sel.selectedIndex].value;
				xhr.send("idModele="+idmodele);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 1500px">
				<legend>Liste liÃ©es</legend>
				<label>Marque</label>
				<select name='marque' id='marque' onchange='go()'>
					<option value='0'>Aucune</option>
					<option value='5'>Alpha Romeo</option><option value='6'>Alpina</option><option value='7'>Aston Martin</option><option value='8'>Audi</option><option value='9'>Austin</option><option value='11'>Bentley</option><option value='12'>BMW</option><option value='13'>Bugatti</option><option value='14'>Buick</option><option value='15'>Cadillac</option><option value='16'>Chevrolet</option><option value='17'>Chrysler</option><option value='18'>Citroen</option><option value='19'>Dacia</option><option value='20'>Dodge</option><option value='21'>Ferrari</option><option value='22'>Fiat</option><option value='23'>Ford</option><option value='24'>GMC</option><option value='25'>Honda</option><option value='26'>Hummer</option><option value='27'>Infiniti</option><option value='28'>Isuzu</option><option value='29'>Jaguar</option><option value='30'>Jeep</option><option value='31'>Kia</option><option value='32'>Lamborghini</option><option value='33'>Lancia</option><option value='34'>Land Rover</option><option value='35'>Lexus</option><option value='36'>Lincoln</option><option value='37'>Lotus</option><option value='38'>Maserati</option><option value='39'>Mazda</option><option value='40'>McLaren</option><option value='41'>Mercedes-Benz</option><option value='42'>MINI</option><option value='43'>Mitsubishi</option><option value='44'>Nissan</option><option value='45'>Opel</option><option value='46'>Pagani</option><option value='47'>Peugeot</option><option value='48'>Porsche</option><option value='49'>Renault</option><option value='50'>Rolls-Royce</option><option value='51'>Rover</option><option value='52'>Saab</option><option value='53'>Seat</option><option value='54'>Skoda</option><option value='55'>Smart</option><option value='56'>Subaru</option><option value='57'>Suzuki</option><option value='58'>Toyota</option><option value='59'>Volkswagen</option><option value='60'>Volvo</option>				</select>
				<label>Modele</label>
				<div name ="modele" id='modele' onchange='go2()' style='display:inline'>
				<select name='modele'>
					<option value='0'>Choissisez un modele</option>
				</select>
				</div>
 
				<label>Cylindree</label>
				<div name ="cylindree" id='cylindree' style='display:inline'>
				<select name='cylindree'>
					<option value='0'>Choissisez une cylindrÃ©e</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

Et le code quand je sélectionne un modele

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supportÃ© par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* MÃ©thode qui sera appelÃ©e sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On dÃ©fini ce qu'on va faire quand on aura la rÃ©ponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reÃ§u et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('modele').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","modele.php",true);
				// ne pas oublier Ã§a pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('marque');
				idmarque = sel.options[sel.selectedIndex].value;
				xhr.send("idMarque="+idmarque);
			}
 
			function go2(){
				var xhr = getXhr();
				// On dÃ©fini ce qu'on va faire quand on aura la rÃ©ponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reÃ§u et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('cylindree').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","cylindree.php",true);
				// ne pas oublier Ã§a pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('modele');
				idmodele = sel.options[sel.selectedIndex].value;
				xhr.send("idModele="+idmodele);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 1500px">
				<legend>Liste liÃ©es</legend>
				<label>Marque</label>
				<select name='marque' id='marque' onchange='go()'>
					<option value='0'>Aucune</option>
					<option value='5'>Alpha Romeo</option><option value='6'>Alpina</option><option value='7'>Aston Martin</option><option value='8'>Audi</option><option value='9'>Austin</option><option value='11'>Bentley</option><option value='12'>BMW</option><option value='13'>Bugatti</option><option value='14'>Buick</option><option value='15'>Cadillac</option><option value='16'>Chevrolet</option><option value='17'>Chrysler</option><option value='18'>Citroen</option><option value='19'>Dacia</option><option value='20'>Dodge</option><option value='21'>Ferrari</option><option value='22'>Fiat</option><option value='23'>Ford</option><option value='24'>GMC</option><option value='25'>Honda</option><option value='26'>Hummer</option><option value='27'>Infiniti</option><option value='28'>Isuzu</option><option value='29'>Jaguar</option><option value='30'>Jeep</option><option value='31'>Kia</option><option value='32'>Lamborghini</option><option value='33'>Lancia</option><option value='34'>Land Rover</option><option value='35'>Lexus</option><option value='36'>Lincoln</option><option value='37'>Lotus</option><option value='38'>Maserati</option><option value='39'>Mazda</option><option value='40'>McLaren</option><option value='41'>Mercedes-Benz</option><option value='42'>MINI</option><option value='43'>Mitsubishi</option><option value='44'>Nissan</option><option value='45'>Opel</option><option value='46'>Pagani</option><option value='47'>Peugeot</option><option value='48'>Porsche</option><option value='49'>Renault</option><option value='50'>Rolls-Royce</option><option value='51'>Rover</option><option value='52'>Saab</option><option value='53'>Seat</option><option value='54'>Skoda</option><option value='55'>Smart</option><option value='56'>Subaru</option><option value='57'>Suzuki</option><option value='58'>Toyota</option><option value='59'>Volkswagen</option><option value='60'>Volvo</option>				</select>
				<label>Modele</label>
				<div name ="modele" id='modele' onchange='go2()' style='display:inline'>
				<select name='modele'>
					<option value='0'>Choissisez un modele</option>
				</select>
				</div>
 
				<label>Cylindree</label>
				<div name ="cylindree" id='cylindree' style='display:inline'>
				<select name='cylindree'>
					<option value='0'>Choissisez une cylindrÃ©e</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

Voici les 3 codes j'espère que cela pourra aider :s
++ et merci encore

**andry.aime** · 28/01/2013, 10h49

Bonjour,

Un div n'a pas d'attribut name.
Donne un autre id que modele pour le div et vire son attribut name, pour modifier le contenue du div avec innerHTML, tu utiliseras ce nouvel id.
Donne ensuite un id="modele" pour ton select et tu l'utiliseras pour récupérer sa valeur.
Il en est de même pour le div et select cylindree.

A+.

**gearsofcha** · 28/01/2013, 17h13

Impeccable un grand merci en tout cas.

[AJAX] 3 listes liées AJAX

AJAX

Discussions similaires

Partager

Partager