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