Salut à tous,
Voila, j'ai voulu mettre en place des listes liées dont voici le fonctionnement :
- Je choisis un département dans la première liste et ça me met à jour la liste des code postaux de ce département.
- Je choisis un code postal et ça me met à jour la liste des communes de ce code postal.
J'arrive très bien à lier deux listes entre elles mais quand je veux lier la troisième (liste des communes) c'est là que ça pose problème : il ne se passe rien...
Voici mon code (fait grâce au tutorial http://siddh.developpez.com/articles/ajax/#LIV-A )
Voici le code javascript :
Mes listes dans le formulaire :
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
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 <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; } // Mise à jour des listes via XMLHttpRequest function listeCodePostal() { 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('codePostal').innerHTML = leselect; } } // Ici on va voir comment faire du post xhr.open("POST","AJAX/ListeCodePostal.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 sel = document.getElementById('departement'); idDepartement = sel.options[sel.selectedIndex].value; xhr.send("idDepartement=" + idDepartement); } // Mise à jour des listes via XMLHttpRequest function listeCommune() { 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('comm').innerHTML = leselect; } } // Ici on va voir comment faire du post xhr.open("POST","AJAX/ListeCommune.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 sel = document.getElementById('codePostal'); CodePostal = sel.options[sel.selectedIndex].value; xhr.send("CodePost=" + CodePostal); } </script>
Et les fichiers appelés au changement des listes :
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
39
40
41
42 echo " <h3>Département : $champObligatoire</h3> <select name='idDepartement' id='departement' class='inputInscription' onchange='listeCodePostal()'> <option value='0'>Choisir un département</option>"; // Récuperation de tous les départements dans la table : $tabDepartement = $c->getAllDepartement(); if (count($tabDepartement) > 0) { for ($i=0; $i<count($tabDepartement); $i++) { $communeSalle = $salleConcert->getCommune(); $codePostalSalle = $communeSalle->getCodePostal(); $departementSalle = $codePostalSalle->getDepartement(); $idDepartementSalle = $departementSalle->getIdDepartement(); $numeroDepartement = $tabDepartement[$i]->getNumeroDepartement(); ($numeroDepartement < 10) ? $numeroDepartement = "0".$numeroDepartement : $numeroDepartement .= ""; $libDepart = $numeroDepartement." -- ".$tabDepartement[$i]->getLibelleDepartement(); echo " <option value='".$tabDepartement[$i]->getIdDepartement()."' $selected>$libDepart</option>"; } } echo " </select> <h3>Code postal : $champObligatoire</h3> <div id='codePostal' style='display:inline'> <select name='cp' class='inputInscription' onchange='listeCommune()'> <option value='0'>Choisir un code postal</option> </select> </div> <h3>Commune : $champObligatoire</h3> <div id='comm' style='display:inline'> <select name='commune' class='inputInscription'> <option value='0'>Choisir une commune</option> </select> </div> ";
ListeCodePostal.php :
ListeCommune.php :
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 <? include_once ("../inclusion.php"); echo "<select name='cp' class='inputInscription' onchange='listeCommune()'>"; if(isset($_POST["idDepartement"])){ $idDepartement = $_POST["idDepartement"]; $tabCodePostal = $c->getAllCodePostalByDepartement($idDepartement); for ($i=0; $i<count($tabCodePostal); $i++) { ($tabCodePostal[$i]->getLibelleCodePostal() < 10000) ? $cp = "0".$tabCodePostal[$i]->getLibelleCodePostal() : $cp = $tabCodePostal[$i]->getLibelleCodePostal(); echo "<option value='".$tabCodePostal[$i]->getLibelleCodePostal()."'>".$cp."</option>"; } } echo "</select>"; ?>
Les fonctions permettant de récupérer les communes et les codes postaux marchent très bien (testés et re-testés).
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <? include_once ("../inclusion.php"); echo "<select name='commune' class='inputInscription'>"; if(isset($_POST["CodePost"])){ $codePostal = $_POST["CodePost"]; $tabCommunes = $c->getAllCodeCommuneByCodePostal($codePostal); for ($i=0; $i<count($tabCommunes); $i++) { echo "<option value='".$tabCommunes[$i]->getIdCommune()."'>".$tabCommunes[$i]->getLibelleCommune()."</option>"; } } echo "</select>"; ?>
Est-ce que vous avez une idée du problème?
Merci d'avance.
Partager