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.

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 : 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
 
<?php
  mysql_query("SET NAMES UTF8");
  echo "<form><fieldset style='width: 500px'><legend>Liste liées</legend>";
  echo "<label>Auteurs &nbsp</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> &nbsp</div>";
  
  echo "<label>&nbsp Livres &nbsp</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>";
?>
Ajax.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
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
 
<?php
include('../lib/connect.php');
mysql_query("SET NAMES UTF8");
 
if (isset($_POST["idAuteur"]))
{
  echo "<select name='livre' class='dyn'>"; //  onClick='goLivre()' manquant
  
  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()' manquant
  
  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>";
}
 
?>
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
 
<script type='text/javascript'>
  function getXhr() {
    var xhr = null; 
    if(window.XMLHttpRequest)
    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>
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?