Discussion :

[jason69]

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 :

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>

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
 
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 :

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>";
?>

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
 
<?
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.

[jason69]

Personne ne peut m'aider sur ce problème??

J'ai effectué des recherches sur le forum mais je n'ai pas trouvé de solutions pour ce problème (deux listes aucun problèmes, mais trois...)...

[jason69]

J'ai avancé un peu et j'ai remarqué d'où pouvait venir l'erreur...

Voila, en fait la deuxième liste se remplit dynamiquement.
Mais j'ai l'impression que lorsqu'on fait un choix dans cette liste (alors que celle-ci vient d'être remplit), le selectedIndex est à null.

Quelqu'un voit de quoi cela peut venir?

Merci d'avance.