Discussion :

[nolev3]

Bonjour à tous,

J'ai mis en place 3 listes déroulante liées grâce au tutoriel de siddh situé ici.
Cela fonctionne à merveille.

Mais maintenant je voudrais rajouter des options dans ces listes déroulantes. Pour cela j'affiche un formulaire qui après validation rajoute une ligne dans ma base de données Mysql.
A la validation du formulaire je lance manuellement la fonction de façon à ce que si j'ajoute un élément pour la première liste, qu'il soit directement visible et affiche la seconde liste déroulante.
Cela marche pour la premiere liste déroulante. Mais pour la seconde, je n'arrive pas à faire afficher la dernière liste.

Code :

Code :

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

1
2
3
4
5
 
<script type="text/javascript">
go("groupe_select"); //Recupere la valeur de la liste 1 et affiche la liste 2 en fonction du choix en liste 1
go("region_select");//Recupere la valeur de la liste 2 et affiche la liste 3 en fonction du choix en liste 1
</script>

La première fonction se déroule correctement. Mais la seconde ne fais rien du tout. Quel peut être le problème ?
Je tiens à préciser que les fonctions fonctionnent très bien quand je n'utilise pas d'ajout dynamique.

Merci d'avance pour votre aide,

nolev3

[le_chomeur]

on peut voir ta fonction go ??

[nolev3]

Oui bien sur.

Code :

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
function go(param){
	var xhr = getXhr();
	var sel = document.getElementById(param);
	xhr.onreadystatechange = function(){
 
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
 
			if (param == 'region_select'){
				document.getElementById('div_centre').innerHTML = leselect;
			}
			else if(param == 'groupe_select'){
				document.getElementById('div_region').innerHTML = leselect;
			}
		}
	}
 
	xhr.open("POST","ajaxRegion.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	if (param == 'region_select'){
 
		var group = document.getElementById('groupe_select');
		region = sel.options[sel.selectedIndex].value;
		groupe = group.options[group.selectedIndex].value;
		xhr.send("region="+region+"&group="+groupe);
	}
	else if(param == 'groupe_select'){
		groupe = sel.options[sel.selectedIndex].value;
		xhr.send("groupe="+groupe);
	}
}

[le_chomeur]

tu utilises ça pour remplir ta div avec les listes déroulantes récupérées ?

Code :

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

1
2
3
4
5
6
7
 
if (param == 'region_select'){
				document.getElementById('div_centre').innerHTML = leselect;
			}
			else if(param == 'groupe_select'){
				document.getElementById('div_region').innerHTML = leselect;
			}

peux tu montrer le code source généré après appel de la méthode ?

[nolev3]

Non Non.
J'appelle ensuite une page php qui rempli le div sélectionné par la fonction go().

Code :

Code :

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
if(isset($_POST["groupe"])){
	echo "<select name='region' id='region_select' onchange=\"go('region_select')\"><option value=''>Aucune</option>";
	_connect(); // Connexion DB
	$sql="SELECT nom_region FROM region WHERE groupe='".$_POST["groupe"]."' ORDER BY nom_region";
	$res = mysql_query($sql);
	$num_rows = mysql_num_rows($res);
	while($data = mysql_fetch_array($res)){
 
		echo "<option value='".$data["nom_region"]."'>".$data["nom_region"]."</option>";
	}	
	echo "</select>";
 
	_disconnect(); // Déconnexion DB
}
 
if(isset($_POST["region"])){
	echo "<select id='centre_select' name='centre'><option value=''>Aucun</option>";
	_connect();
	$sql="SELECT nom_centre FROM centre WHERE groupe='".$_POST["group"]."' AND region='".$_POST["region"]."' ORDER BY nom_centre";
	$res = mysql_query($sql);
	while($data = mysql_fetch_array($res)){
 
		echo "<option value='".$data["nom_centre"]."'>".$data["nom_centre"]."</option>";
	}
	echo "</select>";
	_disconnect();
	}

[le_chomeur]

c'est bien ce que je dis . . .

bon je te conseille de revoir un peu l'architecture de ton application enfin moi j'dis ça j'ai rien dis hein ^^ conseil =>

liste 1
liste 2
liste 3

=> chargement liste 1 ok
=> sélection liste 1 alimente la 2snd
=> méthode permettant de récuperer un XML ! avec uniquemen value + text a afficher , puis parsing de ton retour xml grace au dom pour ajouter les donnée dans ta liste 2

idem pour la liste 3 en fonction du choix de la liste 1

tu gagneras en propreté . . .
de plus gère les évènement sur tes liste plutôt que de loader les informations en bas de pages