[AJAX] 3 Listes liées Ajax

**Alice_B** · 07/07/2008, 15h17

Bonjour,
Voilà à partir du tuto http://siddh.developpez.com/articles/ajax/#LIV-A j'ai réussi à faire deux listes liées. J'aimerais savoir s'il est possible de le faire avec une troisième, dont le contenu dépendrait de la sélection de la deuxième.

...

**E.Bzz** · 07/07/2008, 15h53

Bonjour,
il suffit de reproduire le fonctionnement que tu as mis en place entre tes listes 1 et 2, mais cette fois entre les listes 2 et 3.
En prenant garde aux doublons dans les noms des variables, objets, fonctions etc.

Qu'est-ce qui te pose problème ?

A+

**Alice_B** · 07/07/2008, 16h09

Justement j'ai repris le même principe...mais ça marche pas des masses:
voici le code 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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title></title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" type="text/css" href="feuille.css" media="screen" />
	   <script type="text/javascript">
	   function textLimit(field, maxlen) {
			if (field.value.length > maxlen) 
			{
			field.value = field.value.substring(0, maxlen);
			alert('Votre texte est trop long!'); 
			}
		}
 
 
			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('rubrique1').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxRubrique.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, la valeur de ce qu'a selestion l'utilisateur dans la liste catégorie
				sel = document.getElementById('categorie');
				nomCategorie = sel.options[sel.selectedIndex].value;
				xhr.send("nomCategorie="+nomCategorie);
			}
			function go2(){
				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('srubrique').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxRubrique1.php",true);
				alert("je passe dans go2!");
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, la valeur de ce qu'a selestion l'utilisateur dans la liste catégorie
				sel = document.getElementById('rubrique1');
				nomRubrique = sel.options[sel.selectedIndex].value;
				xhr.send("nomRubrique="+nomRubrique);
			}			
</script>
   </head>
   <body>
		<form method="post" name = "formuAjoutAsso" action="ajouterAsso.php" class="formulaire" >
		<!--Les coordonnées de l'association-->
			<div id="coordonneesAdmin">
				<div id="contenuCoordonneeAdmin">
 
 
					<p><label>Catégorie: </label>
				<select name='categorie' id='categorie' style='color:#979797;' onchange='go()'>
					<option value='-1'>Catégorie</option>
					<?
						mysql_connect("-----------------", "-------------", "-------"); // Connexion 
						mysql_select_db("--------------"); // Sélection de la base france-asso
						$res = mysql_query("SELECT DISTINCT categorie FROM associations ORDER BY categorie");
						echo "<option value='Aucune'>Aucune</option>";
						while($row = mysql_fetch_assoc($res)){//On met "Aucune" en premiere position donc on ne le reliste pas lors du parcours du résultat de la requête SQL
							if ($row["categorie"]!= 'Aucune'){
								echo "<option value='".$row["categorie"]."'>".$row["categorie"]."</option>";
							}
						}
					 mysql_close(); // Déconnexion de MySQL?>
				</select></p>
 
 
					<p><label>Rubrique : </label>
					<div id="rubrique1">		
					<select name='rubrique' style='color:#979797;' onchange='go2()'>
						<option value='-1'>Choisir une catégorie</option>
						</select></p>
					</div>	
					<p><label for="srubrique">  Sous Rubrique </label> : 
					<div id="srubrique">
					<select name="srubrique" style="border: 1px solid #eaaff3; color:#979797;">
						<option value='-1'>Choisir une rubrique</option>
					</select>
					</div>
					</p>
				</div>
			</div>
			   </body>
</html>

et les 2autres auxquelles je fait appel:
ajaxRubrique1

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
echo "<select name='srubrique' style='color:#979797;'>";
	if(isset($_POST["nomRubrique"])){
		echo "rubrique postée";
		mysql_connect("-----------", "----------", "-------"); // Connexion 
		mysql_select_db("-------------"); // Sélection de la base france-asso
		$resR = mysql_query("SELECT DISTINCT sous_rubrique FROM associations WHERE rubrique like '%".($_POST['nomRubrique'])."' ORDER BY sous_rubrique");
		$resAucune = mysql_query("SELECT COUNT(*) FROM associations WHERE rubrique like '%".($_POST['nomRubrique'])."' AND sous_rubrique='Aucune'");
		$rowAucune =  mysql_fetch_assoc($resAucune); 
		if ($rowAucune["COUNT(*)"] != 0){
			echo "<option value='Aucune'>Aucune</option>";
			while($rowR = mysql_fetch_assoc($resR)){
				if ($rowR["sous_rubrique"]!= 'Aucune'){
					echo "<option value='".($rowR["sous_rubrique"])."'>".ucfirst(formatUrl($rowR["sous_rubrique"]))."</option>";
				}
			}
		}
		else{
			while($rowR = mysql_fetch_assoc($resR)){				
				echo "<option value='".($rowR["sous_rubrique"])."'>".ucfirst(formatUrl($rowR["sous_rubrique"]))."</option>";
			}
		}
	}
	echo "</select>";

ajaxRubrique :

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
echo "<select name='rubrique' style='color:#979797;'>";
	if(isset($_POST["nomCategorie"])){
		mysql_connect("----------", "-----------", "-----------"); // Connexion 
		mysql_select_db("------------"); // Sélection de la base france-asso
		$resR = mysql_query("SELECT DISTINCT rubrique FROM associations WHERE categorie like '%".substr($_POST['nomCategorie'], -3)."' ORDER BY rubrique");
		$resAucune = mysql_query("SELECT COUNT(*) FROM associations WHERE categorie like '%".substr($_POST['nomCategorie'], -3)."' AND rubrique='Aucune'");
		$rowAucune =  mysql_fetch_assoc($resAucune); 
		if ($rowAucune["COUNT(*)"] != 0){
			echo "<option value='Aucune'>Aucune</option>";
			while($rowR = mysql_fetch_assoc($resR)){
				if ($rowR["rubrique"]!= 'Aucune'){
					echo "<option value='".($rowR["rubrique"])."'>".ucfirst(formatUrl($rowR["rubrique"]))."</option>";
				}
			}
		}
		else{
			while($rowR = mysql_fetch_assoc($resR)){				
				echo "<option value='".($rowR["rubrique"])."'>".ucfirst(formatUrl($rowR["rubrique"]))."</option>";
			}
		}
	}
	echo "</select>";

La catégorie et la rubrique ça va mais kan je selectionne la rubrique la sous rubrique ne change pas...

**E.Bzz** · 07/07/2008, 16h21

Tu as oublié l'ID de 'rubrique'

Code :

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

<select name='rubrique' id='rubrique' style='color:#979797;' onchange='go2()'>

Or c'est à lui que ta fonction go2() fait appel.

... enfin, qu'elle devrait

Parce qu'en plus, c'est à 'rubrique1' qu'elle se réfère. Mais il se trouve qu'il s'agit d'un div, et non d'un select

A+

**Alice_B** · 07/07/2008, 17h08

Merci de ta réponse.
Jai modifié qq trucs. Le premier groupby de la fonction go() se fait sur les id du select de catégorie. le 2nd se fait sur l'id de la balise div qui contien le select de rubrique. donc j'ai refait pareil pour go2 : le premier sur rubriqueID qui est dans le select du rubrique et le dexieme qui est l'id du div de sous rubrique.

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
<?php
 
		function formatUrl($texte)
  {
$texte = str_replace("<br->"," ",$texte);
 
	//$texte = str_replace("'","&quot;",$texte);
	$texte = str_replace('é',"&eacute;",$texte
	$texte = str_replace("è","&egrave;",$texte);
	$texte = str_replace("ï","&iuml;",$texte);
	$texte = str_replace("â","&acirc;",$texte);
	$texte = str_replace("ê","&ecirc;",$texte);
	$texte = str_replace("à","&agrave;",$texte);
 
//	Renvoie une chaine en minuscules
$texte = substr(strtolower($texte),0,40);
 
 
   return $texte;
  }
 
 
 
	echo "<select name='srubrique' style='color:#979797;'>";
	if(isset($_POST["nomRubrique"])){
 
		mysql_connect("", "", ""); // Connexion 
		mysql_select_db(""); // Sélection de la base france-asso
		$resR = mysql_query("SELECT DISTINCT sous_rubrique FROM associations WHERE rubrique like '%".($_POST['nomRubrique'])."' ORDER BY sous_rubrique");
		$resAucune = mysql_query("SELECT COUNT(*) FROM associations WHERE rubrique like '%".($_POST['nomRubrique'])."' AND sous_rubrique='Aucune'");
		$rowAucune =  mysql_fetch_assoc($resAucune); 
		if ($rowAucune["COUNT(*)"] != 0){
			echo "<option value='Aucune'>Aucune</option>";
			while($rowR = mysql_fetch_assoc($resR)){
				if ($rowR["sous_rubrique"]!= 'Aucune'){
					echo "<option value='".($rowR["sous_rubrique"])."'>".ucfirst(formatUrl($rowR["sous_rubrique"]))."</option>";
				}
			}
		}
		else{
			while($rowR = mysql_fetch_assoc($resR)){				
				echo "<option value='".($rowR["sous_rubrique"])."'>".ucfirst(formatUrl($rowR["sous_rubrique"]))."</option>";
			}
		}
	}
	echo "</select>";
 
	// On est obligé de faire la recherche que sur les 3 derniers caratères de la catégorie à cause d'un problème d'accent...
 
?>

ajaxRubrique.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
<?php
 
		function formatUrl($texte)
  {
$texte = str_replace("<br->"," ",$texte);
 
	//$texte = str_replace("'","&quot;",$texte);
	$texte = str_replace('é',"&eacute;",$texte);
	$texte = str_replace("è","&egrave;",$texte);
	$texte = str_replace("ï","&iuml;",$texte);
	$texte = str_replace("â","&acirc;",$texte);
	$texte = str_replace("ê","&ecirc;",$texte);
	$texte = str_replace("à","&agrave;",$texte);
 
//	Renvoie une chaine en minuscules
$texte = substr(strtolower($texte),0,40);
 
 
   return $texte;
  }
 
 
 
	echo "<select name='rubrique'  id='rubriqueID' style='color:#979797;'>";
	if(isset($_POST["nomCategorie"])){
		mysql_connect("", "", ""); // Connexion 
		mysql_select_db(""); // Sélection de la base france-asso
		$resR = mysql_query("SELECT DISTINCT rubrique FROM associations WHERE categorie like '%".substr($_POST['nomCategorie'], -3)."' ORDER BY rubrique");
		$resAucune = mysql_query("SELECT COUNT(*) FROM associations WHERE categorie like '%".substr($_POST['nomCategorie'], -3)."' AND rubrique='Aucune'");
		$rowAucune =  mysql_fetch_assoc($resAucune); 
		if ($rowAucune["COUNT(*)"] != 0){
			echo "<option value='Aucune'>Aucune</option>";
			while($rowR = mysql_fetch_assoc($resR)){
				if ($rowR["rubrique"]!= 'Aucune'){
					echo "<option value='".($rowR["rubrique"])."'>".ucfirst(formatUrl($rowR["rubrique"]))."</option>";
				}
			}
		}
		else{
			while($rowR = mysql_fetch_assoc($resR)){				
				echo "<option value='".($rowR["rubrique"])."'>".ucfirst(formatUrl($rowR["rubrique"]))."</option>";
			}
		}
	}
	echo "</select>";
 
	// On est obligé de faire la recherche que sur les 3 derniers caratères de la catégorie à cause d'un problème d'accent...
 
?>

ajaxRubrique1.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
<?php
 
		function formatUrl($texte)
  {
$texte = str_replace("<br->"," ",$texte);
 
	//$texte = str_replace("'","&quot;",$texte);
	$texte = str_replace('é',"&eacute;",$texte
	$texte = str_replace("è","&egrave;",$texte);
	$texte = str_replace("ï","&iuml;",$texte);
	$texte = str_replace("â","&acirc;",$texte);
	$texte = str_replace("ê","&ecirc;",$texte);
	$texte = str_replace("à","&agrave;",$texte);
 
//	Renvoie une chaine en minuscules
$texte = substr(strtolower($texte),0,40);
 
 
   return $texte;
  }
 
 
 
	echo "<select name='srubrique' style='color:#979797;'>";
	if(isset($_POST["nomRubrique"])){
 
		mysql_connect("", "", ""); // Connexion 
		mysql_select_db(""); // Sélection de la base france-asso
		$resR = mysql_query("SELECT DISTINCT sous_rubrique FROM associations WHERE rubrique like '%".($_POST['nomRubrique'])."' ORDER BY sous_rubrique");
		$resAucune = mysql_query("SELECT COUNT(*) FROM associations WHERE rubrique like '%".($_POST['nomRubrique'])."' AND sous_rubrique='Aucune'");
		$rowAucune =  mysql_fetch_assoc($resAucune); 
		if ($rowAucune["COUNT(*)"] != 0){
			echo "<option value='Aucune'>Aucune</option>";
			while($rowR = mysql_fetch_assoc($resR)){
				if ($rowR["sous_rubrique"]!= 'Aucune'){
					echo "<option value='".($rowR["sous_rubrique"])."'>".ucfirst(formatUrl($rowR["sous_rubrique"]))."</option>";
				}
			}
		}
		else{
			while($rowR = mysql_fetch_assoc($resR)){				
				echo "<option value='".($rowR["sous_rubrique"])."'>".ucfirst(formatUrl($rowR["sous_rubrique"]))."</option>";
			}
		}
	}
	echo "</select>";
 
	// On est obligé de faire la recherche que sur les 3 derniers caratères de la catégorie à cause d'un problème d'accent...
 
?>

**Alice_B** · 07/07/2008, 17h10

erf le premier code c plutot ça :

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
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('rubrique1').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxRubrique.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, la valeur de ce qu'a selestion l'utilisateur dans la liste catégorie
				sel = document.getElementById('categorie');
				nomCategorie = sel.options[sel.selectedIndex].value;
				xhr.send("nomCategorie="+nomCategorie);
			}
			function go2(){
				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('srubrique').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxRubrique1.php",true);
				alert("je passe dans go2!");
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, la valeur de ce qu'a selestion l'utilisateur dans la liste rubrique
				sel = document.getElementById('rubriqueID');
				nomRubrique = sel.options[sel.selectedIndex].value;
				xhr.send("nomRubrique="+nomRubrique);
			}
 
			<p><label>Catégorie: </label>
				<select name='categorie' id='categorie' style='color:#979797;' onchange='go()'>
					<option value='-1'>Catégorie</option>
					<?
						mysql_connect("", "", ""); // Connexion 
						mysql_select_db("france-asso"); // Sélection de la base france-asso
						$res = mysql_query("SELECT DISTINCT categorie FROM associations ORDER BY categorie");
						echo "<option value='Aucune'>Aucune</option>";
						while($row = mysql_fetch_assoc($res)){//On met "Aucune" en premiere position donc on ne le reliste pas lors du parcours du résultat de la requête SQL
							if ($row["categorie"]!= 'Aucune'){
								echo "<option value='".$row["categorie"]."'>".$row["categorie"]."</option>";
							}
						}
					 mysql_close(); // Déconnexion de MySQL?>
				</select></p>
 
 
					<p><label>Rubrique : </label>
					<div id="rubrique1">		
					<select name='rubrique' id="rubriqueID" style='color:#979797;' onchange='go2()'>
						<option value='-1'>Choisir une catégorie</option>
						</select></p>
					</div>	
					<p><label for="srubrique">Sous Rubrique </label> : 
					<div id="srubrique">
					<select name="srubrique" style="border: 1px solid #eaaff3; color:#979797;">
						<option value='-1'>Choisir une rubrique</option>
					</select>
					</div>
					</p>

**E.Bzz** · 07/07/2008, 17h23

Ca prête à confusion ça (au moins pour IE qui confond name et ID) :

Code :

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

1
2
<div id="srubrique">
<select name="srubrique" style="border: 1px solid #eaaff3; color:#979797;">

Mieux vaudrait

Code :

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

1
2
<div id="div_srubrique">
<select name="srubrique" id="srubrique" style="border: 1px solid #eaaff3; color:#979797;">

EDIT : et utiliser le même type de nomenclature pour les 3 select : ça serait plus facile de s'y retrouver

A+

**Alice_B** · 08/07/2008, 12h24

C'est vrai que c'est un peu confu.
Sinon ce n'est possible de le faire à partir de l'exemple du tutoriel?

**E.Bzz** · 08/07/2008, 12h27

Envoyé par Alice_B

C'est vrai que c'est un peu confu.
Sinon ce n'est possible de le faire à partir de l'exemple du tutoriel?

Il vaut mieux l'adapter à ton cas que le prendre tel qu'elle : ce n'est qu'un tuto et pas une solution universelle clé en main

A+

**Alice_B** · 08/07/2008, 13h36

Oui c'est vrai. Bon ultime tentative avec un code un peu moins sale :

essai.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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<?php
 
session_start(); 
 
if (!isset($_SESSION['OK']) and $_SESSION['OK']==''){
 
	include("authentification.php");
 
	}
	else
	{?>
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>France Association - Ajouter mon Association</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
	   <script type="text/javascript">
	   function textLimit(field, maxlen) {
			if (field.value.length > maxlen) 
			{
			field.value = field.value.substring(0, maxlen);
			alert('Votre texte est trop long!'); 
			}
		}
 
 
			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-rubrique').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxRubrique.php",true);
				alert("je passe dans go!");
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, la valeur de ce qu'a selestion l'utilisateur dans la liste catégorie
				sel = document.getElementById('categorie');
				nomCategorie = sel.options[sel.selectedIndex].value;
				xhr.send("nomCategorie="+nomCategorie);
			}
			function go2(){
				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-srubrique').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxSRubrique.php",true);
				alert("je passe dans go2!");
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, la valeur de ce qu'a selestion l'utilisateur dans la liste rubrique
				sel = document.getElementById('rubrique');
				nomRubrique = sel.options[sel.selectedIndex].value;
				xhr.send("nomRubrique="+nomRubrique);
			}
 
 
</script>
   </head>
   <body>
		<!-- header-->
 
		<!--CONTENU DE LA PAGE-->
		<div id="contenu">
		<form method="post" name = "formuAjoutAsso" action="" class="formulaire" >
		<!--Les coordonnées de l'association-->
			<div id="coordonneesAdmin">
				<div id="contenuCoordonneeAdmin">					
					<p><label>Catégorie: </label>
				<select name='categorie' id='categorie' style='color:#979797;' onchange='go();'>
					<option value='-1'>Catégorie</option>
					<?
						mysql_connect("", "", ""); // Connexion 
						mysql_select_db(""); // Sélection de la base france-asso
						$res = mysql_query("SELECT DISTINCT categorie FROM associations ORDER BY categorie");
						echo "<option value='Aucune'>Aucune</option>";
						while($row = mysql_fetch_assoc($res)){//On met "Aucune" en premiere position donc on ne le reliste pas lors du parcours du résultat de la requête SQL
							if ($row["categorie"]!= 'Aucune'){
								echo "<option value='".$row["categorie"]."'>".$row["categorie"]."</option>";
							}
						}
					 mysql_close(); // Déconnexion de MySQL?>
				</select></p>
 
 
					<p><label>Rubrique : </label>
					<div id="div-rubrique" style="position:absolute; top:50px; left:80px;">		
					<select name='rubrique' id="rubrique" style='color:#979797;' onchange='go2();'>
						<option value='-1'>Choisir une catégorie</option>
						</select></p>
					</div>	
 
 
					<p><label for="srubrique">Sous Rubrique </label> : 
					<div id="div-srubrique" style="position:absolute; top:88px; left:105px;">
					<select name="srubrique" id="srubrique" style="color:#979797;">
						<option value='-1'>Choisir une rubrique</option>
					</select>
					</div>
					</p>					
				</div>
			</div>
 
 
			</form>
 
		</div>
 
		<!--pied de page-->		
 
   </body>
</html>
<?
}
?>

ajaxRubrique.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
echo "<select name='rubrique' id='rubrique' style='color:#979797;'>";
	if(isset($_POST["nomCategorie"])){
		mysql_connect("", "", ""); // Connexion 
		mysql_select_db(""); // Sélection de la base france-asso
		$resR = mysql_query("SELECT DISTINCT rubrique FROM associations WHERE categorie like '%".substr($_POST['nomCategorie'], -3)."' ORDER BY rubrique");
		$resAucune = mysql_query("SELECT COUNT(*) FROM associations WHERE categorie like '%".substr($_POST['nomCategorie'], -3)."' AND rubrique='Aucune'");
		$rowAucune =  mysql_fetch_assoc($resAucune); 
		if ($rowAucune["COUNT(*)"] != 0){
			echo "<option value='Aucune'>Aucune</option>";
			while($rowR = mysql_fetch_assoc($resR)){
				if ($rowR["rubrique"]!= 'Aucune'){
					echo "<option value='".($rowR["rubrique"])."'>".ucfirst(formatUrl($rowR["rubrique"]))."</option>";
				}
			}
		}
		else{
			while($rowR = mysql_fetch_assoc($resR)){				
				echo "<option value='".($rowR["rubrique"])."'>".ucfirst(formatUrl($rowR["rubrique"]))."</option>";
			}
		}
	}
	echo "</select>";

ajaxSRubrique.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
	echo "<select name='srubrique' style='color:#979797;'>";
	if(isset($_POST["nomRubrique"])){
 
		mysql_connect("", "", ""); // Connexion 
		mysql_select_db(""); // Sélection de la base france-asso
		$resR = mysql_query("SELECT DISTINCT sous_rubrique FROM associations WHERE rubrique like '%".($_POST['nomRubrique'])."' ORDER BY sous_rubrique");
		$resAucune = mysql_query("SELECT COUNT(*) FROM associations WHERE rubrique like '%".($_POST['nomRubrique'])."' AND sous_rubrique='Aucune'");
		$rowAucune =  mysql_fetch_assoc($resAucune); 
		if ($rowAucune["COUNT(*)"] != 0){
			echo "<option value='Aucune'>Aucune</option>";
			while($rowR = mysql_fetch_assoc($resR)){
				if ($rowR["sous_rubrique"]!= 'Aucune'){
					echo "<option value='".($rowR["sous_rubrique"])."'>".ucfirst(formatUrl($rowR["sous_rubrique"]))."</option>";
				}
			}
		}
		else{
			while($rowR = mysql_fetch_assoc($resR)){				
				echo "<option value='".($rowR["sous_rubrique"])."'>".ucfirst(formatUrl($rowR["sous_rubrique"]))."</option>";
			}
		}
	}
	echo "</select>";

mais ça ne donne toujours rien cf ici :http://france-asso.fr/essai.php

En plus ma fonction go2 n'est pas appelée, jai mi un alert dans chacun d'elle et il n' y a que 'go' qui est appelée.

**E.Bzz** · 08/07/2008, 13h53

Envoyé par Alice_B

En plus ma fonction go2 n'est pas appelée, jai mi un alert dans chacun d'elle et il n' y a que 'go' qui est appelée.

Il faudrait peut-être générer le onchange dans le 2° <select> :

Code :

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

echo "<select name='rubrique' id='rubrique' style='color:#979797;' onchange='go2();'>";

A+

**Alice_B** · 08/07/2008, 14h24

Oui c 'est vrai...mais même avec ça, ça change rien...Je suis limite convaincu que c'est pas possible de faire 3 listes liées de cette façon.

**E.Bzz** · 08/07/2008, 14h33

Envoyé par Alice_B

Oui c 'est vrai...mais même avec ça, ça change rien...Je suis limite convaincu que c'est pas possible de faire 3 listes liées de cette façon.

Quelle persévérance

En faisant une petite recherche sur ce forum, tu verras que c'est possible ...

Tu n'as pas corrigé la version en ligne pour appeler go2() ?

A+

**Alice_B** · 08/07/2008, 17h23

Si c'est corrigé, regarde le code source tu verras.
Je peux pas me permettre de passer 20 ans sur un pauvre problème...
Surtout que d'autres l'ont et n'ont pas plus de réponses...

http://www.developpez.net/forums/sho...s+li%E9es+ajax

**Alice_B** · 09/07/2008, 12h06

Le problème c'est que ma fonction go2 n'est pas appelée, ce qui semble normal lorque l'on regarde le code html : les options de mon 2ème select ne s'affichent pas du coup l'évènement 'onchange' ne se produit pas vraiment.. comment faire pour récupérer vraiment les options trouvées et les mettre sur mapage html???????????????????

**E.Bzz** · 09/07/2008, 12h10

Envoyé par Alice_B

Le problème c'est que ma fonction go2 n'est pas appelée, ce qui semble normal lorque l'on regarde le code html : les options de mon 2ème select ne s'affichent pas du coup l'évènement 'onchange' ne se produit pas vraiment..

Ben chez moi elles s'affichent les options du 2° select (hier, en tous cas, mais pas re-testé). Le problème était plutôt que ton php ne générait pas le onchange dans la balise ...

Sinon, avec Ajax, c'est normal que tu ne vois pas les modif en faisant afficher la source de la page : elle n'est jamais modifiée (sauf à utiliser les debugger IE ou FF)

A+

**Alice_B** · 09/07/2008, 16h04

Envoyé par E.Bzz

Ben chez moi elles s'affichent les options du 2° select (hier, en tous cas, mais pas re-testé). Le problème était plutôt que ton php ne générait pas le onchange dans la balise ...

A+

oui elles s'affichentdans la liste déroulante mais pas dans le code source de la page html...

**E.Bzz** · 09/07/2008, 16h20

Envoyé par Alice_B

oui elles s'affichentdans la liste déroulante mais pas dans le code source de la page html...

Envoyé par E.Bzz

Sinon, avec Ajax, c'est normal que tu ne vois pas les modif en faisant afficher la source de la page : elle n'est jamais modifiée (sauf à utiliser les debugger IE ou FF)

sous-entendu : après une mise à jour via Ajax, comme dans ton cas ...
Tu ne "verras" toujours que le code initial.

Bref, à part les "apparences" du code source, tu en es où ?

A+

**Alice_B** · 09/07/2008, 18h03

j'ai cherché sur le forum comme tu m'as conseillé, beaucoup de gens ont cherché à faire 3 listes liées mais peu y sont arrivés et pour ceux qui ont réussi ils n'explicitent pas vraiment leur solution... Par exemple ici http://www.developpez.net/forums/sho...d.php?t=498605

**E.Bzz** · 09/07/2008, 18h09

Envoyé par Alice_B

mais peu y sont arrivés et pour ceux qui ont réussi ils n'explicitent pas vraiment leur solution...

C'est parce qu'il n'y a pas de problème de fond.
Il faut juste reproduire le traitement des listes 1 et 2 avec les listes 2 et 3.

Donc bien comprendre le fonctionnement pour faire attention à tout.

Je l'ai surtout aidée pour des problèmes de syntaxe et d'objets mal référencés, mais il n'y a rien à savoir de plus que ce qu'il y a déjà dans ton code existant.

Courage

A+

[AJAX] 3 Listes liées Ajax

JavaScript

Discussions similaires

Partager

Partager