Alimenter une 2ème liste déroulante liée à la première [Résolu]

Claudine · 26/08/2011, 08h06

Bonjour à tous.
J'ai essayé d'adapter les logiciels PHP et Js alimentés par bdd(qui fonctionnent très bien) en ajax mais étant à peine débutant dans ce cas,une âme charitable pourrait-elle m'aider à résoudre le problème:
Je constate que la 2ème liste(selection) reste désespérement vide!
autrement dit probablement que les paramètres qui définissent où ajax doit retouner le résultat sont erronés où mal situés? Pourriez-vous visionner les scripts ci-joints?

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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<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('selection').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxCategories.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('categorie');
				id_categorie = sel.options[sel.selectedIndex].value;
				xhr.send("id_categorie="+id_categorie);
			}
		</script>
	</head>
 
 
 
<body>
 
		<form> <form action='categories.php' method='POST'>
			<fieldset style="width: 500px">
				<legend>Listes liées</legend>
				<label>Categories</label>
				<select name='categorie' id='categorie' 
 
			onChange="makeRequest('ajaxCategories.php','id_liste1','id_div_liste2');">
<!-- on appelle la fct sur le onChange en lui passant l'url du script php appelé,l'id de la liste 1, l'id où il  faut ecrire la réponse-->
 
 
		<option value='-1'>Choisir une catégorie</option>
 
					<?php
 
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'test';
 
// connection à la DB
$link = mysql_connect ($host,$user,$pass) or die ('Erreur : '.mysql_error() );
mysql_select_db($db) or die ('Erreur :'.mysql_error());
 
 
$res= mysql_query ("SELECT * FROM catego ORDER BY categorie");
 
//$res=mysql_query($sql) or die("Erreur de connexion au serveur SQL");
//<option>Sélectionnez la categorie</option>';
while($row = mysql_fetch_assoc($res))
{
	echo"<option value='".$row["id"]."'>".$row["categorie"]."</option>";
 
}
?>
</select>	
 
 
				<label>Selection</label>
				<div id='selection'  style='display:inline'>
				<select name='selection'>
					<option value='-1'>Choisir une selection</option>
				</select>
				<div id="id_div_liste2"><!-- c'est ici que par innerHTML AJAX va ecrire la liste2 --></div>	
 
 
 
			</fieldset>
 
</form>
 
 
 
	</body>
</html>
<?php
//*Fichier ajaxCategories.php
?>
<?php
 
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'test';
 
echo "<select name='selection' id='id_div_liste2'> ";
 
	if(isset($_POST["id_categorie"]))
	{
// connection à la DB
$link = mysql_connect ($host,$user,$pass) or die ('Erreur : '.mysql_error() );
mysql_select_db($db) or die ('Erreur :'.mysql_error());
      $res = mysql_query("SELECT id,selection FROM selections
			WHERE id_categorie='$_POST[id_categorie]' ORDER BY selection");	
$res=mysql_query($sql) or die("Erreur de connexion au serveur SQL");
 
while($row = mysql_fetch_assoc($res))
{
	echo"<option value='".$row["id"]."'>".$row["selection"]."</option>";
}
}
echo"</select>";	
?>

Je suis particulièrement interessé par cet exemple pour comparer la durée de chargement suite à une base de données très importante.
Sincères remerciements à toutes les équipes présentes sur les forums et sur qui on peut compter sans fautes.
Claudine

Torgar · 26/08/2011, 09h56

Bonjour,

Ce n'est peut-être rien, mais , essaye de fermer la connexion à la base de données dans ton fichier ajaxCategories.php via : mysql_close($link);

Code :

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

<select name='categorie' id='categorie' onChange="makeRequest('ajaxCategories.php','id_liste1','id_div_liste2');">

Ne serait-ce pas plutôt la fonction JS go() qu'il faudrait appeler ?

Cordialement,

jreaux62 · 26/08/2011, 10h43

Bonjour Claudine,
je vois que tu est tombée sur le tuto des listes liées en Ajax

J'ai corrigé tes fichiers :
- en ré-organisant le code,
- en mettant de nombreux commentaires,
- en mettant des noms de variables explicites, pour BIEN COMPRENDRE ce qui fait quoi.

ps : le fait que ta 2ème liste s'appelle "sélection" ... et qu'on fait une sélection dans la liste ... ne facilite pas les explications ...

Code php :

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
<?php
// connection à la DB
	include('./connect-bd.php'); 
?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 	<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
	<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;
	};
 
	/*
	* Changer la liste "Selection" après choix dans la liste "Categorie"
	*/
	function changeSelectionParCategorie(id_cat,id_div){
		var id_cat; // valeur de l option ("Categorie") choisie
		var id_div; // id du div dans lequel on remplira la liste des "selections"
 
		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 des "selections"
				document.getElementById(id_div).innerHTML = leselect;
			}
		}
 
		// on defini la methode (post) + le fichier de traitement + asynchrone (true)
		xhr.open("POST","ajaxSelectionsFromCategorie.php",true);
		// ne pas oublier ça pour le post
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// on poste les parametres a transmettre au fichier qui fera le traitement
		// ici : id_cat
		xhr.send("idcatselected="+id_cat);
	};
	</script>
</head>
 
<body>
 
	<form method="post" action="categories.php">
		<fieldset style="width:500px;">
			<legend>Listes liées</legend>
			<label>Catégories : </label>
			<select id="idcategorie" name="categorie" onchange="changeSelectionParCategorie(this.options[this.selectedIndex].value,'iddivselection');">
			<!-- on appelle la fct sur le onchange (valeur-choisie, id-du-div-à-remplir) -->
				<option value="-1">Choisir une catégorie</option>
<?php			// requete : liste de toutes les categories
				$cat_sql = "SELECT * FROM catego ORDER BY categorie;";
				$cat_res = mysql_query($cat_sql) or die("Erreur de connexion au serveur SQL");
				while($cat_row = mysql_fetch_assoc($cat_res))
				{
?>
				<option value="<?php echo $cat_row['id']; ?>"><?php echo $cat_row['categorie']; ?></option>
<?php
				}
?>
			</select>	
			<label>Sélection : </label>
			<div id="iddivselection" style="display:inline;">
			<!-- c'est ici que par innerHTML AJAX va ecrire la liste2 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="idselection" name="selection">
				<option value="-1">Choisissez d'abord une catégorie</option>
			</select>
			</div>	
		</fieldset>
	</form>
 
</body>
</html>

Fichier ajaxSelectionsFromCategorie.php

Code php :

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
<?php // Changer la liste "Selection" après choix dans la liste "Categorie"
 
if(isset($_POST_['idcatselected']) && is_numeric($_POST_['idcatselected']) && $_POST_['idcatselected']!=-1)
{
	// connection à la DB
	include('./connect-bd.php'); 
 
	// recuperation de id categorie + protection contre injection sql
	$id_cat_selected = mysql_real_escape_string($_POST_['idcatselected']);
?>
			<select id="idselection" name="selection">
				<option value="-1">Choisir une sélection</option>
<?php			// requete : la liste des "selections" de la categorie choisie
				$sel_sql = "SELECT id,selection FROM selections 
							WHERE id_categorie = '".$id_cat_selected."' ORDER BY selection;"
							;	
				$sel_res = mysql_query($sel_sql) or die("Erreur de connexion au serveur SQL");
				// liste des options
				while($sel_row = mysql_fetch_assoc($sel_res))
				{
?>
				<option value="<?php echo $sel_row['id']; ?>"><?php echo $sel_row['selection']; ?></option>
<?php
				}
?>
			</select>
<?php
} else { // SI pas de categorie choisie (-1) ou erreur : on remet le select "par defaut" :
?>			<select id="idselection" name="selection">
				<option value="-1">Choisissez d'abord une catégorie</option>
			</select>
<?php
}
?>

EN PRATIQUE :
il est judicieux de mettre le script de connexion à la BDD dans un fichier "à part" :
Fichier connect-bd.php

Code php :

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

1
2
3
4
5
6
7
8
9
<?php
	// connexion à la DB
	$host = 'localhost';
	$user = 'root';
	$pass = '';
	$db = 'test';
	$link = mysql_connect ($host,$user,$pass) or die ('Erreur : '.mysql_error() );
	mysql_select_db($db) or die ('Erreur :'.mysql_error());
?>

... et de le mettre en "include" là où il est nécessaire :

Code php :

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

1
2
3
<?php // connexion à la DB
	include('./connect-bd.php'); 
?>

Claudine · 26/08/2011, 12h51

Bonjour Jreaux62
Je vois que vous ne m'avez pas tenu rigueur du "Jean". Veuillez m'excuser.
Remarquable travail avec les commentaires qui vont me faciliter la tâche de compréhension du fonctionnement.
Comme la liste de selection qui affiche "Choisissez d'abord une catégorie" (je n'avez jamais pensé à cette astuce) reste vide, je suppose qu'il subsiste un petit problème.
A toute fins utiles, je tiens à préciser que la table 'selections' ne contient pas la colonne 'id_selection' mais tout simplement 'id'(c'est une erreur de ma part) et la colonne 'selection'
Ne serait-ce là le problème?
Sincères remerciements pour votre aide précieuse et d'autant plus remarquable que je ne vous attendais pas sur ce forum ajax. Comme je vois vous êtes polyvalent et surtout méthodique et padagogue.
Des qualités dignes d'un professeur du supérieur.
Claudine

jreaux62 · 26/08/2011, 12h58

Citation:

Envoyé par Claudine

A toute fins utiles, je tiens à préciser que la table 'selections' ne contient pas la colonne 'id_selection' mais tout simplement 'id'(c'est une erreur de ma part) et la colonne 'selection'
Ne serait-ce là le problème?

Comment sont liées les 2 tables ????

Dans la table "selection", il faut aussi un champ id_categorie qui va permettre de relier une "sélection" à une "catégorie".

Peut-on voir la structure exacte des 2 tables ?

jreaux62 · 26/08/2011, 13h04

Je te conseille vivement d'utiliser des conventions d'écriture, et des noms de variables/champs/fichiers/fonctions... explicites et clairs.

ex. :

Citation:

table T_CATEGORIES :
id_categorie (int, auto-incrément)
nom_categorie (varchar)

table T_SELECTIONS :
id_selection (int, auto-incrément)
nom_selection (varchar)
id_categorie (int) -> permet de lier les 2 tables)

Ca évite bien des erreurs (d'inattention souvent) et confusions ...

Claudine · 26/08/2011, 14h56

Bonjour jreaux62,
J'ai tenu compte de vos conseils et en consequence effacé et reconstitué les 2 nouvelles tables . C'est plus clair et surtout plus facile .Merci.
J'ai donc modifier en conséquence les codes ci-dessous mais malheureusement la liste des selections reste vide!
Voulez-vous jeter un coup d'oeil pour situer le problème?

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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
 
<?php
// connection à la DB
	include('./connect-bd.php'); 
?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 	<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
	<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;
	};
 
	/*
	* Changer la liste "Selection" après choix dans la liste "Categorie"
	*/
	function changeSelectionParCategorie(id_cat,id_div){
		var id_cat; // valeur de l option ("Categorie") choisie
		var id_div; // id du div dans lequel on remplira la liste des "selections"
 
		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 des "selections"
				document.getElementById(id_div).innerHTML = leselect;
			}
		}
 
		// on defini la methode (post) + le fichier de traitement + asynchrone (true)
		xhr.open("POST","ajaxSelectionsFromCategorie.php",true);
		// ne pas oublier ça pour le post
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// on poste les parametres a transmettre au fichier qui fera le traitement
		// ici : id_cat
		xhr.send("idcatselected="+id_cat);
	};
	</script>
</head>
 
<body>
 
	<form method="post" action="CategoriesBis.php">
		<fieldset style="width:500px;">
			<legend>Listes liées</legend>
			<label>Catégories : </label>
			<select id="id_categorie" name="categorie" onChange="changeSelectionParCategorie(this.options[this.selectedIndex].value,'iddivselection');">
			<!-- on appelle la fct sur le onchange (valeur-choisie, id-du-div-à-remplir) -->
				<option value="-1">Choisir une catégorie</option>
 
 
<?php	
// connection à la DB
	include('./connect-bd.php'); 
 
		// requete : liste de toutes les categories
				$cat_sql = "SELECT * FROM T_CATEGORIES ORDER BY nom_categorie;";
				$cat_res = mysql_query($cat_sql) or die("Erreur de connexion au serveur SQL");
				while($cat_row = mysql_fetch_assoc($cat_res))
				{
?>
				<option value="<?php echo $cat_row['id_categorie']; ?>"><?php echo $cat_row['nom_categorie']; ?></option>
<?php
				}
?>
			</select>	
			<label>Sélection : </label>
			<div id="iddivselection" style="display:inline;">
			<!-- c'est ici que par innerHTML AJAX va ecrire la liste2 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="id_selection" name="selection">
				<option value="-1">Choisissez d'abord une catégorie</option>
			</select>
			</div>	
		</fieldset>
	</form>
 
</body>
</html> 
 
 
<?php
//AjaxSelectionsFromCategorie.php
?>
<?php 
// Changer la liste "Selection" après choix dans la liste "Categorie"
 
if(isset($_POST_['idcatselected']) && is_numeric($_POST_['idcatselected']) && $_POST_['idcatselected']!=-1)
{
	// connection à la DB
	include('./connect-bd.php'); 
 
	// recuperation de id_categorie + protection contre injection sql
	$id_cat_selected = mysql_real_escape_string($_POST_['idcatselected']);
?>
			<select id="id_selection" name="selection">
				<option value="-1">Choisir une sélection</option>
<?php			// requete : la liste des "selections" de la categorie choisie
				$sel_sql = "SELECT id-selection,nom_selection,id_categorie FROM T_SELECTIONS 
							WHERE id_categorie = '".$id_cat_selected."' ORDER BY nom_selection;"
							;	
				$sel_res = mysql_query($sel_sql) or die("Erreur de connexion au serveur SQL");
				// liste des options
				while($sel_row = mysql_fetch_assoc($sel_res))
				{
?>
				<option value="<?php echo $sel_row['id_selection']; ?>"><?php echo $sel_row['nom_selection']; ?></option>
<?php
				}
?>
			</select>
<?php
} else { // SI pas de categorie choisie (-1) ou erreur : on remet le select "par defaut" :
?>			<select id="id_selection" name="selection">
				<option value="-1">Choisissez d'abord une catégorie</option>
			</select>
<?php
}
?>

Merci pour votre collaboration et sincères salutations
Je reposte car j'ai oublié les balises codes
Claudine

jreaux62 · 26/08/2011, 15h12

Il y a un bouton en bas de chacun de TES messages pour les "EDITER" et corriger tes messages...

Question : les tables de la BDD comportent-elles bien des données à afficher ?

Erreur dans AjaxSelectionsFromCategorie.php (id-selection au lieu de id_selection) :

Code :

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

				$sel_sql = "SELECT id-selection,nom_selection,id_categorie FROM T_SELECTIONS

=>

Code :

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

				$sel_sql = "SELECT id_selection, nom_selection, id_categorie FROM T_SELECTIONS

Claudine · 26/08/2011, 15h26

rebonjour,
Oui, la table'T_CATEGORIES' comporte les données métiers,particuliers et en 3 Jardins
De même que la table 'T_SELECTIONS' lesdonnées Boulanger,Plombier etc..correspondant à la categorie Métiers
De plus, la liste catégorie est normalement remplie et affiche bien les données citées ci-dessus, seule la liste selection est vide!
En espérant vous avoir suffisament renseigner.
Merci pour tous ces conseils et au plaisir de vous relire.
Claudine
+ Options
Textes réduits
Textes complets
Relations : clés
Relations : colonnes descriptives
Montrer le contenu binaire
Montrer le contenu BLOB
Montrer le contenu binaire en hexadécimalCacher Transformation id_selection nom_selection id_categorie foreign Key(id_categorie) references T_CATEGORIES
1 Boulanger 1
2 Plombier 1
3 Electricien 1
4 Vente Maisons 2
5 Locations Maisons 2
6 Entretien jardin 3
7 Pavage terrasse 3

jreaux62 · 26/08/2011, 16h19

Cette fois, l'erreur (l'horreur, devrais-je dire) vient de moi :
j'avais écrit (partout !) $_POST_[...] au lieu de $_POST[...] !!

dans ajaxSelectionsFromCategorie.php :

Code :

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

1
2
3
4
5
6
7
if(isset($_POST['idcatselected']) && is_numeric($_POST['idcatselected']) && $_POST['idcatselected']!=-1)
{
	// connection à la DB
	include('./connect-bd.php'); 
	// recuperation de id_categorie + protection contre injection sql
	$id_cat_selected = mysql_real_escape_string($_POST['idcatselected']);
// ......

Voili voila

Claudine · 27/08/2011, 08h12

Bonjour Jreaux62

Code :

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

j'avais écrit (partout !) $_POST_[...] au lieu de $_POST[...] !!

Quand vous dites "partout", je ne vois qu'un seul endroit situé dans'ajaxSelectionsFromCategorie.php
ex:

Code :

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

if(isset($_POST['idcatselected']) && is_numeric($_POST['idcatselected']) && $_POST['idcatselected']!=-1)

Cependant si j'y ajoute le 2ème'!', le script me renvoie un message d'erreur indiquant que ce ! est inattendu
Si je fais le test sur ajaxselections en retirant le 2ème ! il m'affiche alors la 2ème liste vide de mes données de la BDD sauf( choisir d'abord une catégorie).
Apparemment le problème est situé autre part?
L'horreur ,c'est que je vous ennuye de nouveau avec mes problèmes! mais je suis certaine que vous trouverez...!
Sincères remerciements
Claudine

jreaux62 · 27/08/2011, 09h37

Le code corrigé est ici. (lignes 1 et 6)
donc ici aussi :

Code :

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

	$id_cat_selected = mysql_real_escape_string($_POST['idcatselected']);

ps : les ! étaient dans ma phrase, pas dans le code ...

Dans l'autre fichier (principal), ENLEVE (lignes 69-70)

Code :

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

1
2
// connection à la DB
	include('./connect-bd.php');

car c'est DEJA en DEBUT de fichier.

Claudine · 27/08/2011, 10h46

Désolé Jreaux62, j'avais mal lu et vu!
J'ai donc corrigé le tout mais, rien ne change . La liste selection reste vide.
Pour éviter toutes erreur de ma part je joint donc les 2 fichiers corrigés pour que vous puissiez voir une autre erreur éventuelle.

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
 
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 	<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
	<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;
	};
 
	/*
	* Changer la liste "Selection" après choix dans la liste "Categorie"
	*/
	function changeSelectionParCategorie(id_cat,id_div){
		var id_cat; // valeur de l option ("Categorie") choisie
		var id_div; // id du div dans lequel on remplira la liste des "selections"
 
		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 des "selections"
				document.getElementById(id_div).innerHTML = leselect;
			}
		}
 
		// on defini la methode (post) + le fichier de traitement + asynchrone (true)
		xhr.open("POST","ajaxSelectionsFromCategorie.php",true);
 
		// ne pas oublier ça pour le post
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
		// on poste les parametres a transmettre au fichier qui fera le traitement
		// ici : id_cat
		xhr.send("idcatselected="+id_categorie);
	};
	</script>
</head>
 
<body>
 
	<form method="post" action="CategoriesBis.php">
		<fieldset style="width:500px;">
			<legend>Listes liées</legend>
			<label>Catégories : </label>
			<select id="id_categorie" name="categorie" onChange="changeSelectionParCategorie(this.options[this.selectedIndex].value,'iddivselection');">
			<!-- on appelle la fct sur le onchange (valeur-choisie, id-du-div-à-remplir) -->
				<option value="-1">Choisir une catégorie</option>
 
 
<?php	
// connection à la DB
	include('./connect-bd.php'); 
 
		// requete : liste de toutes les categories
				$cat_sql = "SELECT * FROM T_CATEGORIES ORDER BY nom_categorie;";
				$cat_res = mysql_query($cat_sql) or die("Erreur de connexion au serveur SQL");
				while($cat_row = mysql_fetch_assoc($cat_res))
				{
?>
				<option value="<?php echo $cat_row['id_categorie']; ?>"><?php echo $cat_row['nom_categorie']; ?></option>
<?php
				}
?>
			</select>	
			<label>Sélection : </label>
			<div id="iddivselection" style="display:inline;">
			<!-- c'est ici que par innerHTML AJAX va ecrire la liste2 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="id_selection" name="selection">
				<option value="-1">Choisissez d'abord une catégorie</option>
			</select>
			</div>	
		</fieldset>
	</form>
 
</body>
</html>
<?php

Fichier ajaxSelectionsFromCategorie.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
 
<?php 
// Charger la liste "Selection" après choix dans la liste "Categorie"
 
if(isset($_POST['idcatselected']) && is_numeric($_POST['idcatselected']) && $_POST['idcatselected']=-1)
 
{
 
 
	// recuperation de id_categorie + protection contre injection sql
	$id_cat_selected = mysql_real_escape_string($_POST['idcatselected']);
?>
			<select id="id_selection" name="selection">
				<option value="-1">Choisir une sélection</option>
<?php			// requete : la liste des "selections" de la categorie choisie
	$sel_sql = "SELECT * FROM T_SELECTIONS WHERE id_categorie = '".$id_cat_selected."' ORDER BY nom_selection ";	
	$sel_res = mysql_query($sel_sql) or die("Erreur de connexion au serveur SQL");
				// liste des options
	while($sel_row = mysql_fetch_assoc($sel_res))
				{
?>
	<option value="<?php echo $sel_row['id_selection']; ?>"><?php echo $sel_row['nom_selection']; ?></option>
<?php
				}
?>
			</select>
<?php
} else { // SI pas de categorie choisie (-1) ou erreur : on remet le select "par defaut" :
?>			<select id="id_selection" name="nom_selection">
				<option value="-1">Choisissez d'abord une catégorie</option>
			</select>
<?php
}
 
 
 
?>

Merci pour votre aide
Claudine

jreaux62 · 27/08/2011, 11h12

Peux-tu copier-coller ces scripts (sans changer une virgule ?)

Code php :

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
<?php
// connection à la DB
	include('./connect-bd.php'); 
?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 	<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
 
	<script type="text/javascript">
	/* Initialisation XMLHttpRequest (obligatoire) */
	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;
	};
 
	/* Changer la liste "Selection" après choix dans la liste "Categorie" */
	function changeSelectionParCategorie(id_cat1,id_div2){
		var id_cat1; // valeur de l option ("Categorie") choisie
		var id_div2; // id du div dans lequel on remplira la liste des "selections"
 
		var xhr = getXhr();
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200)
			{
				texthtml = xhr.responseText;
				// innerHTML va ajouter les options a la liste des "selections"
				document.getElementById(id_div2).innerHTML = texthtml;
			}
		}
		// on defini la methode (post) + le fichier de traitement + asynchrone (true)
		xhr.open("POST","ajaxSelectionsFromCategorie.php",true);
		// ne pas oublier ça pour le post
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// on poste les parametres a transmettre au fichier qui fera le traitement
		xhr.send("idcatselected="+id_cat1);
	};
	</script>
</head>
 
<body>
 
	<form method="post" action="./CategoriesBis.php">
		<fieldset style="width:500px;">
			<legend>Listes liées</legend>
			<label>Catégories : </label>
			<select id="id_categorie" name="categorie" onChange="changeSelectionParCategorie(this.options[this.selectedIndex].value,'iddiv2');">
			<!-- on appelle la fct sur le onchange (valeur-choisie, id-du-div-à-remplir) -->
				<option value="-1">Choisir une catégorie</option>
<?php			// requete : liste de toutes les categories
				$cat_sql = "SELECT * FROM T_CATEGORIES ORDER BY nom_categorie;";
				$cat_res = mysql_query($cat_sql) or die("Erreur de connexion au serveur SQL");
				while($cat_row = mysql_fetch_assoc($cat_res))
				{
?>
				<option value="<?php echo $cat_row['id_categorie']; ?>"><?php echo $cat_row['nom_categorie']; ?></option>
<?php
				}
?>
			</select>	
 
			<label>Sélection : </label>
			<span id="iddiv2" style="display:inline;"><!-- c'est ici que par innerHTML AJAX va ecrire la liste2 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="idid_selection" name="id_selection">
				<option value="-1">Choisissez d'abord une catégorie</option>
			</select>
			</span>	
 
			<input type="submit" name="btenvoi" value="ok" />
 
		</fieldset>
	</form>
 
</body>
</html>

ajaxSelectionsFromCategorie.php :

Code php :

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
<?php 
// (pour affichage correct des accents)
header('Content-Type: text/html; charset=ISO-8859-15');
 
// Ajax : Charger la liste "Selection" après choix dans la liste "Categorie"
if(isset($_POST['idcatselected']) && is_numeric($_POST['idcatselected']) && $_POST['idcatselected']=-1)
{
	// connection à la DB
	include('./connect-bd.php'); 
 
	// recuperation de id_categorie + protection contre injection sql
	$id_cat_selected = mysql_real_escape_string($_POST['idcatselected']);
?>
			<select id="idid_selection" name="id_selection">
				<option value="-1">Choisir une sélection</option>
<?php			// requete : la liste des "selections" de la categorie choisie
				$sel_sql = "SELECT * FROM T_SELECTIONS WHERE id_categorie = '".$id_cat_selected."' ORDER BY nom_selection ";	
				$sel_res = mysql_query($sel_sql) or die("Erreur de connexion au serveur SQL");
				// liste des options
				while($sel_row = mysql_fetch_assoc($sel_res))
				{
?>
	<option value="<?php echo $sel_row['id_selection']; ?>"><?php echo $sel_row['nom_selection']; ?></option>
<?php
				}
?>
			</select>
<?php
} else { // SI pas de categorie choisie (-1) ou erreur : on remet le select "par defaut" :
?>
			<select id="idid_selection" name="id_selection">
				<option value="-1">Choisissez d'abord une catégorie</option>
			</select>
<?php
} // fin
?>

Claudine · 27/08/2011, 15h53

Bonjour Jraeaux62
C'est gagné! Chapeau pour ce travail remarquable.
Mais pour que cela fonctionne,il faut corriger le ! manquant:

Code :

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

if(isset($_POST['idcatselected']) && is_numeric($_POST['idcatselected']) && $_POST['idcatselected']!=-1)

J'ai vu que vous aviez numéroté les variables id_cat1 pour liste 1(categorie) et id_div2 pour liste 2(selection)
Par contre, je ne comprend pas le code:

Code :

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

<select id="idid_selection" name="id_selection">

Pourquoi pas?:

Code :

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

<select id="id_selection" name="selection"

Je vous suis extrèmement reconnaisante pour cette aide précieuse.
Mille fois merci
Claudine

jreaux62 · 27/08/2011, 16h08

Citation:

Envoyé par Claudine

C'est gagné! Chapeau pour ce travail remarquable.

Code :

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

<select id="idid_selection" name="id_selection">

C'est une convention que j'utilise (choix personnel, pour éviter les confusions, et faciliter le débogage) :

Code :

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

<select id="idladonnee" name="ladonnee">

on peut aussi choisir :

Code :

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

<select id="idladonnee" name="nameladonnee">

Ici, la donnée s'appelle ... id_selection (où id se réfère à l'id dans la bdd)
Ne pas confondre non plus name="id_selection" avec ... name_selection (le "nom" dans la bdd) !

L'important, c'est d'adopter des conventions claires et s'y tenir, afin de se faciliter la vie !

Claudine · 27/08/2011, 17h32

RE
Je viens de tomber sur tutoriel avec xajax dont les performances sont supérieure? Je vais essayer petit à petit d'adapter le programme ajax précédent (catégorie et selection)aux nouvelles exigences Xajax.

Après avoir installer Xajax et démarré les formalités de la 1ère liste alimentée par la bdd (parfait) ,patatra , me voilà déja confrontée à 2 messages d'erreur:

Code :

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

1
2
3
4
 
Deprecated: Assigning the return value of new by reference is deprecated in C:\Program Files\EasyPHP-5.3.3.1\www\infopub\xajax_core\xajax.inc.php on line 360
 
Deprecated: Assigning the return value of new by reference is deprecated in C:\Program Files\EasyPHP-5.3.3.1\www\infopub\xajax_core\xajax.inc.php on line 1305

Bizarre comme code puisque j'ai à peine 50 lignes!
Je ne comprend pas correctement l'anglais et si des fonctions sont dépréciées , comment dois-je remédier? et où à la ligne 360 et 1305?
Vous vous dites certainement, me voilà de nouveau embarqué dans une autre aventure mais je comprendrais volontiers votre abandon.
Néamoins, je ne peux que vous reaffirmé ma totale sympathie pour votre aide précédente.
Claudine

26/08/2011, 15h12	#8
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 994 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 994 Points : 5 787 Points : 5 787	Il y a un bouton en bas de chacun de TES messages pour les "EDITER" et corriger tes messages... Question : les tables de la BDD comportent-elles bien des données à afficher ? Erreur dans AjaxSelectionsFromCategorie.php (id-selection au lieu de id_selection) : Code : Sélectionner tout - Visualiser dans une fenêtre à part $sel_sql = "SELECT id-selection,nom_selection,id_categorie FROM T_SELECTIONS => Code : Sélectionner tout - Visualiser dans une fenêtre à part $sel_sql = "SELECT id_selection, nom_selection, id_categorie FROM T_SELECTIONS __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

26/08/2011, 09h56	#2
Torgar Membre expérimenté Jérémy Développeur Web Inscription : août 2007 Messages : 326 Détails du profil Informations personnelles : Nom : Jérémy Âge : 26 Localisation : France, Gard (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : Industrie Informations forums : Inscription : août 2007 Messages : 326 Points : 535 Points : 535	Bonjour, Ce n'est peut-être rien, mais , essaye de fermer la connexion à la base de données dans ton fichier ajaxCategories.php via : mysql_close($link); Code : Sélectionner tout - Visualiser dans une fenêtre à part <select name='categorie' id='categorie' onChange="makeRequest('ajaxCategories.php','id_liste1','id_div_liste2');"> Ne serait-ce pas plutôt la fonction JS go() qu'il faudrait appeler ? Cordialement,
	00

26/08/2011, 12h51	#4
Claudine Nouveau Membre du Club Inscription : février 2008 Messages : 169 Détails du profil Informations forums : Inscription : février 2008 Messages : 169 Points : 37 Points : 37	Bonjour Jreaux62 Je vois que vous ne m'avez pas tenu rigueur du "Jean". Veuillez m'excuser. Remarquable travail avec les commentaires qui vont me faciliter la tâche de compréhension du fonctionnement. Comme la liste de selection qui affiche "Choisissez d'abord une catégorie" (je n'avez jamais pensé à cette astuce) reste vide, je suppose qu'il subsiste un petit problème. A toute fins utiles, je tiens à préciser que la table 'selections' ne contient pas la colonne 'id_selection' mais tout simplement 'id'(c'est une erreur de ma part) et la colonne 'selection' Ne serait-ce là le problème? Sincères remerciements pour votre aide précieuse et d'autant plus remarquable que je ne vous attendais pas sur ce forum ajax. Comme je vois vous êtes polyvalent et surtout méthodique et padagogue. Des qualités dignes d'un professeur du supérieur. Claudine
	00

26/08/2011, 15h26	#9
Claudine Nouveau Membre du Club Inscription : février 2008 Messages : 169 Détails du profil Informations forums : Inscription : février 2008 Messages : 169 Points : 37 Points : 37	rebonjour, Oui, la table'T_CATEGORIES' comporte les données métiers,particuliers et en 3 Jardins De même que la table 'T_SELECTIONS' lesdonnées Boulanger,Plombier etc..correspondant à la categorie Métiers De plus, la liste catégorie est normalement remplie et affiche bien les données citées ci-dessus, seule la liste selection est vide! En espérant vous avoir suffisament renseigner. Merci pour tous ces conseils et au plaisir de vous relire. Claudine + Options Textes réduits Textes complets Relations : clés Relations : colonnes descriptives Montrer le contenu binaire Montrer le contenu BLOB Montrer le contenu binaire en hexadécimalCacher Transformation id_selection nom_selection id_categorie foreign Key(id_categorie) references T_CATEGORIES 1 Boulanger 1 2 Plombier 1 3 Electricien 1 4 Vente Maisons 2 5 Locations Maisons 2 6 Entretien jardin 3 7 Pavage terrasse 3
	00

27/08/2011, 08h12	#11
Claudine Nouveau Membre du Club Inscription : février 2008 Messages : 169 Détails du profil Informations forums : Inscription : février 2008 Messages : 169 Points : 37 Points : 37	Bonjour Jreaux62 Code : Sélectionner tout - Visualiser dans une fenêtre à part j'avais écrit (partout !) $_POST_[...] au lieu de $_POST[...] !! Quand vous dites "partout", je ne vois qu'un seul endroit situé dans'ajaxSelectionsFromCategorie.php ex: Code : Sélectionner tout - Visualiser dans une fenêtre à part if(isset($_POST['idcatselected']) && is_numeric($_POST['idcatselected']) && $_POST['idcatselected']!=-1) Cependant si j'y ajoute le 2ème'!', le script me renvoie un message d'erreur indiquant que ce ! est inattendu Si je fais le test sur ajaxselections en retirant le 2ème ! il m'affiche alors la 2ème liste vide de mes données de la BDD sauf( choisir d'abord une catégorie). Apparemment le problème est situé autre part? L'horreur ,c'est que je vous ennuye de nouveau avec mes problèmes! mais je suis certaine que vous trouverez...! Sincères remerciements Claudine
	00

27/08/2011, 15h53	#15
Claudine Nouveau Membre du Club Inscription : février 2008 Messages : 169 Détails du profil Informations forums : Inscription : février 2008 Messages : 169 Points : 37 Points : 37	Bonjour Jraeaux62 C'est gagné! Chapeau pour ce travail remarquable. Mais pour que cela fonctionne,il faut corriger le ! manquant: Code : Sélectionner tout - Visualiser dans une fenêtre à part if(isset($_POST['idcatselected']) && is_numeric($_POST['idcatselected']) && $_POST['idcatselected']!=-1) J'ai vu que vous aviez numéroté les variables id_cat1 pour liste 1(categorie) et id_div2 pour liste 2(selection) Par contre, je ne comprend pas le code: Code : Sélectionner tout - Visualiser dans une fenêtre à part <select id="idid_selection" name="id_selection"> Pourquoi pas?: Code : Sélectionner tout - Visualiser dans une fenêtre à part <select id="id_selection" name="selection" Je vous suis extrèmement reconnaisante pour cette aide précieuse. Mille fois merci Claudine
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email