3 listes déroulantes en ajax
Bonjour je cherche de l'aide car je n'arrive pas a faire fonctionner ma 3eme liste deroulante en fonction de la deuxieme, j'ai suivi l'excellent tuto posté sur developpez.com. Je vous met donc mon code. Je pense que le probleme viens de mon 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
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
103
104
105
106
107
108
109
110
111
112
113
114
| <?php
include("connection.php");
global $bdd;
?>
<html>
<head>
<title>Selection de la classe et du stagiaire pour les modifier</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest)
xhr=new XMLHttpRequest();
else if(window.ActiveXObject){
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 gocompetence(){
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('competence').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxCompetences.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('module');
idmodule = sel.options[sel.selectedIndex].value;
xhr.send("id_module="+idmodule);
}
function gosavoir(){
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('savoir').innerHTML = lesel;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxSavoir.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
select = document.getElementById('competence');
idcompetence = select.options[select.selectedIndex].value;
xhr.send("id_competence="+idcompetence);
}
</script>
</head>
<header>
<div id="photoheader">
<img src="img/header.jpg">
</div>
</header>
<body>
<form>
<fieldset style="width: 800px">
<legend>Liste liées</legend>
<label>Modules</label>
<select name="modules" id="module" onchange="gocompetence()">
<option value="-1">Aucun</option>
<?php
$reponse=$bdd->query('SELECT * FROM module ORDER BY intitule_module ASC');
while($row = $reponse->fetch()){
echo "<option value='".$row["id_module"]."'>".$row["intitule_module"]."</option>";
}
?>
</select>
<label>Competences</label>
<div id="competence" style="display:inline" onchange="gosavoir()">
<select name="competence">
<option value="-1">Choisir un module</option>
</select>
</div>
<label>Savoirs</label>
<div id="savoir" style="display:inline">
<select name="savoir">
<option value="-2">Choisir une competence</option>
</select>
</div>
</fieldset>
</form>
</body>
</html> |
Apres il y a ma deuxieme liste deroulante (celle qui fonctionne en rapport avec la 1ere inclus dans le fichier selectionmodification.php)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <?php
include ("connection.php");
global $bdd;
echo "<select name='competences'>";
if(isset($_POST['id_module'])){
$rq=$bdd->query("SELECT * FROM competence WHERE id_module=".$_POST['id_module']." ORDER BY degre AND intitule_competence ASC");
while($row=$rq->fetch()){
echo "<option value='".$row['id_competences']."'>".$row['intitule_competence']."</option>";
}
}
echo "</select>";
?> |
et puis la 3eme
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <?php
include ("connection.php");
global $bdd;
echo "<select name='savoir'>";
if(isset($_POST['id_competence'])){
$rq=$bdd->query("SELECT * FROM savoir WHERE id_competence=".$_POST['id_competence']." ORDER BY nom_savoir ASC");
while($row=$rq->fetch()){
echo "<option value='".$row['id_savoir']."'>".$row['nom_savoir']."</option>";
}
}
echo "</select>";
?> |
