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

[nolev3]

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

[le_chomeur]

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 :

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>

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 )

[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.

[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

[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.

[le_chomeur]

je ne comprend pas pourquoi =>

Code :

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

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

[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"

[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

[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.

[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

[nolev3]

En gros je voudrais simuler un onChange()...

[SpaceFrog]

simuler un onchange ?
sur quel evénement ?