[DOM] Deuxieme liste déroulante liée via ajax, encore inclure ajax?

Version imprimable

Voir 40 message(s) de cette discussion en une page

16/05/2008, 10h10
clara1

[DOM] Deuxieme liste déroulante liée via ajax, encore inclure ajax?

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
16/05/2008, 10h14
SpaceFrog

oui le principe est exactement le même ...
16/05/2008, 10h15
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
16/05/2008, 10h25
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...
16/05/2008, 10h34
SpaceFrog

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

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:

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:

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

16/05/2008, 11h07
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"?
16/05/2008, 11h13
SpaceFrog

il suffit d'avoir une seule fonction de liaison avec en paramètre le select mères et le select fille ....
16/05/2008, 11h26
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
16/05/2008, 11h33
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 ...
16/05/2008, 11h36
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?
16/05/2008, 11h40
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 ...
16/05/2008, 11h40
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
16/05/2008, 11h51
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 ...
16/05/2008, 11h54
tusssss

Citation:

Envoyé par SpaceFrog

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.
16/05/2008, 11h57
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...
16/05/2008, 11h59
E.Bzz

Citation:

Envoyé par 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 ...

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

Code:

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+
16/05/2008, 12h01
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 ...

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:

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

16/05/2008, 12h08
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.
16/05/2008, 12h09
E.Bzz

+1 pour la compréhension préalable des échanges client/serveur/bdd

Par contre, on peut voir les balises de tes 2 select, avec les onchage concernés (donc les 2 appels Ajax) ?

A+
16/05/2008, 12h11
E.Bzz

Citation:

Envoyé par clara1

je ne comprends comment le onchange du select2 pourrait être interprêter

Il n'aura pas à être interprété au retour d'Ajax.
La balise select sera seulement modifiée dans la page.
Il n'y a que quand tu déclencheras le onchange de du select mis à jour que son code JS sera interprété. Ce qui ne devrait pas poser de problème (si tout est OK :mrgreen: )

A+
16/05/2008, 12h15
SpaceFrog

ajax c'est du javascript ...

au départ ta page php geneère une page html

sur la page htmle le onchange appelle eune focntion javascript (ajax)
qui appelle une page php coté serveur.
la page php effectue une requete sql
et redige le contenu du retour
la page html n'ayant pas rechargé traite alors la reponse...

En fait pour imager la chose, imagine que ajax est un coursier qui fait des aller et retours entre la page html chez le client et ton serveur, sasn que la page html ne soi rechargée ...
et à chaque foi sle coursier part de la page html avec une liste de courses (les paramètres)
et revient sur la page html avec un chargement, le responseText (ou XML ...)

donc la fonction qui envoie ton couriser dois savoir d'ou elle part et ce qu'elle doit faire comme courses ...

Ok merci pour otut ce monde qui m'aide sa me touche serieux...
Bon voila mes codes pour etre plus clair:

On a dans une page ajax_code.js ma fonction go chargée dans page1.php entre des balises script:

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

Voila ma page1.php qui contient le formulaire et le div pour le select2 ainsique le div pour l'affichage produit:

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
<div id="texte2" >
<form>
			<fieldset style="width: 800px">
				<legend>Voici les gammes Home Cin&eacute;ma Bose&reg;:<br><br></legend>
				<label>Gamme:</label>
				<select name='auteur' id='auteur' onchange='go("div_livre","Ajax2.php","auteur")'>
					<option value='-1'>Selectionnez une gamme...</option>
					<?
						$res = mysql_query("SELECT id_gamme, nom_gamme FROM Gamme ORDER BY nom_gamme");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id_gamme"]."'>".$row["nom_gamme"]."</option>";
						}
					?>
				</select>
				<label>Produit:</label>
				<div id="div_livre" style="display:inline">
				<select name='book' id='book' >
					<option value='-1'>Selectionnez un produit...</option>
				</select>
				</div>
			</fieldset>
 
		</form>
<div id="div_produit">
Votre Produit s'affichera ici.
</div>
</div>

Sur le onchange du premier select voila ma page Ajax2.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?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="book" 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>';
	}
?>

J'ai mis en gras l'appel de go() sur le onchange.
et pour l(instant ma page Ajax3.php toute bateau:

Code:

1
2
3
4
5
<?php
echo'yooooooooooooo!';
$_POST["object"];
 
?>

Voila jvais testé déjà mais les erreurs doit y en avoir

16/05/2008, 12h20
E.Bzz

Citation:

Envoyé par clara1

Voila jvais testé déjà mais les erreurs doit y en avoir

C'est sur le tag <select> que PHP doit générer le onchange, pas sur les options (en gras dans ton code) ...

A+
16/05/2008, 12h21
clara1

D'accord SpaceFrog j'ai bcp aimé l'image, et elle est parlante:
sa veut dire que le coursier envoyé par la fonction ajax serait perdu dans le onchange sur mon select2, il connaitra pas le div_produit vu qu'il existe pas dansla page où il est mais juste dans celle d'avant, erf sa se complique...!
16/05/2008, 12h22
SpaceFrog
ben déja la page php n'est pas bonne :
Code:

1 2 3 4 5 6 <?php echo'yooooooooooooo!'; $_POST["object"]; ?>
il fait quoi tout seul le POST ?
16/05/2008, 12h23
clara1

Merde vous avez raison jvoulais mettre le $_POST dans une var j'ai oublié et je modifie le onchange...
16/05/2008, 12h25
SpaceFrog

Il faut être un peu plus rigoureux ...

pour faire un test tu peux juste faire l'echo du post et voir ce que te retourne le responseText ...

bon voila mes modifs:
Ajax2.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?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="book" id="book" onChange='go("div_produit","Ajax3.php","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"].'>'.$row["nom_produit"].'</option>';
                }
        echo'</select>';
        }
?>

et Ajax3.php:

Code:

1
2
3
4
<?php
echo'yooooooooooooo!';
echo $_POST["object"];          
?>

Sa ne marche pas car le select2 ne saffiche plus, le onchange plante lexécution de select2, les paramètres doivent être foireux(surtout le premier param qui est un div de la pag1 seuelement jvoi pas comment le passer autrement), jvais faire des tests, si vous voyez des erreurs surtout nh'esitez pas!

16/05/2008, 12h28
E.Bzz

Citation:

Envoyé par E.Bzz

C'est sur le tag <select> que PHP doit générer le onchange, pas sur les options (en gras dans ton code) ...

:aie:

E bzz c'est ce que j'ai corrigé non?
j'ai reussi à corriger une partie du problème ( je crois)un problème de cote:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?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="book" id="book" onChange="go("div_produit","Ajax3.php","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"].'>'.$row["nom_produit"].'</option>'; } echo'</select>'; } ?>
mais mon deuxieme select apparait bien et la liaison 1--> marche mais quand je change dans le select2 rien ne se passe, est ce que le onchange est effectué en mettant des doubles cotes?

16/05/2008, 12h39
SpaceFrog
gros problème de syntaxe au niveau des quotes entre html en php !!!
Code:

1 2 echo'<select name="book" id="book" onChange="go(\'div_produit\',\'Ajax3.php\',\'book\')">';
il faut echapper des simples quotes
16/05/2008, 12h39
E.Bzz

Citation:

Envoyé par clara1

mais quand je change dans le select2 rien ne se passe, est ce que le onchange est effectué en mettant des doubles cotes?

Tu as un problème dans l'imbrication des quotes du tag <select>

Code:

echo'<select name="book" id="book" onChange="go(\"div_produit\",\"Ajax3.php\",\"book\")">'

A+
16/05/2008, 12h41
SpaceFrog

non EBzz echapper des doubles cotes ne fonctionnera pas a niveau html ...
16/05/2008, 12h45
clara1

SpaceFrog je n'ai rien d'autre à dire à part quel sauveur....tout marche!!!
j'ai tellement osulé tout au long du forum a jms mettre mes cotes et tout sa, mais l'a...merci enormement de même que e bzzz....tout s'affiche correctement et lid du produit est bel et bien recupéré...
Merci à tous, je fini mon truc et jvous envoie le petit lien pour vous montrez un peu ce que vous avez fait aussi!
mais je repasse si j'ai des couilles.... mer merci!!!!!!

voila on sa en est:
http://www.excelson.com/selection/se...ome_cinema.php
16/05/2008, 12h48
SpaceFrog

Citation:

Envoyé par clara1

mais je repasse si j'ai des couilles.... mer merci!!!!!!

J'ai toujours cru que tu étais du sexe féminin ...
On ne te reverra pas alors ?
16/05/2008, 12h49
E.Bzz

Citation:

Envoyé par SpaceFrog

non EBzz echapper des doubles cotes ne fonctionnera pas a niveau html ...

Yop !
Effectivement, je savais pas car je ne fais jamais comme ça :oops:
16/05/2008, 12h51
clara1

oh si SpaceFrog jrepasserai mais je savoure et je te dis un grnad merci de ne pas m'avoir viré!!c'etait pour la bonne cause , jvous ferais des reduc' pour des produits BOSE si vous habitez pas loin de lyon....
16/05/2008, 12h53
SpaceFrog

Je tiens à te féliciter et à te remercier publiquement pour tes efforts à respecter les règles de notre forum...
Je pense que tu comprends mieux maintenant le pourquoi ;)
Le mauvais départ est oublié :king:

Voir 40 message(s) de cette discussion en une page