[AJAX] Liste déroulante dynamique

Version imprimable

Bonjour,

Nouveau sur ce site super, je me suis enfin décidé de demander votre aide car cela fait au moins 2 semaine que je suis bloqué.

Débutant en développement, encore plus en javascript et encore plus débutant en ajax, j'ai suivi un tuto pour mettre en place des listes déroulantes dynamiques. Cela fonctionne mais j'ai besoin maintenant d'afficher en dessous, dans un div qui s'appelle resultat, la reference choisie dans la liste deroulante produit.

Mais impossible rien ne s'affiche et je ne comprend pas pourquoi.

merci de votre aide

**********************************************************
PAGE PRINCIPALE newpropo3.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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<script type="text/javascript">
	 <!-- script navigation par onglet -->
             function change_onglet(name)
             {
                     document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                     document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                     document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                     document.getElementById('contenu_onglet_'+name).style.display = 'block';
                     anc_onglet = name;
             }
 
	 <!-- script verification formulaire -->
			function verif_formulaire()
			{
			 if(document.formulaire.date.value == "")  {
			   alert("Veuillez entrer la date !");
			   document.formulaire.date.focus();
			   return false;
			  }
			 if(document.formulaire.societe.value == "") {
			   alert("Veuillez entrer le nom de la société !");
			   document.formulaire.societe.focus();
			   return false;
			  }
			 if(document.formulaire.interlocuteur.value == "") {
			   alert("Veuillez entrer le nom de l'interlocuteur !");
			   document.formulaire.interlocuteur.focus();
			   return false;
			  }
			 if(document.formulaire.mail.value == "") {
			   alert("Veuillez entrer l'adresse mail !");
			   document.formulaire.mail.focus();
			   return false;
			  }
				adresse = formulaire.mail.value;
				var place = adresse.indexOf("@",1);
				var point = adresse.indexOf(".",place+1);
				if ((place > -1)&&(adresse.length >2)&&(point > 1))
					{
					formulaire.submit();
					return(true);
					}
				else
					{
					alert('Entrez une adresse e-mail valide !');
					return(false);
					}
				}
 
 
 
	 <!-- script listes deroulantes dynamiques -->
			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 change(){
 
				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){
						document.getElementById('resultproduit').innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxProduit.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
				idtype = document.getElementById('type').options[document.getElementById('type').selectedIndex].value;
				idmarque = document.getElementById('marque').options[document.getElementById('marque').selectedIndex].value;
				xhr.send("idType="+idtype+"&idMarque="+idmarque);
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function result(){
 
				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){
						document.getElementById('resultat').innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxResultat.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
				idproduit = document.getElementById('produit').options[document.getElementById('produit').selectedIndex].value;
				xhr.send("idProduit="+idproduit);
			}
 
 
 
 
 
</script>
 
<form name="formulaire" method="post" action="?page=resultat" onSubmit="return verif_formulaire()">
<table width="1000" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
            <td height="50" align="center"></td>
        </tr>
		<tr>
				<td>
                     <div class="systeme_onglets">
                     <div class="onglets" align="left">
                         <span class="onglet_0 onglet" id="onglet_expediteur" onclick="javascript:change_onglet('expediteur');">EXPEDITEUR</span>
                         <span class="onglet_0 onglet" id="onglet_destinataire" onclick="javascript:change_onglet('destinataire');">DESTINATAIRE</span>
                         <span class="onglet_0 onglet" id="onglet_machine" onclick="javascript:change_onglet('machine');">MACHINE ET OPTIONS</span>
                         <span class="onglet_0 onglet" id="onglet_tarifs" onclick="javascript:change_onglet('tarifs');">TARIFS</span>
                         <span class="onglet_0 onglet" id="onglet_observations" onclick="javascript:change_onglet('observations');">OBSERVATIONS</span>
                     </div>
                     <div class="contenu_onglets">
                         <div class="contenu_onglet" id="contenu_onglet_expediteur">
                                <table border="0" cellspacing="0" cellpadding="2">
                                            <tr>
                                                    <td colspan="2" height="30"></td>
                                            </tr>
                                            <tr>
                                                    <td width="200" align="left" class="champs">DATE DE LA PROPOSITION :</td>
                                                    <td align="left"><input type="text" name="date" id="champs" size="15" value="<?php if (isset($_POST['date'])) { echo $_POST['date']; } else { echo date("d/m/Y");} ?>"></td> 
                                            </tr>
                                            <tr>
                                                    <td align="left" class="champs">EXPEDTEUR :</td>
                                                    <td align="left"><div class="champs"><?php {echo "$pseudo";} ?></span></td>
                                            </tr>
                                            <tr>
                                                    <td align="left" class="champs">QUALITE :</td>
                                                    <td align="left"><div class="champs"><?php {echo "$qualite";} ?></span></td>
                                            </tr>
                                            <tr>
                                                    <td colspan="2" height="30"></td>
                                            </tr>
                                </table>
                         </div>
                         <div class="contenu_onglet" id="contenu_onglet_destinataire">
                                <table border="0" cellspacing="0" cellpadding="2">
                                            <tr>
                                                    <td colspan="2" height="30"></td>
                                            </tr>
                                            <tr>
                                                    <td width="200" align="left" class="champs">NOM DE LA SOCIETE :</td>
                                                    <td align="left" colspan="2"><input type="text" name="societe" id="champs" size="60" value="<?php if(isset($_POST['societe'])) echo $_POST['societe']; ?>"></td>
                                            </tr>
                                            <tr>
                                                    <td align="left" class="champs">A L'ATTENTION DE :</td>
                                                    <td align="left"><select name="civ" id="champs" ><option value="Monsieur" <?php if(isset($_POST['civ'])) if($_POST['civ']== 'Monsieur') echo 'selected'; ?>>Monsieur</option>
                                                                                                    <option value="Madame"  <?php if(isset($_POST['civ'])) if($_POST['civ']== 'Madame') echo 'selected'; ?>>Madame</option>
                                                                                                    <option value="Mademoiselle"  <?php if(isset($_POST['civ'])) if($_POST['civ']== 'Mademoiselle') echo 'selected'; ?>>Mademoiselle</option>
                                                                     </select>   </td>
                                                    <td align="left"><input type="text" name="interlocuteur" id="champs" size="60" value="<?php if(isset($_POST['interlocuteur'])) echo $_POST['interlocuteur']; ?>"></td>
                                            </tr>
                                            <tr>
                                                    <td align="left" class="champs">ADRESSE MAIL DESTINATAIRE :</td>
                                                    <td align="left" colspan="2"><input type="text" name="mail" id="champs" size="60" value="<?php if(isset($_POST['mail'])) echo $_POST['mail']; ?>"></td>
                                            </tr>
                                            <tr>
                                                    <td colspan="2" height="30"></td>
                                            </tr>
                                </table>
                         </div>
                         <div class="contenu_onglet" id="contenu_onglet_machine">
                                <table border="0" cellspacing="0" cellpadding="2">
                                            <tr>
                                                    <td colspan="2" height="30"></td>
                                            </tr>
                                            <tr>
                                                    <td width="100" align="left" class="champs">MARQUE :</td>
                                                    <td align="left">
                                                            	<select name='marque' id='marque' onchange='change()'><option value='-1'>Aucun</option>
                                                                        <?php
                                                                            mysql_select_db("propo");
                                                                            $res = mysql_query("SELECT * FROM marque ORDER BY id_marque");
                                                                            while($row = mysql_fetch_assoc($res)){
                                                                                echo "<option value='".$row["nom_marque"]."'>".$row["nom_marque"]."</option>";
                                                                            }
                                                                        ?>
                                                                </select>
                                                    </td>
                                            </tr>
                                            <tr>
                                                    <td width="100" align="left" class="champs">TYPE :</td>
                                                    <td align="left">
                                                            	<select name='type' id='type' onchange='change()'><option value='-1'>Aucun</option>
                                                                        <?php
                                                                            mysql_select_db("propo");
                                                                            $res = mysql_query("SELECT * FROM type ORDER BY id_type");
                                                                            while($row = mysql_fetch_assoc($res)){
                                                                                echo "<option value='".$row["nom_type"]."'>".$row["nom_type"]."</option>";
                                                                            }
                                                                        ?>
                                                                </select>
                                                    </td>
                                            </tr>
                                            <tr>
                                                    <td align="left" class="champs">PRODUIT :</td>
                                                    <td align="left">
                                                    		<div id='resultproduit'>
                                                    				<select name='produit'>
                                                                        <option value='-1'>Aucun</option>
                                                              		</select>
                                                            </div> 
                                                    </td>
                                            </tr>
                                            <tr>
                                                    <td colspan="2" height="30"><div id='resultat'>resultat</div></td>
                                            </tr>
                                </table>
                         </div>
                         <div class="contenu_onglet" id="contenu_onglet_tarifs">
                             <h1>TARIFS</h1>
                             Pour simplifier la navigation et la diviser en parties
                         </div>
                         <div class="contenu_onglet" id="contenu_onglet_observations">
                             <h1>OBSERVATIONS</h1>
                             Pour simplifier la navigation et la diviser en parties
                         </div>
                     </div>
                 </div>
				</td>
		</tr>
</table>
</form>
<script type="text/javascript">
         //<!--
                 var anc_onglet = 'expediteur';
                 change_onglet(anc_onglet);
         //-->
</script>

**********************************************************
PAGE ajaxProduit.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
<?php
	echo "<select name='produit' onchange='result()' >";
	if(isset($_POST['idType'])&& $_POST['idType'] != '-1' OR isset($_POST['idMarque']) && $_POST['idMarque'] != '-1'){
 
		require('inc/connect_bdd.php'); 
		mysql_select_db("propo");
 
	    $Cnd=""; 
		if(isset($_POST['idMarque']) && $_POST['idMarque'] != '-1') $Cnd=" and marque='".$_POST['idMarque']."'";
		if(isset($_POST['idType']) && $_POST['idType'] != '-1') $Cnd.=" and type_1='".$_POST['idType']."'";
		$Cnd.=" and visible='OUI'";
 
		$req = mysql_query("SELECT * FROM produits WHERE  1=1".$Cnd );
		//on compte les résultats
		$res= mysql_numrows($req);
 
				if($res !='0') {
						while($row = mysql_fetch_assoc($req)){
							echo "<option value='".$row["id"]."'>".$row["reference"]."</option>";}
							echo "</select>"; 
				} else {
						echo "<option value='-1'>Aucun</option>";}
	} else {
 
	echo "<option value='-1'>Aucun</option>";
 
    }
 
?>

**********************************************************
PAGE ajaxResultat.php
**********************************************************

Code:

1
2
3
4
5
6
7
8
9
10
<?php
	if(isset($_POST['idProduit'])&& $_POST['idProduit'] != '-1' ){
 
			echo ($_POST['idProduit']);
 
	} else {
 
			echo "Rien recu";}
 
?>

16/12/2011, 15h47
lenono
Bonjour,

en début de page ajaxProduit, tu peux ajouter :
Code:

1 2 3 foreach ($_POST as $cle=>$valeur){ echo $$cle_affiche=$valeur; }
et reporter ce que cela donne STP.
17/12/2011, 23h06
daidou555

Salut

merci de ta reponse mais j'ai tardé car j avais pas eu le temps de tester avant.

L'insetion de ton code dans la page ajaxProduit.php fonctionne mais juste avant le resultat ça affiche :

Notice: Undefined variable: cle_affiche in C:\Program Files\EasyPHP-5.3.3\www\propo\ajaxProduit.php on line 3 et ici le resultat.

Mais lorsque je mets le meme code en début de la page ajaxResultat.php, aucun résultat ne s'affiche et c'est bien là mon problème depuis le début !

J'ai l'impression que, comme la troisième liste déroulante est entièrement affichée en php, alors la fonction onchange ne fonctionne pas. Qu'en penses-tu ?????
18/12/2011, 09h42
andry.aime

Bonjour,

Citation:

Envoyé par lenono

echo $$cle_affiche=$valeur;

ça ne doit pas être

Code:

echo $cle_affiche=$valeur;

?

A+.
18/12/2011, 10h21
daidou555

Merci bcp de ton aide.

Oui c'est ça. j'avais même pas vu. Il n'y a plus de message d'erreur.

Mais mon problème est bien sur la dernière liste deroulante : la liste produit qui est générée par la page ajaxProduit.php. Cette liste est bien générée et fonctionne bien mais ce que je n'arive pas c'est récupérer la valeur de cette liste.

En fait, j'ai essayé de renvoyer toutes mes variables vers une autre page php avec un bouton submit et en faisant un echo de toutes les variables, et là super tout s'affiche. Donc cela signifie que la variable produit de la dernière liste déroulante est bien transmise.

Mais ce que je veux faire c'est récupérer la variable avec javascript sans valider le formulaire et sans recharger la page, dans le but d'afficher un div différent en fonction du produit choisi dans la liste produit.

merci d'avance de votre aide

Re,

ça affiche quoi l'echo?
Essaie avec

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function change(){
	var xhr = getXhr();
	xhr.onreadystatechange = function(){
	if(xhr.readyState == 4)
		if(xhr.status == 200 && xhr.status == 0){
			alert(xhr.responseText);
			document.getElementById('resultproduit').innerHTML = xhr.responseText;
		}else{
			alert(xhr.status);
		}
	}
	xhr.open("POST","ajaxProduit.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	idtype = document.getElementById('type').options[document.getElementById('type').selectedIndex].value;
	idmarque = document.getElementById('marque').options[document.getElementById('marque').selectedIndex].value;
	alert("idType="+idtype+"&idMarque="+idmarque);
	xhr.send("idType="+idtype+"&idMarque="+idmarque);
}

Montre nous le code HTML généré de ton code.

A+.

Je pense que c'est dans mon code javascript qu'il y a un probleme

Qu'en pensez vous ?????????????????

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
	 <!-- script listes deroulantes dynamiques -->
			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 change(){
 
				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){
						document.getElementById('resultproduit').innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxProduit.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
				idtype = document.getElementById('type').options[document.getElementById('type').selectedIndex].value;
				idmarque = document.getElementById('marque').options[document.getElementById('marque').selectedIndex].value;
				xhr.send("idType="+idtype+"&idMarque="+idmarque);
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function result(){
 
				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){
						document.getElementById('resultat').innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxResultat.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
				idproduit = document.getElementById('produit').options[document.getElementById('produit').selectedIndex].value;
				xhr.send("idProduit="+idproduit);
			}

18/12/2011, 11h03
andry.aime

Ton code js à l'air correcte mais teste le code que j'ai proposé et qu"est ce qu'affiche l'echo? Montre nous le code html généré par ton php.
18/12/2011, 12h42
daidou555

ça y est j'ai trouvé mon erreur !

première ligne de la page ajaxProduit.php :

Code:

echo "<select name='produit' onchange='result()' >";

j'y avait tout simplement oublié id='produit'. voici donc le code modifié qui fonctionne parfaitement :

Code:

echo "<select name='produit' id='produit' onchange='result()' >";

Merci pour votre aide
20/12/2011, 17h09
lenono

Citation:

Envoyé par andry.aime

Bonjour,

ça ne doit pas être

Code:

echo $cle_affiche=$valeur;

?

A+.

Bonjour andry.aime,

non non, c'est juste pour afficher la liste des variables avec leurs valeurs respectives.
A l'affichage ça donne un :
$a=1
$b=un
$c=toto
si on rajoute un <br> bien sûr.

Bonne soirée.