[AJAX] Select en Cascade

Version imprimable

Bonjour,

Je me suis inspiré de cette discussion :
http://www.developpez.net/forums/d80...nds-ne-marche/

J'ai un problème lors de l'affichage de ma deuxième liste en fonction de la sélection de la première. J'ai pourtant l'ID de la 1ere liste que j'affiche (donc, que je récupères) mais après lorsque je passe cette variable dans ma requête pour afficher la deuxième liste, cette dernière se trouve vide.

auteurs.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
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
115
116
117
118
119
120
121
122
123
<html> 
<head> 
<title></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('lebatiment').innerHTML = leselect; 
			document.getElementById('lebatiment').onchange = golivre;
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajaxBatiment.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('corpsdemetier'); 
	idcorpsdemetier = sel.options[sel.selectedIndex].value; 
	xhr.send("id_corpsdemetier="+idcorpsdemetier); 
} 
 
function golivre()
{ 
	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('leprix').innerHTML = leselect; 
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajaxPrix.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('livre'); 
	idlivre = sel.options[sel.selectedIndex].value; 
	xhr.send("idLivre="+idlivre); 
} 
 
</script> 
</head> 
 
 
<body> 
<form> 
<fieldset style="width: 500px"> 
<legend>Liste liées</legend> 
<label>Corps de Métier</label> 
<select name='corpsdemetier' id='corpsdemetier' onchange='go()'> 
	<option value='-1'>Aucun</option> 
	<?php 
	mysql_connect("localhost","root",""); 
	mysql_select_db("base"); 
	$res = mysql_query("SELECT id_cdm,designation_cdm FROM corps_de_metier"); 
	while($row = mysql_fetch_assoc($res)){ 
	echo "<option value='".$row["id_cdm"]."'>".$row["designation_cdm"]."</option>"; 
	} 
	?> 
</select> 
<br />
 
<label>Batiment</label> 
<div id='lebatiment' style='display:inline'> 
	<select name='batiment' id='batiment'> 
	<option value='-1'>Choisir un batiment</option> 
	</select> 
</div> 
 
<br />
<label>Prix</label> 
<div id='leprix' style='display:inline'> 
	<select name='prix' id='prix'> 
	<option value='-1'>Choisir un prix</option> 
	</select> 
</div> 
</fieldset> 
</form> 
</body> 
</html>

ajaxBatiment.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php 
 
$id_corps_de_metier=$_POST["id_corpsdemetier"];
 
echo $id_corps_de_metier;
 
 
echo "<select name='batiment' id='batiment'>"; 
if(isset($_POST["id_corpsdemetier"])){ 
mysql_connect("localhost","root",""); 
mysql_select_db("test"); 
$res = mysql_query("SELECT id_batiment,nom_batiment FROM batiment WHERE id_batiment='".$_POST["id_corpsdemetier"]."' "); 
while($row = mysql_fetch_row($res)){ 
echo "<option value='".$row["id_batiment"]."'>".$row["nom_batiment"]."</option>"; 
} 
} 
echo "</select>"; 
?>

11/02/2010, 06h55
andry.aime

Bonjour,
Je pense que ce vient de la structure de tes tables dans la base, peux-tu nous les montrer?

J'avais oublié de dire que je lorsque testes la requête sur phpmyadmin, elle fonctionne.

base test1

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
-- phpMyAdmin SQL Dump
-- version 3.2.0.1
-- http://www.phpmyadmin.net
--
-- Serveur: localhost
-- Généré le : Jeu 11 Février 2010 à 13:07
-- Version du serveur: 5.1.36
-- Version de PHP: 5.3.0
 
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
 
 
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
 
--
-- Base de données: `test1`
--
 
-- --------------------------------------------------------
 
--
-- Structure de la table `equipe`
--
 
CREATE TABLE IF NOT EXISTS `equipe` (
  `id_equipe` tinyint(3) unsigned NOT NULL AUTO_INCREMENT,
  `nom_equipe` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id_equipe`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
 
--
-- Contenu de la table `equipe`
--
 
INSERT INTO `equipe` (`id_equipe`, `nom_equipe`) VALUES
(1, 'Plomberie'),
(2, 'Electricite');
 
-- --------------------------------------------------------
 
--
-- Structure de la table `personne`
--
 
CREATE TABLE IF NOT EXISTS `personne` (
  `id_personne` tinyint(3) unsigned NOT NULL AUTO_INCREMENT,
  `nom_personne` varchar(20) DEFAULT NULL,
  `id_equipe` tinyint(3) unsigned NOT NULL,
  PRIMARY KEY (`id_personne`),
  KEY `FK_personne_id_equipe` (`id_equipe`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
 
--
-- Contenu de la table `personne`
--
 
INSERT INTO `personne` (`id_personne`, `nom_personne`, `id_equipe`) VALUES
(1, 'DUPOND', 1),
(2, 'DURAND', 1),
(3, 'ELECTRO', 2),
(4, 'ENERGIZER', 2);

auteurs.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
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
115
116
117
118
119
120
121
122
123
<html> 
<head> 
<title></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('lapersonne').innerHTML = leselect; 
			document.getElementById('lapersonne').onchange = golivre;
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajaxPersonne.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('equipe'); 
	idequipe = sel.options[sel.selectedIndex].value; 
	xhr.send("id_equipe="+idequipe); 
} 
 
function golivre()
{ 
	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('leprix').innerHTML = leselect; 
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajaxPrix.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('livre'); 
	idlivre = sel.options[sel.selectedIndex].value; 
	xhr.send("idLivre="+idlivre); 
} 
 
</script> 
</head> 
 
 
<body> 
<form> 
<fieldset style="width: 500px"> 
<legend>Liste liées</legend> 
<label>Equipe</label> 
<select name='equipe' id='equipe' onchange='go()'> 
	<option value='-1'>Aucun</option> 
	<?php 
	mysql_connect("localhost","root",""); 
	mysql_select_db("test1"); 
	$res = mysql_query("SELECT id_equipe,nom_equipe FROM equipe"); 
	while($row = mysql_fetch_assoc($res)){ 
	echo "<option value='".$row["id_equipe"]."'>".$row["nom_equipe"]."</option>"; 
	} 
	?> 
</select> 
<br />
 
<label>Batiment</label> 
<div id='lapersonne' style='display:inline'> 
	<select name='personne' id='personne'> 
	<option value='-1'>Choisir une personne</option> 
	</select> 
</div> 
 
<br />
<label>Prix</label> 
<div id='leprix' style='display:inline'> 
	<select name='prix' id='prix'> 
	<option value='-1'>Choisir un prix</option> 
	</select> 
</div> 
</fieldset> 
</form> 
</body> 
</html>

ajaxPersonne.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php 
 
$id_equipe=$_POST["id_equipe"];
 
echo $id_equipe;
 
 
echo "<select name='personne' id='personne'>"; 
if(isset($_POST["id_equipe"])){ 
mysql_connect("localhost","root",""); 
mysql_select_db("test1"); 
$res = mysql_query("SELECT id_personne,nom_personne FROM personne,equipe WHERE personne.id_equipe=equipe.id_equipe AND personne.id_equipe='".$id_equipe."' "); 
while($row = mysql_fetch_row($res)){ 
echo "<option value='".$row["id_personne"]."'>".$row["nom_personne"]."</option>"; 
} 
} 
echo "</select>"; 
?>

11/02/2010, 14h31
Kenshin86

J'ai encore réessayer et le problème vient pas de la requête mais d'une variable.

Je cherches encore et j'espère mettre la solution ici tout à l'heure.
11/02/2010, 14h57
Kenshin86
Le problème vient du non-respect de la casse.
Code:

1 2 3 sel = document.getElementById('corps_de_metier'); idbatiment = sel.options[sel.selectedIndex].value; xhr.send("id_batiment="+idbatiment);
Sur la dernière ligne, j'avais mis :

Code:

xhr.send("idBatiment="+idbatiment);

Du coup, la distinction entre les deux variables ne se faisait pas après.