[AJAX] 3 Listes liées : la dernière ne s'affiche pas.

Version imprimable

Hello,

Je n'arrive pas à afficher ma troisième liste déroulante dont les résultats sont fonction de la deuxième liste. Cela fonctionne bien entre la 2eme liste qui se met bien à jour en fonction de la 1ere. J'ai beau chercher dans tous les sens je ne comprends vraiment pas d'ou vient l'erreur ...

Quelqu'un aurait-il une piste ???

Voici le code des mes 3 fichiers :

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
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
107
108
109
{literal}
<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 regions(){
				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('region').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","liste-regions.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 destination
 
				sel = document.getElementById('destination');
				id_destination = sel.options[sel.selectedIndex].value;
				xhr.send("id_destination="+id_destination);
 
			}
 
			function typesejour(){
				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('sejour').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","liste-sejours.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 region
 
				sel = document.getElementById('region');
				id_region = sel.options[sel.selectedIndex].value;
				xhr.send("id_region="+id_region);
 
			}
 
 
		</script>	
{/literal}
 
<form>
<div id="pi_moteur_recherche">
 
 
                    <select name="destination"  id='destination' onchange='regions()'>
                      <option value="-1">Toutes les destinations</option>                     
					  <option value="27">DEST 1</option>
					  <option value="28">DEST 2</option>
					  <option value="29">DEST 3</option>
 					  <option value="30">DEST 4</option>
                    </select>
 
 
                    <div id='region'>
                    <select name="id_region" onchange='typesejour()'>
                        <option value="-1">Toutes les r&eacute;gions</option>
                    </select>
                    </div>
 
                    <div id='sejour'>
                    <select name="id_sejour">
                      <option value="-1">Tous les types de s&eacute;jours</option>                       
                    </select>
                    </div>
 
                    <input type="submit" value="Valider">
</div>
 
</form>

Fichier : liste-regions.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
        include('connexion/connexion.php');
 
        echo "<select name='id_region' id='sejour'>";
        
        if(isset($_POST["id_destination"])){
            $id_destination=$_POST["id_destination"];   
            $mdr_regions2="SELECT `id_region`,`nom_region` FROM `regions` WHERE  `id_destination`='$id_destination'";
                $res_mdr_regions2=mysql_query($mdr_regions2);
                while($row = mysql_fetch_assoc($res_mdr_regions2)){
                        echo "<option value='".$row["id_region"]."'>".$row["nom_region"]."</option>";
                }
        }       
        echo "</select>";
        
 
?>

Fichier : liste-sejours.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
        include('connexion/connexion.php');
 
        echo "<select name='id_sejour' class='liste_moteur'>";
        
        if(isset($_POST["id_region"])){
                                        $id_region=$_POST["id_region"];                 
                                        $mdr_sejour="SELECT id_circuit,id_region,nom_circuit FROM circuits WHERE id_region = $id_region)";                                      
                                        $res_mdr_sejour=mysql_query($mdr_sejour);
                                        
                                        while($row = mysql_fetch_assoc($res_mdr_sejour)){
                                                        echo "<option value='".$row["id_circuit"]."'>".$row["nom_circuit"]."</option>";
                                        } 
        } 
        echo "</select>";
?>

Bonsoir,

Citation:

sel = document.getElementById('region');

C'est ton div qui à l'id "region" mais pas ton select généré, en plus ton select généré n'appelle pas la fonction ;).

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
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
107
108
<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 regions(){
				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('region').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","liste-regions.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 destination
 
				var sel = document.getElementById('destination');
				var id_destination = sel.options[sel.selectedIndex].value;
				xhr.send("id_destination="+id_destination);
 
			}
 
			function typesejour(){
				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('sejour').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","liste-sejours.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 region
 
				var sel = document.getElementById('id_region');
				id_region = sel.options[sel.selectedIndex].value;
				xhr.send("id_region="+id_region);
 
			}
 
 
		</script>	
{/literal}
 
<form>
<div id="pi_moteur_recherche">
 
 
                    <select name="destination"  id='destination' onchange='regions()'>
                      <option value="-1">Toutes les destinations</option>                     
					  <option value="27">DEST 1</option>
					  <option value="28">DEST 2</option>
					  <option value="29">DEST 3</option>
 					  <option value="30">DEST 4</option>
                    </select>
 
 
                    <div id='region'>
                    <select name="id_region" id="id_region" onchange='typesejour()'>
                        <option value="-1">Toutes les r&eacute;gions</option>
                    </select>
                    </div>
 
                    <div id='sejour'>
                    <select name="id_sejour" id="id_sejour">
                      <option value="-1">Tous les types de s&eacute;jours</option>                       
                    </select>
                    </div>
 
                    <input type="submit" value="Valider">
</div>
 
</form>

Code:

1
2
3
4
5
6
7
8
9
10
11
echo "<select name='id_region' id='id_region' onchange='typesejour()'>";
 
	if(isset($_POST["id_destination"])){
	    $id_destination=$_POST["id_destination"];	
	    $mdr_regions2="SELECT `id_region`,`nom_region` FROM `regions` WHERE  `id_destination`='$id_destination'";
		$res_mdr_regions2=mysql_query($mdr_regions2);
		while($row = mysql_fetch_assoc($res_mdr_regions2)){
			echo "<option value='".$row["id_region"]."'>".$row["nom_region"]."</option>";
		}
	} 	
	echo "</select>";

Ok Beef, je ferai mon devoir vite fait

A+.

28/02/2011, 12h29
péhachepé

Merci ça marche nickel maintenant

Merci de ta réponse, toutes mes listes déroulantes fonctionnent comme il faut ;)