Ajax: Interactivité entre listes déroulantes

shazdo Messages postés 17 Statut Membre -  
shazdo Messages postés 17 Statut Membre -
Bonjour à vous tous!
J'ai un problème qui ne me semble pas avoir été posé.
J'ai bien suivi le tuto de "siddh", et j'arrive à manier à peu près l'objet XMLHTTPrequest.
Cependant, j'aimerai ajouter une fonctionnalité, à savoir, rendre mes listes inter-dynamiques. Je m'explique: quand on choisi un "livre", la liste des "titres" apparait. Ok. J'ai ajouté le code nécessaire de manière à ce que l'inverse fonctionne aussi. Jusqu'ici tout va bien.

Mon problème est qu'une fois qu'un objet HTTPrequest est initialisé, l'autre semble impossible à démarrer, et ce, dans n'importe quel sens. 8O

J'ai volontairement mis une ligne "choisissez votre ...." (value=-1) en début de toutes les listes, afin de pouvoir revenir à l'état initial de chargement, et pourvoir choisir dans l'autre sens. (enfin, c'est dans le code)

Le code javascript est quasiment identique à celui de "siddh".
Le code PHP est très simple, et le formulaire tout autant.

Formulaire: [CODE]
<?php
  mysql_query("SET NAMES UTF8");
  echo "<form><fieldset style='width: 500px'><legend>Liste liées</legend>";
  echo "<label>Auteurs  </label>";
  
  echo "<div name='divAuteur' id='divAuteur' style='display:inline'>";
  echo "<select name='auteur' id='auteur' onchange='goAuteur()' class='dyn'>";
  
    echo "<option value='-1' SELECTED>Choissir un auteur</option>";  			
    $sql = mysql_query("SELECT * FROM auteur ORDER BY nom");
    while($row = mysql_fetch_assoc($sql))
    { echo "<option value='".$row["id"]."'>".$row["nom"]."</option>"; }
  
  echo "</select>  </div>";
  
  echo "<label>  Livres  </label>";
  echo "<div name='divLivre' id='divLivre' style='display:inline'>";
  echo "<select name='livre' id='livre' onchange='goLivre()' class='dyn'>";
  
    echo "<option value='-1' SELECTED>Choisir un titre</option>";
    $sql = mysql_query("SELECT * FROM livre ORDER BY titre");
    while($row = mysql_fetch_assoc($sql))
    { echo "<option value='".$row["idAuteur"]."'>".$row["titre"]."</option>"; }	
  
  echo "</select></div>";
  
  echo "</fieldset></form>";
?>
/CODE

Ajax.php: [CODE]
<?php
include('../lib/connect.php');
mysql_query("SET NAMES UTF8");

if (isset($_POST["idAuteur"]))
{
  echo "<select name='livre' class='dyn' onClick='goLivre()>";
  
  if ($_POST["idAuteur"]==-1)
  {
    $sql = mysql_query("SELECT * FROM livre ORDER BY titre");
    echo "<option value='-1'>Choisir un titre</option>";
  }
  
  else { $sql = mysql_query("SELECT * FROM livre 
  WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre"); }
  
  echo "<option value='-1'>Choisir un titre</option>";
  $i=0; // pour savoir si un auteur à été sélectionné
  while($row = mysql_fetch_assoc($sql))
  {
    echo "<option value='".$row["idAuteur"]."'>".$row["titre"]."</option>";
    $i++;
  }
  if ($i==0) { echo" <option value='-1'>Aucun résultats</option>" ;}
  echo "</select>";
}

else if (isset($_POST["idLivre"]))
{
  echo "<select name='auteur' class='dyn' onClick='goAuteur()>";
  
  if ($_POST["idLivre"]==-1)
  {
    $sql = mysql_query("SELECT * FROM auteur ORDER BY nom");
    echo "<option value='-1'>Choisir un auteur</option>";
  }
  
  else { $sql = mysql_query("SELECT * FROM auteur 
  WHERE id=".$_POST["idLivre"]." ORDER BY nom"); }
  
  echo "<option value='-1'>Choisir un titre</option>";
  $i=0; // pour savoir si un auteur à été sélectionné
  while($row = mysql_fetch_assoc($sql))
  {
    echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
    $i++;
  }
  if ($i==0) { echo" <option value='-1'>Aucun résultats</option>" ;}
  echo "</select>";
}

?>
/CODE

Javascript: [CODE]
<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;
  }
  
  /* Méthode qui sera appelée sur le click du bouton auteur */
  function goAuteur(){
    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('divLivre').innerHTML = leselect;
      }
    }
    // Ici on envoi la requete en post
    xhr.open("POST","ajax.php",true);
    // ne pas oublier le header pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // enfin, on post les arguments, ici l'id de l'auteur
    sel = document.getElementById('auteur');
    idauteur = sel.options[sel.selectedIndex].value;
    xhr.send("idAuteur="+idauteur);
  }

  /* Méthode qui sera appelée sur le click du bouton livre */
  function goLivre(){
    var xhr = getXhr();
    xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
        leselect2 = xhr.responseText;
        document.getElementById('divAuteur').innerHTML = leselect2;
      }
    }
    xhr.open("POST","ajax.php",true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    sel2 = document.getElementById('livre');
    idlivre = sel2.options[sel2.selectedIndex].value;
    xhr.send("idLivre="+idlivre);
  }				
</script>
/CODE


Je débute en Ajax, mais suis insistant, et j'ai passé pas mal de temps à trifouiller avant de venir vous embêter.

Pourriez vous m'aider?
Configuration: Windows 2000
Firefox 2.0.0.13

1 réponse

shazdo Messages postés 17 Statut Membre 1
 
Bon, j'ai réussi à me dépatouiller,
il y a avait plusieurs problèmes.

Si vous voulez voir des listes déroulantes dynamiques, allez ici http://www.monfl.fr/exemples/divers/httprequest.php.

Si vous voulez voir des exemples d'auto complétion, allez ici http://www.monfl.fr/exemples/autocompletion.php.

Si vous voulez de l'aide ou des conseils, n'hésitez pas à poster ici http://www.monfl.fr/forumDI.
Ce forum est naissant mais nous sommes présents et vous répondrons avec plaisir, dans la mesure de nos connaissances.

Bonne journée à vous tous!
0