[AJAX] Mettre à jour la 3e liste déroulante en même temps que la 2e

Mettre à jour la 3e liste déroulante en même temps que la 2e [AJAX] - HTML/CSS - Programmation

Marsh Posté le 21-11-2008 à 11:54:47    

Bonjour tout le monde,
 
J'ai lié trois listes déroulantes avec ajax.
 
La première liste déroulante contient par exemple :
 
BA1
BA2
BA3
 
Quand je choisis BA2, les cours de BA2 apparaissent dans la 2e liste déroulante par contre, la 3e liste déroulante avec les types ne bouge pas.
 
J'aimerais juste que la 3e liste déroulante se mette à jour en même temps que la 2e.
 
Sauriez-vous me dire qu'est-ce que je dois modifier dans mon code pour y arriver ?
 
Voici le code de la première liste déroulante, celle-ci n'est PAS alimentée via AJAX :
 

Code :
  1. <?php
  2. //include('connexion.php');
  3. $res = "SELECT * FROM cours WHERE MNEMONIC IN (SELECT MNEMONIC FROM enseigner WHERE MATRICULE_PROF = '" . $_SESSION['Matricule'] . "')";
  4. $query = mysql_query($res);
  5. $nbrow = mysql_num_rows($query);
  6. echo($nbrow);
  7. ?>
  9. <form>
  10.  <select name='annee' id='annee' onChange='javascript:go(this.value)'>
  11.   <option value='-1'> (1) Choisissez une année </option>
  12.    <?php
  13.     while($row = mysql_fetch_assoc($query))
  14.     {
  15.      echo "<option value='".$row["NOM_ANNEE"]."'>".$row["NOM_ANNEE"]."</option>";
  16.     }
  17.    ?>
  18.  </select>
  21. </form>
  23. <!-- appel du code AJAX pour compléter la liste déroulante suivante -->
  25. <script language="javascript" src="Scripts/Ajax_Listes_Deroulantes_Generiques.js"></script>

 
 
La seconde liste déroulante est elle alimentée en AJAX :
 

Code :
  1. function getXhr()
  2. {
  3.  var xhr = null;
  4.  if(window.XMLHttpRequest) // Firefox et autres
  5.   xhr = new XMLHttpRequest();
  6.  else if(window.ActiveXObject)
  7.  { // Internet Explorer  
  8.   try
  9.   {
  10.    xhr = new ActiveXObject("Msxml2.XMLHTTP" );
  11.   }
  13.   catch (e)
  14.   {
  15.    xhr = new ActiveXObject("Microsoft.XMLHTTP" );
  16.   }
  17.  }
  18.  else
  19.  {  // XMLHttpRequest non supporté par le navigateur  
  20.   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..." );
  21.   xhr = false;
  22.  }
  23.  return xhr;
  24. }
  25.  // ... et ici il n'y a aucune valeur qui change pour le générique
  27. /**
  28. * Méthode qui sera appelée sur le changement de la liste déroulante annees
  29. */
  30. function go(annee)
  31. {
  32.  //alert(annee);
  33.  var xhr = getXhr();
  34.  //alert(xhr);
  35.  // On défini ce qu'on va faire quand on aura la réponse
  36.  xhr.onreadystatechange = function()
  37.  {
  38.   // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
  39.   //alert(xhr.readyState);
  40.   if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0 ) )
  41.   {
  42.    //alert('cool'); //cette alerte me permet de savoir qu'on arrive au moins à cet endroit du code
  43.    //alert(xhr.status);
  45.    //******  Je ne comprends pas comment le contenu de leselect est connu à cet endroit alors que xhr.open("POST","Scripts/ajaxLivre.php",true); se trouve                          plus bas  
  46.    //*******
  47.    
  48.    
  49.    leselect = xhr.responseText;
  50.    //alert('xhr.responseText vaut '+xhr.responseText);
  52.    
  53.    //alert(xhr.responseText);
  54.    //      alert(leselect);
  55.    // On se sert de innerHTML pour rajouter les options a la liste
  56.    document.getElementById('select_Nom_mnemonics').innerHTML = leselect; //ici, le nom du select devrait être générique !!!!
  57.    //alert(leselect);
  58.   }
  59.  }
  60.  
  61.  // Ici on va voir comment faire du post
  62.  xhr.open("POST","Scripts/ajaxLivre.php",true); //ici, on devrait rend ajaxLivre générique !!!!
  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.  xhr.send("NOM_ANNEE="+annee); //ici, NOM_ANNEE et annee devraient être génériques !!!!    
  68. }


 
et via cette requête :
 

Code :
  1. <?php
  2. session_start();
  3. //print_r($_POST);
  4. if(isset($_POST["NOM_ANNEE"]))
  5. {
  7.  mysql_connect("localhost","root","mdp" );
  8.  mysql_select_db("deliberations" );
  9.  $res = mysql_query("SELECT MNEMONIC FROM cours WHERE NOM_ANNEE = '" . $_POST['NOM_ANNEE'] . "' AND MATRICULE_PROF = '" . $_SESSION['Matricule'] . "'" );
  10.  //echo("SELECT MNEMONIC FROM cours WHERE NOM_ANNEE = '" . $_POST['select_Nom_annees'] . "' AND MATRICULE_PROF = '" . $_SESSION['Matricule'] . "'" );
  12.  while($row = mysql_fetch_assoc($res))
  13.  {
  14.   echo "<option value='".$row["MNEMONIC"]."'>".$row["MNEMONIC"]."</option>";
  15.  }
  16. }
  17. ?>


 
Par contre, comme je l'ai dis plus haut, la 3e ne bouge pas :
 

Code :
  1. function getXhr2()
  2. {
  3.  //alert('salut');
  4.  var xhr2 = null;
  5.  if(window.XMLHttpRequest) // Firefox et autres
  6.   xhr2 = new XMLHttpRequest();
  7.  else if(window.ActiveXObject)
  8.  { // Internet Explorer  
  9.   try
  10.   {
  11.    xhr2 = new ActiveXObject("Msxml2.XMLHTTP" );
  12.   }
  14.   catch (e)
  15.   {
  16.    xhr2 = new ActiveXObject("Microsoft.XMLHTTP" );
  17.   }
  18.  }
  19.  else
  20.  {  // XMLHttpRequest non supporté par le navigateur  
  21.   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..." );
  22.   xhr2 = false;
  23.  }
  24. //  alert('ici '+xhr2);
  25.  return xhr2;
  26. }
  28. /**
  29. * Méthode qui sera appelée sur le changement de la liste déroulante annees
  30. */
  31. function fnctcours(cours)
  32. {
  33.  //alert(cours);
  34.  var xhr2 = getXhr2();
  35. // alert(xhr2);
  36.  // On défini ce qu'on va faire quand on aura la réponse
  37.  xhr2.onreadystatechange = function()
  38.  {
  39.   // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
  40.   //alert(xhr2.readyState);
  41.   //alert(xhr2.status);
  42.   if(xhr2.readyState == 4 && (xhr2.status == 200 || xhr2.status == 0 ) )
  43.   {
  44.    //alert('cool'); //cette alerte me permet de savoir qu'on arrive au moins à cet endroit du code
  45.    //alert(xhr2.status);
  47.    //******  Je ne comprends pas comment le contenu de leselect2 est connu à cet endroit alors que xhr2.open("POST","Scripts/ajaxLivre.php",true); se trouve                          plus bas  
  48.    //*******
  49.    
  50.    
  51.    leselect2 = xhr2.responseText;
  53.    
  54.    //alert('xhr2.responseText vaut '+xhr2.responseText);
  55.    //      alert(leselect2);
  56.    // On se sert de innerHTML pour rajouter les options a la liste
  57.    document.getElementById('select_Nom_types').innerHTML = leselect2; //ici, le nom du select devrait être générique !!!!
  58.    //alert(leselect2);
  59.   }
  60.  }
  61.  
  62.  // Ici on va voir comment faire du post
  63.  xhr2.open("POST","Scripts/ajaxTypes.php",true); //ici, on devrait rend ajaxLivre générique !!!!
  64.  // ne pas oublier ça pour le post
  65.  xhr2.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  66.  // ne pas oublier de poster les arguments
  67.  // ici, l'id de l'auteur
  68.  xhr2.send("MNEMONIC="+cours); //ici, NOM_ANNEE et annee devraient être génériques !!!!    
  69. }


 

Code :
  1. <?php
  2. session_start();
  3. //print_r($_POST);
  4. if(isset($_POST["MNEMONIC"]))
  5. {
  6.  //echo($_POST["MNEMONIC"]);
  7.  mysql_connect("localhost","root","mdp" );
  8.  mysql_select_db("deliberations" );
  9.  $res = mysql_query("SELECT Type_de_Cours FROM est_de_type WHERE Mnemonic = '" . $_POST["MNEMONIC"] . "'" );
  10.  //echo("SELECT Type_de_Cours FROM est_de_type WHERE Mnemonic = '" . $_POST["MNEMONIC"] . "'" );
  11.  $nombre = mysql_num_rows($res);
  12.  //echo($nombre);
  15.  while($row = mysql_fetch_assoc($res))
  16.  {
  17.   echo "<option value='".$row["Type_de_Cours"]."'>".$row["Type_de_Cours"]."</option>";
  18.  }
  19. }
  20. ?>


 
Elle se modifie si je choisi une autre valeur dans la liste déroulante 2 mais le problème est que quand je n'ai qu'une valeur dans la liste déroulante 2, la liste déroulante 3 ne se met pas à jour, il met impossible de mettre à jour la liste de sélection 3 vue que je ne sais pas faire de changement dans la liste de sélection 2 (il n'y a qu'une seule valeur) et donc pas d'enclenchement de l'évènement "onChange" et donc pas de code AJAX.
 
Un tout grand merci d'avance pour l'aide.
 
beegees

Reply

Marsh Posté le 21-11-2008 à 11:54:47   

Reply

Sujets relatifs:

Leave a Replay

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