[AJAX] 3 liste liées Ajax chacune dépend de l'autre

Version imprimable

bonjour, j'ai 3 listes liées entre eux , l affichage de la 3 liste dépend de la 2 ainsi de suite .
j'ai suivi ce tutoriel http://siddh.developpez.com/articles/ajax/#LIV-A pour bien comprendre le principe , mon problème est que j'ai trois listes ne fonctionne que si je sélectionne la 2 liste, moi je veux une fois je choisi la 1 liste les deux deux autres réagissent automatiquement

voici mon code :

eleveform.php

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
 
 
    <html>
     <head>
     <title>Formulaire  dInscription</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <link rel="stylesheet" href="css/style.css" />
 
   <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 goNiveau(){
				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("niveau").innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","AjaxNiveauEtude.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 lauteur
				sel = document.getElementById("cycle");
				idcycle = sel.options[sel.selectedIndex].value;
				xhr.send("idCycle="+idcycle);
 
 
 
 
			}
 
 
			function goClasse(){
				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("classe").innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","AjaxNiveauEtude.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 lauteur
				sel = document.getElementById("niveau");
				idniveau = sel.options[sel.selectedIndex].value;
				xhr.send("idNiveau="+idniveau);
			}
		</script>
 
 
 
  </head>
   <body>
       <div id="corps">
 
		        <?php
    
          $chemin='header/';
         include($chemin.'logo.php');
         
          $chemin='header/';
         include($chemin.'banniere.php');
       
          $chemin='menu/';
         include($chemin.'menuadmin.php');
       
          ?>
 
 
		       <div id="contenu">
 
		       <form  class="formadd" action="adduser.php"   method="post" id="enreg">
 
 
            <table>
                      <caption>Inscrire  Un  Eleve</caption>
                 <tr>
               <td><label> Matricule</label></td>
               <td> <input type="text"  name="matricule"  required="required" /></td>
               </tr>
 
 
            <tr>
                <td><label> Nom  :</label></td>
               <td> <input type="text"  name="nom"  required="required" /></td>
               </tr>
               <tr>
               <td><label> Prenom:</label></td>
               <td> <input type="text"  name="prenom"  required="required" /></td>
               </tr>
               <tr>
                 <td><label> Adresse:</label></td>
               <td> <input type="text"  name="adresse"  required="required" /></td>
               </tr>
               <tr>
                <td><label> Email :</label></td>
                <td><input type="text"  name="email"  required  /></td>
                </tr>
 
                   <tr>
                 <td><label> Telephone:</label></td>
               <td> <input type="text"  name="telephone"  required="required" /></td>
               </tr>
 
 
 
 
                <tr>
               <td> <label> Cycle:</label></td>
                 <td> <select name='cycle'  id='cycle'  onchange="goNiveau();">
                  <option value='-1'>Aucun</option>
 
                <?php
                     mysql_connect("localhost", "root", "");
mysql_selectdb("gestionecole"); 
                 $req= mysql_query('select  * from   cycle ');
                while($data= mysql_fetch_assoc($req) ) 
                     {
 
                        echo "<option   value='".$data['id']."'>"; echo utf8_encode($data["nom_cycle"]);echo'</option>';
                      }
                      ?>
                </select>
                 </td>
                 </tr>
 
 
                <tr>
               <td> <label> NIVEAU D ETUDE:</label></td>
                 <td  > <select name="niveau"   id="niveau"  onchange="goClasse();">
                      <option value="-1">choir  un niveau d etude <option>
                 </select>
                 </td>
                 </tr>
 
 
                <tr>
               <td> <label> CLASSE:</label></td>
                 <td > <select   id="classe" name="classe" >
                   <option value="-1">choir  une classe <option>
 
                </select>
                 </td>
                 </tr>    
               <tr>
                 <td></td>
            <td> <button    type="submit"   name="enregistrer"  value="Enregistrer">enregistrer</button></td>
               </tr>
 
             </table>
         </form>
 
 
 
		        </div>
            <?php
                         $chemin='header/';
         include($chemin.'pied.php');
           ?>
      </div>
   </body>
   </html>

AjaxEtudeNiveau.php

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
 
 
 <?php 
  echo "<select name='niveau'>";
	if(isset($_POST["idCycle"])){
		      mysql_connect("localhost", "root", "");
mysql_selectdb("gestionecole"); 
 
		$res = mysql_query("SELECT *  FROM niveau 
			WHERE idCycle=".$_POST["idCycle"]."  ORDER  BY  LIBELLE_NIVEAU ");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".utf8_encode($row["LIBELLE_NIVEAU"])."</option>";
		}
	}
	echo "</select>";
 
 
 
	echo "<select name='classe'>";
	if(isset($_POST["idNiveau"])){
		      mysql_connect("localhost", "root", "");
mysql_selectdb("gestionecole"); 
 
		$res = mysql_query("SELECT *  FROM classe 
			WHERE idNiveau=".$_POST["idNiveau"]."  ORDER  BY  nom_classe ");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".utf8_encode($row["nom_classe"])."</option>";
		}
	}
	echo "</select>";
 
 ?>

merci d'avance pour votre aide

27/09/2012, 07h19
andry.aime

Bonjour,

1- dans le tutoriel, c'est le conteneur du select qu'on utilise pour innerHTML.
2-

Citation:

echo "<select name='classe'>";

Une fois le 2ème select est généré, tu n'appelles plus la fonction.

A+.
27/09/2012, 12h54
diengkals

merci bien , mais je vous ai pas bien saisi,je pense que j 'ai bien respecté le tutoriel
merci d'avance pour plus de précision sur ma requête
27/09/2012, 14h56
andry.aime

Citation:

Envoyé par andry.aime

1- dans le tutoriel, c'est le conteneur du select qu'on utilise pour innerHTML.

Sur le tutoriel, c'est le contenu du div qu'il modifie mais pas le select.

Citation:

Envoyé par andry.aime

2-
Une fois le 2ème select est généré, tu n'appelles plus la fonction.

Dans le select généré, il n'y a plus d'id ni de onchange pour appeler la fonction.

A+.
27/09/2012, 15h22
diengkals

merci bien, dans mon cas je ne utilise le div j ai juste 3 Select donc pourrais je résoudre mon problème sans parler de div ici merci d'avance
27/09/2012, 15h50
andry.aime

1- innerHTML remplace ou retourne le contenue entre les deux balises ouvrante et fermante d'un noeud.
2- un select ne supporte pas innerHTML dans certains navigateur, donc comme dans le tutoriel, on génère un select en entier.
Donc on crée un div, on met un select à rafraîchir la dessous, pour rafraîchir le select, on écrase seulement le contenu du div avec un nouveau select.

A+.
27/09/2012, 17h08
Invité

Bonjour,
un élément de réponse ICI.
27/09/2012, 17h50
diengkals

2 pièce(s) jointe(s)

merci bien j avais fait un tour sur ce post mais je pense j ai pas de problème pour l affichage des liste , toute mes listes s affichent bien.
pour bien comprendre mon problème je vais vous montrer des captures d'ecrans

pour les deux premières liste j ai pas de problèmes elle s affiche comme je le souhaite

voici un ecran

maintenant pour la troisième liste lorsque je sélectionne la première liste elle devait s afficher tout en dépendant des données de la deuxième liste
mais non elle attend que je change la 2 liste pour s'afficher je pense c est un claire mon problème

merci d'avance
27/09/2012, 17h59
Invité

remplacer :

Code:

<select name='cycle' id='cycle' onchange="goNiveau();">

par :

Code:

<select name='cycle' id='cycle' onchange="goNiveau(); goClasse();">

et dans AjaxEtudeNiveau.php :
remplacer :

Code:

echo "<select name='niveau'>";

par :

Code:

echo "<select name='niveau' id='niveau' onchange='goClasse();'>";
28/09/2012, 13h12
diengkals

1 pièce(s) jointe(s)

merci de votre aide, j'ai changé ce que vous m avait demandé la 3 liste réagit si je sélectionne la 1 liste mais elle s' affiche pas , elle s'affiche que si je sélectionne la 2 liste voici un ecran
28/09/2012, 13h26
andry.aime

Il nous manque ton code pour voir ce qui ne va pas.

merci bien , voici mon code :
ajouterEleveform.php

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
 
 
 
 <html>
     <head>
     <title>Formulaire  dInscription</title>
 
     <link rel="stylesheet" href="css/style.css" />
 
   <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 goNiveau(){
				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("niveau").innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","AjaxNiveauEtude.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 lauteur
				sel = document.getElementById("cycle");
				idcycle = sel.options[sel.selectedIndex].value;
				xhr.send("idCycle="+idcycle);
 
 
 
 
			}
 
 
			function goClasse(){
				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("classe").innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","AjaxNiveauEtude.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 lauteur
 
 
 
				sel1 = document.getElementById("niveau");
				idniveau = sel1.options[sel1.selectedIndex].value;
				xhr.send("idNiveau="+idniveau);
 
 
 
			}
		</script>
 
 
 
  </head>
   <body>
       <div id="corps">
 
		        <?php
    
          $chemin='header/';
         include($chemin.'logo.php');
         
          $chemin='header/';
         include($chemin.'banniere.php');
       
          $chemin='menu/';
         include($chemin.'menuadmin.php');
       
          ?>
 
 
		       <div id="contenu">
 
		       <form  class="formadd" action="adduser.php"   method="post" id="enreg">
 
 
            <table>
                      <caption>Inscrire  Un  Eleve</caption>
                 <tr>
               <td><label> Matricule</label></td>
               <td> <input type="text"  name="matricule"  required="required" /></td>
               </tr>        
               <tr>
                <td><label> Nom  :</label></td>
               <td> <input type="text"  name="nom"  required="required" /></td>
               </tr>
               <tr>
               <td><label> Prenom:</label></td>
               <td> <input type="text"  name="prenom"  required="required" /></td>
               </tr>
                <tr>
               <td><label> Age:</label></td>
               <td> <input type="text"  name="age"  required="required" /></td>
               </tr>
               <tr>
                 <td><label> Adresse:</label></td>
               <td> <input type="text"  name="adresse"  required="required" /></td>
               </tr>
               <tr>
                <td><label> Email :</label></td>
                <td><input type="text"  name="email"  required  /></td>
                </tr>
 
                 <tr>
                  <td><label> Telephone:</label></td>
                  <td> <input type="text"  name="telephone"  required="required" /></td>
                 </tr>
                  <tr>
                <tr>
               <td><label> Année Scolaire:</label></td>
               <td> <input type="text"  name="annee_scolaire"  required="required" /></td>
               </tr>
 
                <tr>
               <td> <label> Cycle:</label></td>
                 <td> <select name='cycle'  id='cycle'  onchange="goNiveau(); goClasse();">
                  <option value='-1'>Aucun</option>
 
                <?php
                     mysql_connect("localhost", "root", "");
mysql_selectdb("gestionecole"); 
                 $req= mysql_query('select  * from   cycle ');
                while($data= mysql_fetch_assoc($req) ) 
                     {
 
                        echo "<option   value='".$data['id']."'>"; echo utf8_encode($data["nom_cycle"]);echo'</option>';
                      }
                      ?>
                </select>
                 </td>
                 </tr>
 
 
                <tr>
               <td> <label> NIVEAU D ETUDE:</label></td>
 
                 <td  >
                  <select name="niveau"  id="niveau"   onchange="goClasse();">
                      <option value="-1">choir  un niveau d etude <option>
                 </select>
 
                 </td>
                 </tr>
 
 
                <tr>
               <td> <label> CLASSE:</label></td>
                 <td >
 
                  <select  name="classe"  id="classe" >
                   <option value="-1">choir  une classe <option>
 
                </select>
 
                 </td>
                 </tr>    
               <tr>
                 <td></td>
            <td> <button    type="submit"   name="enregistrer"  value="Enregistrer">enregistrer</button></td>
               </tr>
 
             </table>
         </form>
 
 
 
		        </div>
            <?php
                         $chemin='header/';
         include($chemin.'pied.php');
           ?>
      </div>
   </body>
   </html>

et mon fichier AjaxNiveauEtude.php

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
 
 
 
 <?php 
  echo "<select name='niveau'    id='niveau'   onchange=goClasse();>";
	if(isset($_POST["idCycle"])){
		      mysql_connect("localhost", "root", "");
mysql_selectdb("gestionecole"); 
 
		$res = mysql_query("SELECT *  FROM niveau 
			WHERE idCycle=".$_POST["idCycle"]."  ORDER  BY  LIBELLE_NIVEAU ");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".utf8_encode($row["LIBELLE_NIVEAU"])."</option>";
		}
	}
	echo "</select>";
 
 
 
	echo "<select name='classes'>";
	if(isset($_POST["idNiveau"])){
		      mysql_connect("localhost", "root", "");
mysql_selectdb("gestionecole"); 
 
		$res = mysql_query("SELECT *  FROM classe 
			WHERE idNiveau=".$_POST["idNiveau"]."  ORDER  BY  nom_classe ");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".utf8_encode($row["nom_classe"])."</option>";
		}
	}
	echo "</select>";
 
 ?>

merci d'avance

28/09/2012, 14h05
andry.aime

Citation:

Envoyé par andry.aime

1- innerHTML remplace ou retourne le contenue entre les deux balises ouvrante et fermante d'un noeud.
2- un select ne supporte pas innerHTML dans certains navigateur, donc comme dans le tutoriel, on génère un select en entier.
Donc on crée un div, on met un select à rafraîchir la dessous, pour rafraîchir le select, on écrase seulement le contenu du div avec un nouveau select.

A+.