[AJAX] ajax liste lies chargement avec mon 2e select

Bonjour,

suite a l'étude du tuto de siddh sur les listes lies

il y a un point que je n'arrive pas a comprendre au sujet du chargement de mon 2e champ select dans mes scripts ajax et php pour une liste liés avec 2 champs dans la base de données

le chargement de mon premier champ 'provinces' fonctionne mais je n'arrive pas a charger 'villes' correspondant a 'province_id' suite au select de 'provinces'

Je serais bien content que quelqu'un m'explique ce que je saisis pas encore avec ces scripts au sujet de l'appel de 'villes' en fonction de 'province_id'

Merci

ici, je vous mets les codes

Code:

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
<head>
<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('villes').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxVilles.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 la province
				sel = document.getElementById('provinces');
				province_id = sel.options[sel.selectedIndex].value;
				xhr.send("province_id="+province_id);
			}
		</script>
	</head>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<select name='provinces' id='provinces' onchange='go()'>
					<option value='-1'>Choisir</option>
					<?php
						mysql_connect("localhost","root","");
						mysql_select_db("trajetel");
						$res = mysql_query("SELECT * FROM provinces ORDER BY nom");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
						}
					?>
	</select>  
  <span id="loader" style="display: none;"><img src="../images/loader.gif" alt="loading" /></span></p>
 <p>  Choisissez une ville de départ  :   
 
				<div id='villes' style='display:inline'>
				<select name='villes'>
					<option value='-1'>Choisir une ville : </option>
				</select>
				</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ajaxVilles.php
 
 
<?php
	echo "<select name='villes'>";
	if(isset($_POST["nom"])){
		mysql_connect("localhost","root","");
		mysql_select_db("trajetel");
		$res = mysql_query("SELECT id,nom FROM villes 
			WHERE province_id=".$_POST["province_id"]." ORDER BY nom");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
		}
	}
	echo "</select>";
?>