[AJAX] listes en cascades
Bonjour à tous
J'essaie à partir d'un tuto vu sur ce site de développer quelques chose qui comporterait 3 listes issues de tables différentes
La première liste définit un crière pour la seconde et la seconde pour la 3ème.
Une fois terminé, je voudrais pouvoir faire une requête utilisant les 3 sélect du
Code:
type select * from select1 where select2='select3"
Voici le code actuel :
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
| <head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
<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
*/
function go(){
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('livre').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxLivre.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('auteur');
id_groupe = sel.options[sel.selectedIndex].value;
xhr.send("id_groupe="+id_groupe);
}
function go2(){
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('contenu').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxLivre2.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id du groupe
sel = document.getElementById('livre');
id_contenu = sel.options[sel.selectedIndex].value;
xhr.send("id_contenu="+id_contenu);
}
</script>
</head>
<body>
<form>
<fieldset style="width: 800px">
<legend>Listes liées</legend>
<label>Formations</label>
<select name='auteur' id='auteur' onchange='go()'>
<option value='-1'>Aucun</option>
<?php require_once('Connections/perso.php'); ?>
<? mysql_select_db($database_perso, $perso);
$res = mysql_query("SELECT * FROM categories ORDER BY categorie");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["id_categorie"]."'>".$row["categorie"]."</option>";
}
?>
</select>
<label>Groupes</label>
<div id='livre' style='display:inline'>
<select name='livre'onchange='go2()'>
<option value='-1'>Aucun</option>
</select>
</div>
<label>Contenu</label>
<div id='contenu' style='display:inline'>
<select name='contenu'>
<option value='-1'>Préciser la valeur</option>
</select>
</div>
</fieldset>
</form>
</body>
</html> |
puis pour le fichier ajxLivre.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <?php require_once('Connections/perso.php'); ?>
<?php
echo "<select name='livre'>";
if(isset($_POST["id_groupe"])){
mysql_select_db($database_perso, $perso);
$res = mysql_query("SELECT id_groupe,groupe FROM groupes
WHERE id_categorie=".$_POST["id_groupe"]." ORDER BY groupe");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["id_groupe"]."'>".$row["groupe"]."</option>";
}
}
echo "</select>";
?> |
et enfin ajaxLivre2.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <?php require_once('Connections/perso.php'); ?>
<?php
echo "<select name='contenu'>";
if(isset($_POST["id_contenu"])){
mysql_select_db($database_perso, $perso);
$res = mysql_query("SELECT id_contenu,contenu FROM contenu
WHERE id_groupe=".$_POST["id_contenu"]." ORDER BY contenu");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["id_contenu"]."'>".$row["contenu"]."</option>";
}
}
echo "</select>";
?> |
Je précise que le passage de la liste 1 à la lkiste 2 fonctionne bien mais c'est après que ça coince, alors si quelqu'un a des idées, je l'en remercie par avance.
