Discussion :

[shazdo]

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]

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]

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]

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]

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]

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]

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).

[shazdo]

Ok, je vais me pencher sur mon code PHP, et regarder comment utiliser firebug (m'a l'air sympa cet outil )

Sinon, pour l'instant, c'est un objet temporaire, et en effet, c'est normal que la deuxième liste ait des ID identiques, par la suite, je leur mettrais leur ID unique (titre) et en <span 'caché'> l'ID de l'auteur correspondant.

Un grand merci pour ton aide.
Si tu as des conseils pour firebug, je suis preneur.
Et si je n'arrive pas à régler mon problème, crois-tu que je puisses le poster dans la section PHP en expliquant ce que tu as mis?

(mais d'abord, je cherche )

[E.Bzz]

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.

Il me semble pourtant qu'avec IE 6 ça fonctionne ...

Mais c'est sûr que le mieux est de le faire via le DOM

Code :

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

1
2
3
4
function PurgeListe(idNomListe)
{	var objListe = document.getElementById(idNomListe);
	for (i=objListe.length;i>=0;i--) objListe.options[i]=null;
}

puis sur réception des options via Ajax

Code :

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

1
2
3
objListe=document.getElementById(idNomListe);
Ajout = new Option('text', 'value');
objListe.options[objListe.length]=Ajout;

Moins simple que innerHTML, mais beaucoup plus propre

A+

[shazdo]

D'après d'autres internautes, ils auraient du rajouter IE6 et IE7 dans la liste de non compatibilité d'IE pour 'select<-->innerhtml' , alors j'ai préféré palier au problème directement, même si je ne "développe" que sous firefox.

Je suis vraiment déçu en tout cas de pas y arriver comme ça, j'ai pour habitude d'aller au bout... Mais si c'est impossible, c'est une belle perte de temps, pas vrai?

Je vais essayer avec les DOM, j'essaie depuis un mois que je suis dans le javascript de contourner le problème, mais je crois que je vais devoir m'y mettre, ça à l'air très pratique.

Merci encore, et si qqun à une solution à mon problème, je suis toujours preneur, j'essaie de faire des didacticiel présentant un résultat avec plusieurs manières d'y arriver. Ensuite, je fais tourner aux débutants comme moi

Un grand MERCI encore, et je te tiendrai au courant ici de mes avancées!

[shazdo]

Bon, j'avais margouilleusement oublié de mettre les propriétés 'id='livre / id='auteur' dans la réponse Ajax, d'où l'impossibilité d'agir des 'getElementById('livre')'... (en plus d'une apostrophe manquante)

j'ai Honte .

L'intéractivité fonctionne bel et bien donc, et c'était bien un problème de PHP.

Bon, j'ai de nouveaux problèmes que je devrai arriver à surmonter seul je pense. Dés que j'ai bouclé cette histoire, je met en lien le résultat consultable pour ceux que ça peut intéresser, et je bouclerai le sujet par un "résolu" et un GRAND MERCI à E.Bzz et 'Developpez.com'.

[E.Bzz]

L'intéractivité fonctionne bel et bien donc, et c'était bien un problème de PHP.

Et pas de honte à avoir ...

Sinon, essaye de te passer de innerHTML dans la mesure du possible.
Il ne devrait être utilisé que pour modifier du texte dans la page.
De plus il a beaucoup de limitations : modification de <table>, de <form> impossible notamment, et Jean Noubli ...

A+

[shazdo]

Bon, j'ai résolu mes problèmes,
ça marche très bien maintenant.
Si vous voulez voir le résultat, voici le lien (préférez FireFox)

www.monfl.fr/exemples