[Ajax] 3 listes déroulantes liées

3 listes déroulantes liées [Ajax] - HTML/CSS - Programmation

Marsh Posté le 23-10-2007 à 15:37:08    

Bonjour à tous,
Sur le net j'ai trouvé un tuto pour me mettre à Ajax, et en particulier je cherche à faire 3 listes déroulantes liées.
Je suis parti de ce tuto http://siddh.developpez.com/articles/ajax/ et la construction de 2 listes liées ne pose pas de soucis.
Seulement, quand je veux passer à trois, bien évidemment ça ne marche pas :D
Pourriez vous me mettre sur la piste de ce bug ?
Merci de votre aide.
 
J'ai 3 tables : famille, genre, espece
famille : id_fam et nom_famille
genre : id_genre, src_id_fam et nom_genre
espece : id_spec, src_id_genre et nom_espece
 
Ensuite 3 fichiers :
species.php

Code :
  1. <html>
  2.     <head>
  3.         <title>test Ajax (XHTML + JavaScript + XML)</title>
  4.         <script type='text/javascript'>
  5.    
  6.             function getXhr(){
  7.                                 var xhr = null;
  8.                 if(window.XMLHttpRequest) // Firefox et autres
  9.                    xhr = new XMLHttpRequest();
  10.                 else if(window.ActiveXObject){ // Internet Explorer
  11.                    try {
  12.                             xhr = new ActiveXObject("Msxml2.XMLHTTP" );
  13.                         } catch (e) {
  14.                             xhr = new ActiveXObject("Microsoft.XMLHTTP" );
  15.                         }
  16.                 }
  17.                 else { // XMLHttpRequest non supporté par le navigateur
  18.                    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..." );
  19.                    xhr = false;
  20.                 }
  21.                                 return xhr;
  22.             }
  23.            
  24.             /**
  25.             * Méthode qui sera appelée sur le click du bouton
  26.             */
  27.             function go(){
  28.                 var xhr = getXhr();
  29.                 // On défini ce qu'on va faire quand on aura la réponse
  30.                 xhr.onreadystatechange = function(){
  31.                     // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
  32.                     if(xhr.readyState == 4 && xhr.status == 200){
  33.                         leselect = xhr.responseText;
  34.                         // On se sert de innerHTML pour rajouter les options a la liste
  35.                         document.getElementById('genre').innerHTML = leselect;
  36.                     }
  37.                 }
  39.                 // Ici on va voir comment faire du post
  40.                 xhr.open("POST","ajax.php",true);
  41.                 // ne pas oublier ça pour le post
  42.                 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  43.                 // ne pas oublier de poster les arguments
  44.                 // ici, l'id de l'auteur
  45.                 sel = document.getElementById('famille');
  46.                 id_fam = sel.options[sel.selectedIndex].value;
  47.                 xhr.send("id_fam="+id_fam);
  48.             }
  49.             function go2(){
  50.                 var xhr = getXhr2();
  51.                 // On défini ce qu'on va faire quand on aura la réponse
  52.                 xhr.onreadystatechange = function(){
  53.                     // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
  54.                     if(xhr.readyState == 4 && xhr.status == 200){
  55.                         leselect = xhr.responseText;
  56.                         // On se sert de innerHTML pour rajouter les options a la liste
  57.                         document.getElementById('genre').innerHTML = leselect;
  58.                     }
  59.                 }
  61.                 // Ici on va voir comment faire du post
  62.                 xhr.open("POST","ajax2.php",true);
  63.                 // ne pas oublier ça pour le post
  64.                 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  65.                 // ne pas oublier de poster les arguments
  66.                 // ici, l'id de l'auteur
  67.                 sel = document.getElementById('genre');
  68.                 id_genre = sel.options[sel.selectedIndex].value;
  69.                 xhr.send("id_genre="+id_genre);
  70.             }        </script>
  71.     </head>
  72.     <body>
  73.         <form>
  74.             <fieldset>
  75.                 <legend>Liste liées</legend>
  76.                 <label>Famille</label>
  77.                 <select name='famille' id='famille' onchange='go()'>
  78.                     <option value='-1'>Aucun</option>
  79.                     <?
  80.                         include ("connexion.php" );
  81.                         $res = mysql_query("SELECT * FROM famille ORDER BY nom_famille" );
  82.                         while($row = mysql_fetch_assoc($res)){
  83.                             echo "<option value='".$row["id_fam"]."'>".$row["nom_famille"]."</option>";
  84.                         }
  85.                     ?>
  86.                 </select>
  87.                 <label>Genre</label>
  88.                 <div id='genre' style='display:inline'>
  89.                 <select name='genre'>
  90.                     <option value='-1'>Choisir un genre</option>
  91.                 </select>
  92.                
  93.                 <label>Espece</label>
  94.                 <div id='espece' style='display:inline'>
  95.                 <select name='espece'>
  96.                     <option value='-1'>Choisir une espece</option>
  97.                 </select>
  98.                 </div>
  99.             </fieldset>
  100.         </form>
  101.     </body>
  102. </html>


 
ajax.php, pour la construction de la liste des genres

Code :
  1. <?php
  2.     echo "<select name='genre' id='genre' onchange='go2()'>>";
  3.     if(isset($_POST["id_fam"])){
  4.         include ("connexion.php" );
  5.         $res = mysql_query("SELECT * FROM genre
  6.             WHERE src_id_fam=".$_POST["id_fam"]." ORDER BY nom_genre" );
  7.         while($row = mysql_fetch_assoc($res)){
  8.             echo "<option value='".$row["id_genre"]."'>".$row["nom_genre"]."</option>";
  9.         }
  10.     }
  11.     echo "</select>";
  12. ?>


 
et ajax2.php, pour la construction deslistes des espèces

Code :
  1. <?php
  2.     echo "<select name='espece'>";
  3.     if(isset($_POST["id_genre"])){
  4.         include ("connexion.php" );
  5.         $res = mysql_query("SELECT * FROM espece
  6.             WHERE src_id_genre=".$_POST["id_genre"]." ORDER BY nom_espece" );
  7.         while($row = mysql_fetch_assoc($res)){
  8.             echo "<option value='".$row["id_spec"]."'>".$row["nom_espece"]."</option>";
  9.         }
  10.     }
  11.     echo "</select>";
  12. ?>


---------------
Fred 'Chandon' | http://www.inventeursfous.com | http://www.plantesgrasses.com
Reply

Marsh Posté le 23-10-2007 à 15:37:08   

Reply

Marsh Posté le 23-10-2007 à 15:40:48    

Pas de message d'erreur?

Reply

Marsh Posté le 23-10-2007 à 15:46:26    

c'est moi ou c'est le même sujet que celui-là:
http://forum.hardware.fr/hfr/Progr [...] 7179_1.htm

Reply

Marsh Posté le 23-10-2007 à 15:49:18    

Bin non : il ne se passe plus rien pour la troisième liste.
Par contre des trucs bizarres dans la deuxième liste si je m'amuse à rechanger la sélection de la première liste... :(
 
edit :
@anapajari : oui et non, ma liste liée sur 2 éléments marche bien.
Je vais lire un peu tous les liens de la page que tu indique.


Message édité par Chandon le 23-10-2007 à 15:52:12

---------------
Fred 'Chandon' | http://www.inventeursfous.com | http://www.plantesgrasses.com
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed