[DOM] Double interaction entre listes déroulantes

**shazdo** · 26/03/2008, 12h07

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?

**E.Bzz** · 26/03/2008, 12h20

Bonjour,
la réponse n'est pas liée à Ajax à proprement parler ...
Quand tu récupères ton select via Ajax, ton PHP "oublie" de générer le onchange.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo "<select name='livre' class='dyn'>";

Pas étonnant que celui-ci ne se déclenche plus

Â+

**shazdo** · 26/03/2008, 14h15

Merci E.bzz pour cette réponse rapide.
Tout d'abord, je suis confus de cette oubli digne du débutant que je suis encore...

J'ai donc bien corrigé dans mon ajax.php:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
  echo "<select name='livre' class='dyn' onClick='goLivre()'>";
  echo "<select name='auteur' class='dyn' onClick='goAuteur()'>";

J'ai rectifié la chose, et là... Arghh... Non seulement ça ne change pas l'interactivité des champs mais en plus ça me fait disparaître le premier <option> de mes listes. Alors j'ai rajouté temporairement, tjs dans ajax.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  echo "<option value='-1'>Choisir un titre</option>";

afin que tu puisses jeter un coup d'oeil en voyant le résultat tel qu'il était avant ajout des 'onChange()'. Si tu as le temps: Exemple ici

je ne comprends vraiment pas!
(et promis, j'ai encore essayé des changements avant de reposter, mais j'ai remis comme c'était auparavant

).

**E.Bzz** · 26/03/2008, 14h23

As-tu essayé en enlevant les balises <select></select> de ta réponse Ajax, et en modifiant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('livre').innerHTML = leselect;

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('auteur').innerHTML = leselect;

??

A+

**E.Bzz** · 26/03/2008, 14h27

Après nouveau test, mon Firebug détecte des erreurs suite à un appel Ajax. En l'occurence lors du clic sur la liste qu'Ajax vient de regénérer.
La modif ci-dessus la corrigera peut-être ...

A+

**E.Bzz** · 26/03/2008, 14h35

Bon, en fait c'est bien la génération des options qui merdouille

Voici ce que récupère Firefox (visible via Firebug) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<select class="dyn" -1="" onclick="goAuteur()><option value=" name="auteur">
<option value="4">Pierre Bordages</option>

Pas étonnant que le nav ne s'y retrouve plus

Par contre c'est un problème pur PHP, et ça ... c'est pas mon truc

Autre chose qui n'a rien à voir : les values de tes livres sont dupliquées (une même value pour plusieurs livres). Ca te poses pas de problème de requête ??

A+

**shazdo** · 26/03/2008, 14h44

Je suis stupéfait de ton temps de réaction ^^, un grand MERCI!!

Bon, alors, sans les '<select></select>', ça me met les résultats au format texte, donc ils sont apparemment nécessaires.
Sinon, je fais les modifs dans le 'div' en suivant les conseils lus sur un autre forum (apparemment microsoft confirme), IE ne gère pas les innerhtml sur les Select, d'où les 'div'. Et en effet, avec les 'div', les listes se remplissent correctement.

Mais toujours le problème d'interactivité à sens unique (et annihilation du premier '<option>' depuis l'ajout des 'onChange()' dans la réponse Ajax).

[DOM] Double interaction entre listes déroulantes

JavaScript

Vue hybride

Discussions similaires

Partager

Partager