Liste Déroulantes liées et ajout d'élément.

Version imprimable

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:

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

16/09/2008, 15h24
le_chomeur

on peut voir ta fonction go ??

Oui bien sur.

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
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);
	}
}

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

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; }
:vomi::vomi:

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

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

Code :

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
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();
	}

16/09/2008, 15h56
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
16/09/2008, 15h59
nolev3

La n'est pas le problème ... :help:

je sais ^^
mais en l'état ton système est bancale ...
on reprend depuis le début, explique point par point le déroulement des opérations :
Code:

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>
liste 1 est alimenté comment ?
au moment du deuxiemme go est tu SUR que la seconde liste est déja remplie ? met le go("region_select"); a la fin de ton premier go :) ( oui oui dans la méthode )

16/09/2008, 16h14
nolev3

La Liste 1 est alimenté au chargement de la page par ma db.

J'ai déjà essayé de mettre le second go() dans la méthode mais je n'ai pas de résultat non plus.
16/09/2008, 16h18
le_chomeur

et ta liste 2 est bien alimenté ????
selon moi il y a un soucis on niveau de ta détection de changement d'état ( sur ta méthode ajax ) . . .
vérifis déja que ta liste 2 est bien alimenté après sélection d'un élément dans la liste 1 et tu reproduiras ce code pour la liste 3 ...
restes en a 2 listes car la il n'y a pas d'erreur javascript a proprement parler
16/09/2008, 16h24
nolev3

Oui, la liste est bien alimentée en fonction du choix de la liste 1.
La liste 3 doit être alimentée en fonction de la liste 2 (elle même dépendant de la 1).
Le problème est que la fonction ne se lance meme pas.
J'ai mis des alert() dans ma fonction js et lors de l'appel pour la seconde fois de go(), il ne se passe rien.
Il doit juste y avoir un tout petit problème mais qui est très embêtant...

Je vois vraiment pas le souci.

je ne comprend pas pourquoi =>

Code:

1
2
3
 
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

plutôt que de mettre go() sur le onchange de tes listes ???

16/09/2008, 16h33
nolev3

go() est déjà sur le onchange de mes listes...
Et cela marche pour mes 3 listes en choisissant dans les différentes.

Mais là ce que je voudrais c'est quand je rajoute un élément dans ces listes, que celle ci prennent les valeurs nouvellement entrée.

Par exemple :
Liste 1 :
Item1
Item2

Liste 2 :
Item3
Item4

Liste 3 :
Item5
Item6

Je sélectionne Item 1 puis Item 3. Item 5 et Item 6 ne me convienne pas don j'ajoute Item 7 .
Item 7 appartiendra à Item 3 qui appartient à Item 1.

Je veux alors que quand la page se recharge, j'ai un affichage comme ceci.

Liste 1 : Item 1
Liste 2 : Item 3
Liste 3 : Item 7

Voila pourquoi je veux utiliser un complément à "onChange"
16/09/2008, 16h38
le_chomeur

. . .
c'est ce que je te dis depuis le DEBUT !!

=> choix dans liste 1
=> alimente la liste 2
=> choix liste 2
=> alimente liste 3
modification du choix dans liste 1
=> rechargement liste 2
=> vidage liste 3

d'où la nécessité ! d'utiliser le onchange :)

c'est le principe de base des listes liées
16/09/2008, 16h46
nolev3

Tu n'as pas compris ce que je cherche à faire.
J'utilise déjà les fonctions de onchange pour effectuer la sélection.

Ce que je te dis c'est après que l'utilisateur ait ajouté un élément via un formulaire, cela doit faire automatiquement la sélection qu'il a généré sans qu'il ait besoin de recliquer sur chaque élément qu'il désire.
16/09/2008, 16h51
le_chomeur

. . .
ton formulaire est posté ?
donc => sans faire appel à des méthodes complexe au load de ta page coté php :

récupère les valeurs de tes 3 listes :)

charge chacune de tes listes en fonction des sélections précédemment posté
et toujours coté php vérifie quelle était la sélection ( ou la nouvelle si tu le souhaite :) ) et sélectionne la :)
16/09/2008, 16h55
nolev3

En gros je voudrais simuler un onChange()...
16/09/2008, 17h08
SpaceFrog

simuler un onchange ?
sur quel evénement ?