[AJAX] Listes liées en AJAX

**Vinestro** · 03/08/2011, 14h24

Bonjour à tous amis développeurs !

Après des heures et des heures de recherche, et étant débutant en AJAX, je me retrouve dans une situation on ne peut plus bloquée.
Voici mon soucis:

Je souhaite construire, une deux listes liées.
Dans mon premier select, je vais pouvoir sélectionner une promotion.
A partir de cette sélection, un script va se déclencher afin de construire une deuxième comboBox contenant les étudiants de la promotion sélectionnée précédemment.

Voici le code que j'ai:

Le Javascript et l'AJAX:

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
 
function getXhr() {
	  var xhr = null;
	  if(window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	  }
	  else if(window.ActiveXObject) { // Internet Explorer
		try {
		      xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
		      xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	  }
	  else {
		alert("Votre navigateur ne supporte pas les objets XMLHttpRequest...");
		xhr = false;
	  }
	  return xhr;
    }
 
    function chargeEtudiantPourPromoSelectionne() {
	  var xhr = getXhr();
	  xhr.onreadystatechange = function() {
		if(xhr.readyState == 4 && xhr.status == 200) {
		      leselect = xhr.responseText;
		      document.getElementById('etudiants').innerHTML = leselect;
		}
	  }
 
	  xhr.open("POST", "choix_promo.php", true);
	  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	  sel = document.getElementById('promotion');
	  idPromotion = sel.options[sel.selectedIndex].value;
 
          // Le problème est ici !!!
	  alert(idPromotion);
	  xhr.send("idPromotion="+idPromotion);
    }

le fichier choix_promo.php que j'appelle dans mon script ci-dessus:

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
 
<?php
      include './includes/Connexion.php';
      
      echo "<select id='etudiants' name='etudiants' style='width: 100%; font-size: 11px; font-family: Verdana'>";
      if(isset ($_POST["idPromotion"])) {
            $requete = Connexion::requete("SELECT * FROM etudiant WHERE id_promotion = '".$_POST['idPromotion']."' ORDER BY nom_etudiant");
            
            while($row = mysql_fetch_assoc($requete)) {
                  echo "<option value='".$row['id_booster']."'>".$row['nom_etudiant']." ".$row['prenom_etudiant']."</option>";
            }
      }
      
      echo "</select>";
?>

Et enfin, mon fichier HTML contenant le select pour les promotions et celui pour les étudiants:

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
 
<tr>
                    <td class="texteCommun">* Promotion</td>                                    
                    <td>
                        <select id="promotion" name="promotion" onchange="chargeEtudiantPourPromoSelectionne()" style="width: 100%; font-size: 11px; font-family: Verdana">
                            <option value="-1"></option>
                            <option value="1">Classe 1</option>
                            <option value="2">Classe 2</option>
                            <option value="3">Classe 3</option>
                        </select>
                    </td>
                </tr>			
                <tr>
                    <td class="texteCommun">* Etudiants</td>
                    <td>
			  <select id="etudiants" name="etudiants" style="width: 100%; font-size: 11px; font-family: Verdana">
				<option value="-1"></option>
			  </select>
                    </td>
                </tr>

Le problème est en fait, que lorsque je reçois mon

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(idPromotion)

il me donne -1 comme valeur... En gros, mon

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

sel.options[sel.selectedIndex].value

ne fonctionne pas et ne va pas récupérer les valeurs de mes options dans le select promotion.

Est-ce que quelqu'un a une idée ? J'espère que vous allez pouvoir m'aider je désespère

A noté, j'ai testé sous Safari et Mozilla, j'ai la même erreur...

Merci d'avance !!

**Bovino** · 03/08/2011, 14h34

Tu n'aurais pas mis la balise form dans la balise table par hasard...

**Vinestro** · 03/08/2011, 14h41

Non, par contre j'ai un fichier administration.php qui contient une balise <form> et dans cette balise <form>, je fait un include du fichier que j'ai posté juste au dessus.

Mais comment sait le script dans quel form il doit aller taper ?

**Bovino** · 03/08/2011, 14h52

Ben justement, il en sait rien

Il ne faut pas mettre de formulaire dans un autre formulaire !

**Vinestro** · 03/08/2011, 15h03

D'accord, mais justement là je n'ai qu'un seul formulaire, mais ça ne fonctionne pas toujours pas...

J'ai un formulaire, à l'intérieur je fais un include de ma page avec les selects, etc (dans celle-ci y'a pas de formulaire). Donc au final j'ai bien qu'un seul formulaire.

**andry.aime** · 03/08/2011, 15h05

Bosnoir,

Peux-tu nous montrer ton code actuel ?

A+.

**Vinestro** · 03/08/2011, 15h13

Le code actuel c'est celui que j'ai posté dans mon premier post.
Magré tout, je vais reposter une autre partie afin que vous compreniez bien mon architecture:

J'ai ce fichier:

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
 
<form id="administration" name="administration" action="administration.php" method="POST" enctype="multipart/form-data">
    <div class="main">
        <div id="header">
            <img id="logo" src="./images/logo.png" alt="logo"/>
            <h1 id="sedm">Titre</h1>
        </div>
        <br><br>
        <div id="onglet">
            <ul>
		<li><a href="#onglet-1">Etudiants</a></li>
		<li><a href="#onglet-2">Groupes</a></li>
		<li><a href="#onglet-3">Autres</a></li>
            </ul>
            <div id="onglet-1">
                <?php include 'administration_etudiant.php'; ?>
            </div>
            <div id="onglet-2">
		<?php include 'administration_groupe.php'; ?>
            </div>
            <div id="onglet-3">
            </div>
        </div>
    </div>
    <input type="hidden" id="evenement" name="evenement" value="" value=""/>
</form>

Et le code que j'ai mis dans mon premier post, correspond à la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php include 'administration_groupe.php' ?>

Dans ce fichier administration_groupe.php, on trouve le script et le HTML de mon premier post

**andry.aime** · 03/08/2011, 15h17

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

Dans ton code, c'est un select étudiants, c'est le td que tu dois faire un innerHTML ou mettre un div dans ton td.
Sinon, fait pour voir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(leselect);

A+.

**Bovino** · 03/08/2011, 15h18

Ben dans ce cas, ça veut dire que tu as pas de balise table ?

Est-ce que tu pourrais nous montrer le code HTML généré de ta page ?

**Vinestro** · 03/08/2011, 15h37

Donc après un:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(leselect);

J'obtiens:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<select id='etudiants' name='etudiants' style='width: 100%; font-size: 11px; font-family: Verdana'></select>

Donc effectivement, il n'y a rien dans mon select, logique, puisque idPromotion me renvoie -1... J'ai aucune promotion ayant -1 comme ID

Sinon j'ai bien une balise table, voici le code HTML généré:

Code html :

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
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
 
 <table class="tableau" width="100%" border="0" style="background-color:#fcfdfd;">
        <tr height="17px">
            <td width="25%" class="tableau_section_gauche">&nbsp;&nbsp;Gestion des groupes</td>
            <td width="50%" class="tableau_section"><span id="messageGestionGroupe"></span></td>
            <td width="25%" class="tableau_section_droite">&nbsp;</td>
        </tr>
        <tr height="10px"><td colspan="3">&nbsp;</td></tr>
    </table>   
 
    <!-- Tableau d'ajout de groupe -->
 
    <table id="tableauGestionGroupe" class="tableau" width="100%" border="0" style="background-color:#fcfdfd;">
    <tr>	
        <td width="50%" align="left" valign="top">
            <table class="tableau" width="100%" border="0">
                <tr>
                    <td width="25%" class="tableau_section_gauche2"></td>
                    <td width="50%" class="tableau_section" style="text-align: center">Ajout d'un groupe</td>
                    <td width="25%" class="tableau_section_droite2"></td>
                </tr>
            </table>
            <table class="tableau" width="100%" border="1" style="background-color:#fcfdfd;">
                <tr>
                    <td width="25%" class="texteCommun">* Libelle Groupe</td>
                    <td>
                        <input type="text" id="libelleGroupe" name="libelleGroupe" value="" style="font-size: 11px; font-family: Verdana"/>
                    </td>
                </tr>
                <tr>
                    <td class="texteCommun">* Type de groupe</td>
                    <td>
                        <select id="typeGroupe" name="typeGroupe" style="width: 100%; font-size: 11px; font-family: Verdana">
                            <option value="-1"></option>
                                                        <option value="1">Bachelor</option>
                                                        <option value="2">Master</option>
                                                    </select>
                    </td>
                </tr>
                <tr>
                    <td class="texteCommun">* Promotion</td>                                    
                    <td>
                        <select id="promotion" name="promotion" onchange="chargeEtudiantPourPromoSelectionne()" style="width: 100%; font-size: 11px; font-family: Verdana">
                            <option value="-1"></option>
                                                        <option value="1">Classe 1</option>
                                                        <option value="2">Classe 2</option>
                                                        <option value="3">Classe 3</option>
                                                        <option value="4">Classe 4</option>
                                                    </select>
                    </td>
                </tr>			
                <tr>
                    <td class="texteCommun">* Etudiants</td>
                    <td>
			  <select id="etudiants" name="etudiants" style="width: 100%; font-size: 11px; font-family: Verdana">
				<option value="-1"></option>
			  </select>
                    </td>
                </tr>
                <tr>
                    <td class="texteCommun">* Adresse mail</td>
                    <td>
                        <input type="text" id="mail" name="mail" value="" style="font-size: 11px; font-family: Verdana"/>
                    </td>
                </tr>
                <tr>
                    <td class="texteCommun">* Photo</td>
                    <td>
                        <input type="hidden" name="MAX_FILE_SIZE" value="300000" />
                        <input type="file" name="photo" id="photo" size="60%"/>
                    </td>
                </tr>
            </table>
            <table width="100%" class="tableau" border="0" style="background-color:#fcfdfd;">
                <tr height="10px"></tr>
                <tr>
                    <td width="50%" align="left">
                        <button id="enregistrerEtudiant" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary">
                            <span class="ui-button-icon-primary ui-icon ui-icon-circle-check"></span>
                            <span class="ui-button-text">&nbsp;&nbsp;Valider l'ajout</span>
                        </button>
                    </td>
                    <td width="50%" align="right" id="messageAjoutEtudiant"></td>
                </tr>
            </table>
        </td>
        <td>&nbsp;</td>
 
        <!-- Modification d'un groupe -->
 
        <td width="50%" align="left" valign="top">
            <table class="tableau" width="100%" border="0">
                <tr>
                    <td width="25%" class="tableau_section_gauche2"></td>
                    <td width="50%" class="tableau_section" style="text-align: center">Modifier un &eacute;tudiant</td>
                    <td width="25%" class="tableau_section_droite2"></td>
                </tr>
            </table>
            <table class="tableau" width="100%" border="1" style="background-color:#fcfdfd;">
                <tr>
                    <td width="25%" class="texteCommun">Etudiant : </td>
                    <td>
                        <select id="etudiant" name="etudiant" style="width: 100%; font-size: 11px; font-family: Verdana" onchange="chargerInformationsEtudiant()">
                            <option value="-1"></option>
                                                        <option value="3" >Etudiant 1</option>
                                                        <option value="2" >Etudiant 2</option>
                                                        <option value="4" >Etudiant 3</option>
                                                        <option value="1" >Etudiant 4</option>
                                                    </select>
                    </td>
                </tr>
                <tr>
                    <td class="texteCommun">* ID Booster</td>
                    <td>
                        <input type="text" id="updateIdBooster" name="updateIdBooster" readonly="true" value="" style="font-size: 11px; font-family: Verdana"/>
                    </td>
                </tr>
                <tr>
                    <td class="texteCommun">* Promotion</td>
                    <td>
                                                    <select id="updatePromotion" name="updatePromotion" style="width: 100%; font-size: 11px; font-family: Verdana">
                                <option value="-1"></option>
                                                                <option value="1" >Classe 1</option>
                                                                <option value="2" >Classe 2</option>
                                                                <option value="3" >Classe 3</option>
                                                                <option value="4" >Classe 4</option>
                                                            </select>
                                            </td>
                </tr>	
                <tr>
                    <td class="texteCommun">* Nom</td>                                    
                    <td>
                        <input type="text" id="updateNom" name="updateNom" value=" " style="font-size: 11px; font-family: Verdana"/>
                    </td>
                </tr>			
                <tr>
                    <td class="texteCommun">* Pr&eacute;nom</td>
                    <td>
                        <input type="text" id="updatePrenom" name="updatePrenom" value="" style="font-size: 11px; font-family: Verdana"/>
                    </td>
                </tr>
                <tr>
                    <td class="texteCommun">* Adresse mail</td>
                    <td>
                        <input type="text" id="updateMail" name="updateMail" readonly="true" value="" style="font-size: 11px; font-family: Verdana"/>
                    </td>
                </tr>
                <tr>
                    <td class="texteCommun">* Photo</td>
                    <td>
                        <input type="hidden" name="MAX_FILE_SIZE" value="300000" />
                        <input type="file" name="updatePhoto" id="updatePhoto" size="60%"/>
                    </td>
                </tr>
            </table>
            <table width="100%" class="tableau" border="0" style="background-color:#fcfdfd;">
                <tr height="10px"></tr>
                <tr>
                    <td width="50%" align="left">
                        <button id="modifierEtudiant" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary">
                            <span class="ui-button-icon-primary ui-icon ui-icon-circle-check"></span>
                            <span class="ui-button-text">&nbsp;&nbsp;Valider la modification</span>
                        </button>
                    </td>
                    <td width="50%" align="right" id="messageModificationEtudiant"></td>
                </tr>
            </table>
            <table width="100%" class="tableau" border="0" style="background-color:#fcfdfd;">
                <tr>
                    <td align="center">
                                                        <img  alt="" width="125px" height="147px" src="images/photo_etudiants/"/>
                                            </td>
                </tr>
            </table>
           </table>
        </td>
        <td>&nbsp;</td>
    </tr>
</table>

**andry.aime** · 03/08/2011, 15h44

Envoyé par andry.aime

c'est le td que tu dois faire un innerHTML ou mettre un div dans ton td.

**Vinestro** · 03/08/2011, 15h51

Non je viens d'essayer en mettant le innerHTML au td puis de créer une div dans le td mais ça ne fonctionne pas.

Je pensais plutôt que l'erreur était lors de la récupération des value dans les options du select promotion non ? Car en faisant un alert sur idPromotion j'ai -1 peu importe la promotion que je sélectionne...

**Bovino** · 03/08/2011, 15h58

L'id promotion est unique dans ta page ?

**andry.aime** · 03/08/2011, 16h01

Tu n'as pas d'autre élément avec "id="promotion" dans ta page ?

**Vinestro** · 03/08/2011, 16h04

J'ai trouvé !!

Par contre, euh... vous tapez pas ?

En fait je travaille avec jQuery UI, et j'ai fait un système d'onglets.
J'ai deux onglets qui se ressemblent: Etudiant et Groupes.
Bien évidemment, dans les deux onglets, j'ai des select pour avoir la promotion avec l'ID... 'promotion' !!
Il savait pas dans lequel taper, j'ai renommer promotion en promotionGroupe, ça passe tout seul !

Vous aviez donc raison sur vos deux derniers posts

En tout cas je vous remercie beaucoup d'avoir pris de votre temps pour me répondre !

A bientôt et encore merci !

[AJAX] Listes liées en AJAX

AJAX

Discussions similaires

Partager

Partager