Discussion :

[clara1]

Bonjour,
je savais pas trop comment introduire ce sujet, j'ai reussi il y a peu de temps à faire deux listes déroulantes liées, via ajax, j'aimerais savoir si je peux à partir de la deuxieme liste qui est apparu en fonction de la premiere, est ce que je peux rajouter du ajax pour faire apparaitre un troisieme element apres?
le js n'etant pas interprété par des pages inclues via ajax est ce que cette règle s'applique aussi pour des listes déroulantes?

merci

[SpaceFrog]

oui le principe est exactement le même ...

[tusssss]

A priori oui tu peux rajouter une 3eme liste deroulante, après la difficulté de l'entreprise viendra de la propreté du code présent pour 2 listes liées...

Bon courage

[clara1]

ba en faite lorque la deuxieme liste déroulante selectionne un truc, un produit apparait, le truc c'est que je vais faire sa avec du php pur comme sa comme l'ajax n'interperete pas le js, jvais pas me relancer dans des evals et des dom bcp trop compliqué pour mon niveau...jpasse a un rechargement de page par la suite...on verra si du point de vue ergonomique c'est pas si horrible...

[SpaceFrog]

sauf qu'en rechargement de page tu perdras la première liste liée ...

[clara1]

oué jvien juste de me dire sa en faite...soit tout par post soi tout par ajax, erf, un code valable pour interprété le js?, est ce que de ma page chargé par ajax je peut rappeler la même fonction que celle pour les listes liées dés le debut? sa simplifierai peut être le pbm, sa ferai juste un appel de fonction situé dans la page mere, comment faire exécuter cette appel de fonction?
mon code serait celui la pour appeler la fonction dans mon deuxieme select:

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
 
<?php
        if(isset($_POST["object"])){
                $host = "x";
                $user = "x";
                $bdd = "x";
                $passwd  = "x";
                $co=mysql_connect($host, $user,$passwd) or die("erreur de connexion au serveur");
                $db=mysql_select_db($bdd) or die("erreur de connexion a la base de donnees");
                echo'<select name="livre" id="book">';
                $res = mysql_query("SELECT identifiant_produit , nom_produit FROM Bose WHERE id_gamme=".$_POST["object"]." ORDER BY nom_produit");
                        while($row = mysql_fetch_assoc($res)){
                        
                        echo '<option value='.$row["identifiant_produit"].' onChange='go("div_produit", "Ajax3.php","book")'>'.$row["nom_produit"].'</option>';
                }
        echo'</select>';
        }
?>

et comment modifier ma fonction go()? je suis plus que motivé pour y arriver!(lol)

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
 
function go(div, file, idprem){
				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(div).innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST",file,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(idprem);
				object = sel.options[sel.selectedIndex].value;
				xhr.send("object="+object);
			}

[clara1]

y aurai-t-il quelque code dans la FAQ repondant à ce sujet? j'ai regarder mais les titres ne m'ont pas trop parlé, vous avez des liens "fiables"?

[SpaceFrog]

il suffit d'avoir une seule fonction de liaison avec en paramètre le select mères et le select fille ....

[clara1]

D'accord, et cette fonction de liaison serait appelé en même tps que ma fonction go() ferait le lien entre select mère et fille, mais tu pourrais etre plus précis, jappelle cette fonction où?
si jutilise la fonction go() pour relier le selctmere au fille et le select fill à l'apparition du produit, comment faire pour appeler juste la fonction liaison()(le nom de la nouvelle fonction par exemple) pour le onchange de la mere?

et comment implémenter cette fonction surtout?
Merci

[SpaceFrog]

en principe lier des select implique que la modification se fait sur une modification du select ...

donc sur le onchange non ???

ou alors tu attends d'avoir fait toutes les modifs sur le select si il est multiple...
et tu lances l'ajax sur le onblur

ou sur le click d'un bouton ...

[clara1]

Moi c'est sur un onchange que la modif se fait, je peux appeler deux fonction sur le onchange? c'est à dire ma fonction go() et ma fonction liaison() pour lier les deux select pour faire passer le code js?

[SpaceFrog]

suffit d'un ; ... ou d'appeler une focntion à la fin de l'autre, tout dépend de si l'une doit attendre le résultat de l'autre ou pas ...

[clara1]

SpaceFrog il suffit d'avoir une seule fonction de liaison avec en paramètre le select mères et le select fille ....
---------------------------------------------------------
tu parle d'un fonction qui permettrait de lire le code js sur ma page inclue via ajax c'est sa?

moi j'ai un premier onchange qui suivant le choix du premier select modifie le second, et un deuxieme onchange pour que le select2 fasse apparaitre un produit.
cETTE fonction de liaision est situé sur le premier onchange c'est sa?
je te demande donc comment l'appeler vu que la fonction go est dja appelé et aussi comment l'implémenter, parce que je vois pas du tout koi maruer dedans... merci

[SpaceFrog]

Ce que je dis est qu'il suffit d'avoir une seule focntion que tu appemmes sur le onchange du premier et du second select ...
avec en paramètre lequel des deux selects appelle la fonction pour savoir si tu dois opérér à la liaison 1 à 2 ou 2 à 3 ...

[tusssss]

Ce que je dis est qu'il suffit d'avoir une seule fonction que tu appelles sur le onchange du premier et du second select ...
avec en paramètre lequel des deux selects appelle la fonction pour savoir si tu dois opérér à la liaison 1 à 2 ou 2 à 3 ...

+ 1

C'est pas très compliqué, il faut juste comprendre le principe après le code ne pose pas de difficultés.

[clara1]

daccord je viens de comprendre le principe et le code js serait alors effectué? sans aucun eval ou dom a mettre? c'est fou sa je test...

[E.Bzz]

Ce que je dis est qu'il suffit d'avoir une seule focntion que tu appemmes sur le onchange du premier et du second select ...
avec en paramètre lequel des deux selects appelle la fonction pour savoir si tu dois opérér à la liaison 1 à 2 ou 2 à 3 ...

La fonction go() est même déjà adaptée à ce fonctionnement :

Code :

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

go(div, file, idprem)

Elle prend déjà en paramètre le div à mettre à jour (qui peut devenir le select à mettre à jour), l'url à appeler (éventuellement différente pour les 2 jeux de liste) et la liste à prendre en compte pour la sélection.

A+

[SpaceFrog]

je crois qu'il faudrait d'abord que tu te penches sur le déroulement d'une requète ajax qui appelle une page php qui fait une requete mysql puis redige la réponse...
Et que tu saisisses bien de quel coté est interprété le javascript et le php ...

[clara1]

Erf la je cale parce que j'ai limpression qu'il n'y a rien à modifier dans ma fonction, je m'explique, ma fonction go a pour paramètres:
div---------->l'id du div où charger le code
file------------> le fichier avec le code a uploadé
nameprem----------> le nom du premier select qui donc définit quelle sera la liaison.

Ma fonction est de la sorte:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
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(div, file, nameprem){
				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(div).innerHTML = leselect;
						}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST",file,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(nameprem);
				object = sel.options[sel.selectedIndex].value;
				alert(object);
				xhr.send("object="+object);
			}

Elle renvoi le bon paramètre quelque soit osn utilisation ( liaison 1-->2 ou liaison 2-->3) et elle est déclaré sur une page ajax_code.js et EST CHARGE SEULEMENT dans ma page1 du premier select.... sa devrait marché si j'appelle la fonction sur le onchange de page1 et sur le onchange du select2 de page2??

[clara1]

J'arrive à comprendre la première partie SpaceFrog et ma page php chargé par ajax qui effectue une requete sql coté serveur, j'effectue un onchange qui passe coté client pour charger ma troisième partie dans le div de la page1... la sa risque de coincer(je fai un page2 inclu dans page1 vers un div page1). et je coryais qu'ajax ne retournai qu'une valeur et pas de script js je ne comprends comment le onchange du select2 pourrait être interprêter... bref je test quand même.