3 listes déroulantes en ajax

**misterpilou** · 24/06/2015, 16h01

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 php :

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
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 php :

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

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 php :

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

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>";
?>

**andry.aime** · 25/06/2015, 08h30

Bonjour et Bienvenue sur Developpez.

1- Tes selects générer n'ont pas d'id.

Code html :

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

<div id="competence" style="display:inline" onchange="gosavoir()">

L'attribut onchange doit être sur le select et non pas sur le div et utilise l'id du select et non pas celui du div, n'oublie pas de l'ajouter aussi sur le select généré.

A+.

Invité · 25/06/2015, 09h05

Bonjour,
tu peux t'inspirer aussi de cette méthodologie.

**misterpilou** · 25/06/2015, 21h09

Merci andry aime est ce cela ce dont tu parles?(ca ne marche pas)

Code javascript :

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
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 = leselect;
					}
				}
 
				// 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('module');
				idmodule = select.options[select.selectedIndex].value;
				sel = document.getElementById('competence');
				idcompetence = sel.options[sel.selectedIndex].value;
				xhr.send("id_competence="+idcompetence, "id_module="+idmodule);
			}

Merci aussi a toi jreaux je regarde ca tout de suite

**andry.aime** · 26/06/2015, 09h57

Pas ça, je reviens sur ton premier post:

Code :

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

select = document.getElementById('competence');

et regarde dans ton html

Code html :

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

1
2
<div id="competence" style="display:inline" onchange="gosavoir()">
					<select name="competence">

Cet id et le onchange doit être dans le select et non pas dans le div. Quand tu crées le nouveau select du coté php, n'oublie pas aussi de les ajouter dans

Code php :

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