[DOM] Double interaction entre listes déroulantes
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:
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  </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>";
?> |
Ajax.php:
Code:
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:
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?
