syntaxe onclick sur un div

**E.Bzz** · 15/05/2008, 15h22

Envoyé par tusssss

il faut passer par du AJAX,

Exact, mais il serait (très) largement préférable de maîtriser auparavant Javascript d'une part, et PHP de l'autre ...

A+

**tusssss** · 15/05/2008, 15h24

echo n'affiche pas de tableaux à priori il faut utiliser print_r

**clara1** · 15/05/2008, 15h27

encore et toujours ajax, si c'est le cas quelqu'un aurait il une idée d'un tuto valable sur des selects liées ou encore des deux listes tout simplement liées qui s'adaptent lune en fonction de lautre , quelque chose qui fonctionne...?merci pour tout ces posts sinon

**E.Bzz** · 15/05/2008, 15h31

Aussi étrange que ça puisse paraître, on trouve ça dans la FAQ

**tusssss** · 15/05/2008, 15h32

J'ai personnellement commencé le AJAX avec le javascript il y a 1 mois et demi et j'avoue que j'ai encore des grosses difficultés avec le AJAX, un peu moins avec Javascript, mais c'est encore pas ça...

Donc si tu cherches réellement un tutoriel de liste liées il y en a dans la partie AJAX tutoriel de ce site, il y a juste à chercher un peu.

Si tu comptes t'y mettre bon courage.
LE mieux étant,comme il a été dit plus haut de te familiariser d'abord avec PHP et javascript, ca te fera surement gagner du temps.

**Akwel91** · 15/05/2008, 15h32

Cherche "XmlHttpRequest PHP" tu trouveras des réponses.

Ou regarde ici.. Tout à l'heure j'ai posté ça :
http://www.developpez.net/forums/sho...d.php?t=548422
M'enfin je maitrise pas donc je peux être dans le faux.. Mais c'est comme ça que je fais moi.

Mais bon... Va lire des cours toi aussi, ça fait pas de mal de lire de la doc

**clara1** · 15/05/2008, 15h36

je sais bien mais je suis un peu à cour de tps j'ai passer trop de tps a vouloir interpeter du js dans l'ajax et sa risque d'être encore la même chose apres, erf jvais déjà voir sa le mieu serait de le faire en php pur deja jvais voir ce que je trouve merci de votre aide en tout cas....

**E.Bzz** · 15/05/2008, 15h36

Envoyé par Akwel91

Cherche "XmlHttpRequest PHP" tu trouveras des réponses.

Pas la peine de faire tout le web : un forum et une FAQ Ajax ici

A+

**clara1** · 15/05/2008, 17h14

Re!

Bo j'ai pris le code de la faq, et ya un bug, alors petit à petit j'ai reussi à voir où etait le problème mais je ne sais pas comment y remedier.

Voila dans ma page page1.php avec le code correspondant au premier select sur un changement jappelle bie une fonction go qui est celle ci:

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
 
function go(){
				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('livre').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","Ajax2.php",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('auteur');
				id_gamme = sel.options[sel.selectedIndex].value;
				alert(id_gamme);
				xhr.send("id_gamme="+id_gamme);
			}

Le alert(id_gamme) me renvoie bien le bon identifant.
Mais les produits correspondants à ma premiere selection n'apparaisse pas et le select reste vide, j'ai fais donc des test par rapport à mon deuxieme fichier situé dans le même repertoire que page1.php et qui s'appelle Ajax2.php;

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
 
<?php
echo('yooooooooooooooooooooooooooooooo!');      
        echo "<select name='livre'>";
        echo($_POST["id_gamme"]);
        /*if(isset($_POST["id_gamme"])){
                $host = "passepo2_uqiq";
                $user = "passepo2_uqiq";
                $bdd = "passepo2_uqiq";
                $passwd  = "lAexnvxh";
                echo('je passe par la');
                $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");
                $res = mysql_query("SELECT identifiant_produit , nom_produit FROM Bose WHERE id_gamme=".$_POST[["id_gamme"]." ORDER BY nom_produit");
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["identifiant_produit"]."'>".$row["nom_produit"]."</option>";
                }
        }*/
        echo "</select>";
?>

J'ai mi parties de code en commentaire pour voir ou le code bug, et le yooooooooo apparait de même que le select mais le echo($_POST[...] )n'a aucun resultat donc la variable ne passe pas entre les fonctions et resultat rien ne s'affiche. Vous avez une idée???

**E.Bzz** · 15/05/2008, 17h19

Si tu réactives le passage en commentaire, et que tu tapes l'url appelée par Ajax directement dans la barre d'adresse de ton nav, tu auras plus de chance de piéger l'erreur (si elle est dans ta requête SQL, par exemple) ...

A+

**clara1** · 15/05/2008, 17h21

si je reactive le commentaire, rien ne s'affiche et le code source est blanc...!

**clara1** · 15/05/2008, 17h23

le problème se situe dans le passage de la variable par POST rien n'est récupéré, alors que le alert dans le code précédent m'indique le bon identifiant...comment est ce possible?

**E.Bzz** · 15/05/2008, 17h31

Il est envoyé comment au serveur ton id_gamme ?

* je le vois pas dans ton code
* c'est sur la base des name que les données du form sont envoyées, pas de l'id

A+

**clara1** · 15/05/2008, 17h38

Erf tout est en getelementByID dans mon code, mais jvois pas le problème regarde:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
<script type='text/javascript'>
 
			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(){
				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('livre').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","Ajax2.php",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('auteur');
				id_gamme = sel.options[sel.selectedIndex].value;
				alert(id_gamme);
				xhr.send("id_gamme="+id_gamme);
			}
		</script>
</head>
<?php
$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");
?>
<body>
<table  align="center" width="500" height="100%"  border="0" cellpadding="0" cellspacing="0"  STYLE="BORDER-COLOR:#EDEDED; border-width:thin;BORDER-LEFT-WIDTH:1PX;BORDER-right-WIDTH:1PX; BORDER-TOP-WIDTH:0PX; BORDER-BOTTOM-WIDTH:1PX; BORDER-STYLE:SOLID;"> 
		  <tr>
		    <td><div id="texte2" >
					Le Home Cin&eacute;ma Bose<br>
					___________________________________________________________________________________________________________
 
					</div><br></td>
					</tr>
					<tr>
					<td>
					<table id="tab" width="800">
						<tr>
							<td>		
<form>
			<fieldset style="width: 800px">
				<legend><div id="texte2" >Voici les gammes Home Cin&eacute;ma Bose&reg;:<br></div></legend>
				<label>Gamme:</label>
				<select name='auteur' id='auteur' onchange='go()'>
					<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='livre' style='display:inline'>
				<select name='livre' id='livre'>
					<option value='-1'>Selectionnez un produit...</option>
				</select>
				</div>
			</fieldset>
		</form>			
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>		
</body>
</html>

J'ai pas modifier les id et name des select initiaux pour eviter le maximum d'erreur, et voila ma page Ajax2.php:

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
 
<?php
echo('yooooooooooooooooooooooooooooooo!');      
        echo "<select name='livre'>";
        echo($_POST["id_gamme"]);
        if(isset($_POST["id_gamme"])){
                $host = "x";
                $user = "x";
                $bdd = "x";
                $passwd  = "x";
                echo('je passe par la');
                /*$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");
                $res = mysql_query("SELECT identifiant_produit , nom_produit FROM Bose WHERE id_gamme=".$_POST[["id_gamme"]." ORDER BY nom_produit");
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["identifiant_produit"]."'>".$row["nom_produit"]."</option>";
                }*/
        }
        echo "</select>";
?>

Merci et dis moi si ya un truc byzarre merci

**clara1** · 15/05/2008, 17h45

Le code sur la FAQ a l'air byzarre le select livre n'est definie que par un name='livre' et on a un getelementbyId('livre') dans le code js, c'est normal??

**E.Bzz** · 15/05/2008, 17h50

Trouvé (je crois) :
Tu as dans ta page

Code :

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

1
2
<div id='livre' style='display:inline'>
<select name='livre' id='livre'>

l'id "livre" est dupliqué (strictement interdit)
Tu as un <select id='livre'> dans lequel tu tentes d'insérer <select><option> etc..</select>

Renomme ton div en "div_livre" et modifie ta fonction Ajax :

Code :

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

document.getElementById('div_livre').innerHTML = leselect;

A+

**clara1** · 15/05/2008, 18h01

erf non c'est pas sa, j'ai testé l'alert dans le go() ne seffectuait même plus.

le getElementById('livre') chercher l'id du select livre non?il ne cherche pas le <div id='livre'>
J'ai modifié ce div en div id="div_livre" et jai mis dans le select un id=livre mais j'en ai pas rajouté dans le select du Ajax2, dailleurs pourquoi deux selects ??
voila mon code modifié:

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
 
function go(){
				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('livre').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","Ajax2.php",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('auteur');
				id_gamme = sel.options[sel.selectedIndex].value;
				alert(id_gamme);
				xhr.send("id_gamme="+id_gamme);
			}

la suite de la page:

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
 
<form>
			<fieldset style="width: 800px">
				<legend><div id="texte2" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; color: #333333;">Voici les gammes Home Cin&eacute;ma Bose&reg;:<br></div></legend>
				<label>Gamme:</label>
				<select name='auteur' id='auteur' onchange='go()'>
					<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='livre' id='livre' >
					<option value='-1'>Selectionnez un produit...</option>
				</select>
				</div>
			</fieldset>
		</form>

et ma page ajax2.php:

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
 
<?php
echo('yooooooooooooooooooooooooooooooo!');      
        echo "<select name='livre'>";
        echo($_POST["id_gamme"]);
        /if(isset($_POST["id_gamme"])){
                $host = "passepo2_uqiq";
                $user = "passepo2_uqiq";
                $bdd = "passepo2_uqiq";
                $passwd  = "lAexnvxh";
                echo('je passe par la');
                $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");
                $res = mysql_query("SELECT identifiant_produit , nom_produit FROM Bose WHERE id_gamme=".$_POST[["id_gamme"]." ORDER BY nom_produit");
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["identifiant_produit"]."'>".$row["nom_produit"]."</option>";
                }
        }
        echo "</select>";
?>

Jvais tenter de rajouter le id='livre' dans le select de ajax2.php mais je trouve sa byzarre de le déclarer deux fois dans deux pages diff ce select...
Merci

**E.Bzz** · 15/05/2008, 18h04

Fais toutes les modifs indiquées, et uniquement celle-là.

Sinon, aucun moyen d'analyser le problème

A+

**clara1** · 15/05/2008, 18h10

Ok alors j'ai repris tes modifs et seuelement les tiennes voila la situation de mes pages:

page1.php:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Le Home Cinéma Bose</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<meta name="description" content="Naviguer sans rechargement gràce à AJAX" />
<meta name="keywords" content="ajax, javascript, reload, navigation" />
<link rel="stylesheet" href="css3/style.css" type="text/css" media="screen"/>
<script language="JavaScript" type="text/JavaScript"></script>
<script language="JavaScript" type="text/JavaScript">
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
</script>
<script type='text/javascript'>
 
			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(){
				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_livre').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","Ajax2.php",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('auteur');
				id_gamme = sel.options[sel.selectedIndex].value;
				alert(id_gamme);
				xhr.send("id_gamme="+id_gamme);
			}
		</script>
</head>
<?php
$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");
?>
<body>
<table  align="center" width="500" height="100%"  border="0" cellpadding="0" cellspacing="0"  STYLE="BORDER-COLOR:#EDEDED; border-width:thin;BORDER-LEFT-WIDTH:1PX;BORDER-right-WIDTH:1PX; BORDER-TOP-WIDTH:0PX; BORDER-BOTTOM-WIDTH:1PX; BORDER-STYLE:SOLID;"> 
		  <tr>
		    <td><div id="texte2" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: #000066;">
					Le Home Cin&eacute;ma Bose<br>
					___________________________________________________________________________________________________________
 
					</div><br></td>
					</tr>
					<tr>
					<td>
					<table id="tab" width="800">
						<tr>
							<td>		
<form>
			<fieldset style="width: 800px">
				<legend><div id="texte2" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; color: #333333;">Voici les gammes Home Cin&eacute;ma Bose&reg;:<br></div></legend>
				<label>Gamme:</label>
				<select name='auteur' id='auteur' onchange='go()'>
					<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='livre' >
					<option value='-1'>Selectionnez un produit...</option>
				</select>
				</div>
			</fieldset>
		</form>			
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>		
</body>
</html>

et voici ma page Ajax2.php situé dans le mm reperoitre:

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
 
<?php
echo('yooooooooooooooooooooooooooooooo!');      
        echo "<select name='livre'>";
        echo($_POST["id_gamme"]);
        /if(isset($_POST["id_gamme"])){
                $host = "x";
                $user = "x";
                $bdd = "x";
                $passwd  = "x";
                echo('je passe par la');
                $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");
                $res = mysql_query("SELECT identifiant_produit , nom_produit FROM Bose WHERE id_gamme=".$_POST[["id_gamme"]." ORDER BY nom_produit");
                while($row = mysql_fetch_assoc($res)){
                        echo "<option value='".$row["identifiant_produit"]."'>".$row["nom_produit"]."</option>";
                }
        }
        echo "</select>";
?>

dsl pour les div en bordel avec leur définition jvais men occupé apres, erf!

et le resultat est vu ici:http://www.excelson.com/selection/se...ome_cinema.php

de même que http://www.excelson/com/selection/Ajax2.php

Voila, dis moi si un truc te parait byzarre merci!

**E.Bzz** · 16/05/2008, 09h18

Sans connaitre PHP, je vois 2 erreurs qui doivent planter ton code :

Code :

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

/if(isset($_POST["id_gamme"])){

Code :

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

1
2
3
$res = mysql_query("SELECT identifiant_produit , nom_produit FROM Bose 
WHERE id_gamme=".$_POST[["id_gamme"]." ORDER BY nom_produit");
		while($row = mysql_fetch_assoc($res)){

A+

syntaxe onclick sur un div

JavaScript

Discussions similaires

Partager

Partager