[AJAX] Trois listes liées
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 :
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
|
<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> |
Mes listes dans le formulaire :
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
|
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>
"; |
Et les fichiers appelés au changement des listes :
ListeCodePostal.php :
Code:
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>";
?> |
ListeCommune.php :
Code:
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>";
?> |
Les fonctions permettant de récupérer les communes et les codes postaux marchent très bien (testés et re-testés).
Est-ce que vous avez une idée du problème?
Merci d'avance.
