[AJAX] 2 listes oui mais pas 3?

Version imprimable

BOnjour,
je voudrais lié plusieurs listes déroulantes entres elles mais je bloque lorsqu' je souhaite en lié 3 :

Voic le code de ma page html où je crée ma page avec mes liste droulantes eet le js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
 
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!-- #include file="../../testeurDeSessionA.asp" -->
<!--#include file="../../connexion.asp" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link media="screen" href="../../style.css" rel="stylesheet" type="text/css" />
<%
requete="SELECT * FROM tblPays"
set rs=server.createObject("adodb.recordset")
rs.open requete, connecteur,1,2,1
%>
 
<html xmlns="http://www.w3.org/1999/xhtml">	
<head>
<script language = "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;
}
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('departement').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","../departement.asp",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, le dep choisi dans le déroulant DEP
	sel = document.getElementById('pays');
	pays = sel.options[sel.selectedIndex].value;
	xhr.send("pays="+pays);
}
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('ville').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","../ville.asp",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, le dep choisi dans le déroulant DEP
	sel = document.getElementById('departement');
	alert(sel);
	dep = sel.options[sel.selectedIndex].value;
	alert("test");
	xhr.send("dep="+dep);
}
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Création d'un compte</title>
</head>
 
<body>
	<div class="titre">CREATION D'UN COMPTE</div>
	<br \><br \>
	<form name="form1" method="post" action="valide_ajout.asp">
		Nom :
		<input type="text" name="nom"/>
		<br \>
		Prénom : 
		<input type="text" name="prenom"/>
		<br \>
		Login :
		<input type="text" name="login"/>
		<br \>
		Mot de passe : 
		<input type="password" name="mdp"/>
		<br \>
		Retapper le mot de passe : 
		<input type="password" name="mdp2"/>
		<br \>
		Droits :<br \>
		Commercial
		<input type="radio" name="droits" value="2" />
		Fournisseur
		<input type="radio" name="droits" value="3" />
		<br \>
		Adresse :
		<input type="text" name="adresse"/>
		<br \>
		Pays :
		<select name="pays" onchange="go()">
		<option value="NULL">Choisissez votre pas</option>
		<%
		if rs.recordcount>0 then rs.movefirst
 		while not rs.eof
		%>
			<option value="<%=rs("PaysId")%>"><%=rs("PaysNom")%></option>
		<%
		rs.movenext
 		wend
		%>
	</select>
	<%
	rs.close
	connecteur.close
	set rs = nothing
	set connecteur = nothing
	%>
		<br \>Departement :
		<div id="departement" style="display:inline">
		<select name="departement" onchange="go2()">
			<option value="NULL">Choisissez votre dep</option>
		</select>
		</div>
		<br \>Ville :
		<div id="ville" style="display:inline">
		<select name="ville">
			<option value="NULL">Choisissez votre ville</option>
		</select>
		</div> 
		<br \>
		Département : 
		<input type="text" name="dep"/>
		<br \>
		Code Postal :
		<input type="text" name="cp"/>
		<br \>
		Ville : 
		<input type="text" name="ville"/>	
		<br \><br \>
			<input type="reset" name="Submit2" value="Effacer" />
			<input type="submit" name="Submit" value="Enregistrer" />
	</form>
	<form name="form2" method="post" action="../default.asp">
			<input type="submit" name="Submit3" value="Annuler" />
	</form>
	<br /><br /><br />
	<a href="../default.asp">retour</a>
</body>
</html>

et mes 2 pages ajax departement et ville :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<%
response.buffer=true
response.write("<select name='departement' onchange='go2()'>")
if request("pays")<>"-1" then%>
<!--#include file="../connexion.asp" -->
	<%set rs=server.createObject("adodb.recordset")
	requete="SELECT * FROM TBLDEPARTEMENT WHERE DepartementPaysId=" & request("pays") & " ORDER BY DepartementCode"
	rs.open requete, connecteur,1,2,1
	while not rs.eof
		response.write("<option value='" & rs("DepartementId") & "'>" & rs("DepartementCode")&" - "&rs("DepartementNom") &"</option>")
		rs.movenext
	wend
	rs.close
	connecteur.close
end if
response.write("</select>")
%>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<%
response.buffer=true
response.write("<select name='ville'>")
if request("dep")<>"-1" then%>
<!--#include file="../connexion.asp" -->
	<%set rs=server.createObject("adodb.recordset")
	requete="SELECT * FROM TBLVILLE WHERE VilleDepartementId=" & request("dep") & " ORDER BY VilleNom"
	rs.open requete, connecteur,1,2,1
	while not rs.eof
		response.write("<option value='" & rs("VilleId") & "'>" & rs("VilleNom")&"</option>")
		rs.movenext
	wend
	rs.close
	connecteur.close
end if
response.write("</select>")
%>

J'ai fait de la même façon pour les 2 cas mais cela ne fonctionn que pour le 1er.
L'erreur vient très certainement de la ligne :

Code:

1
2
 
dep = sel.options[sel.selectedIndex].value;

car l'alert qui suit ne passe pas...
Et en regardant le code source de ma page je vois que quand la page se recharge les code de la liste ne s'ajoute pas, c'est peut être pour cela que je n'arrive pas à récupérer le code de département.

Mais je ne vois pas comment faire?

Merci de votre aide

10/04/2007, 13h41
franfr57

apparemment personne ne sait résoudre ce problème, même dans les livres il n'y a rien...
10/04/2007, 13h50
E.Bzz

Bonjour,
ton id="departement" correspond à un div : renomme le.
Et puis afficher un objet dans un alert() ... :?
Fais un alert(sel.id) au moins pour voir ce que donne la suite ...

En tous cas, attention aux confusions entre name et ID.
Ton select n'a qu'un name="departement" (erreur pardonnée par IE, mais pas par les autres)

A mon avis, c'est ça le bug ...

A+
10/04/2007, 14h09
franfr57

Malheuresement ce n'est pas ça le bug :
j'ai modifier mon name dans mon html et dans mon fichier ajax par dep.
Toujours le même problème!
sel.id donne departement.
Et j'ai l'erreur que sel.options[...] est null!

Merci pour votre aide
11/04/2007, 18h47
franfr57

J'ai trouver ceci sur internet :
http://ajax.asp.net/ajaxtoolkit/Casc...gDropDown.aspx

Mais je ne vois pas comment l'appliquer à mon cas...

SVP aidez moi..
13/04/2007, 13h17
ericduval

J'aurai répondu la même chose que "E.Bzz", il est étonnant qu'en ajoutant
un id différent à chacun de tes "select" tu obtiennes un NULL quand tu accèdes
à leurs attributs. As tu persisté, bien vidé ton cache, as tu une trace à fournir plus
détaillée ?
J'ai parcouru ton code sans trouver l'erreur.

Voilà le code exact de ma page ajout.asp où se trouve les listes déroulantes :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
 
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!-- #include file="../../testeurDeSessionA.asp" -->
<!--#include file="../../connexion.asp" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link media="screen" href="../../style.css" rel="stylesheet" type="text/css" />
<%
requete="SELECT * FROM tblPays"
set rs=server.createObject("adodb.recordset")
rs.open requete, connecteur,1,2,1
%>
 
<html xmlns="http://www.w3.org/1999/xhtml">	
<head>
<script language = "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;
}
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('departement').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","../departement.asp",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, le dep choisi dans le déroulant DEP
	sel = document.getElementById('pays');
	pays = sel.options[sel.selectedIndex].value;
	xhr.send("pays="+pays);
}
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('ville').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","../ville.asp",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, le dep choisi dans le déroulant DEP
	sel = document.getElementById('departement');
	alert(sel.options[sel.selectedIndex].value);
	dep = sel.options[sel.selectedIndex].value;
	alert("test");
	xhr.send("dep="+dep);
}
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Création d'un compte</title>
</head>
 
<body>
	<div class="titre">CREATION D'UN COMPTE</div>
	<br \><br \>
	<form name="form1" method="post" action="valide_ajout.asp">
		Nom :
		<input type="text" name="nom"/>
		<br \>
		Prénom : 
		<input type="text" name="prenom"/>
		<br \>
		Login :
		<input type="text" name="login"/>
		<br \>
		Mot de passe : 
		<input type="password" name="mdp"/>
		<br \>
		Retapper le mot de passe : 
		<input type="password" name="mdp2"/>
		<br \>
		Droits :<br \>
		Commercial
		<input type="radio" name="droits" value="2" />
		Fournisseur
		<input type="radio" name="droits" value="3" />
		<br \>
		Adresse :
		<input type="text" name="adresse"/>
		<br \>
		Pays :
		<select name="pays" onchange="go()">
		<option value="NULL">Choisissez votre pas</option>
		<%
		if rs.recordcount>0 then rs.movefirst
 		while not rs.eof
		%>
			<option value="<%=rs("PaysId")%>"><%=rs("PaysNom")%></option>
		<%
		rs.movenext
 		wend
		%>
	</select>
	<%
	rs.close
	connecteur.close
	set rs = nothing
	set connecteur = nothing
	%>
		<br \>Departement :
		<div id="departement" style="display:inline">
		<select name="dep" onchange="go2()">
			<option value="NULL">Choisissez votre dep</option>
		</select>
		</div>
		<br \>Ville :
		<div id="ville" style="display:inline">
		<select name="ville">
			<option value="NULL">Choisissez votre ville</option>
		</select>
		</div> 
		<br \>
		Département : 
		<input type="text" name="dep"/>
		<br \>
		Code Postal :
		<input type="text" name="cp"/>
		<br \>
		Ville : 
		<input type="text" name="ville"/>	
		<br \><br \>
			<input type="reset" name="Submit2" value="Effacer" />
			<input type="submit" name="Submit" value="Enregistrer" />
	</form>
	<form name="form2" method="post" action="../default.asp">
			<input type="submit" name="Submit3" value="Annuler" />
	</form>
	<br /><br /><br />
	<a href="../default.asp">retour</a>
</body>
</html>

puis le code de ma page departement.asp qui recuperae la liste des département :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<%
response.buffer=true
response.write("<select name='dep' onchange='go2()'>")
if request("pays")<>"-1" then%>
<!--#include file="../connexion.asp" -->
	<%set rs=server.createObject("adodb.recordset")
	requete="SELECT * FROM TBLDEPARTEMENT WHERE DepartementPaysId=" & request("pays") & " ORDER BY DepartementCode"
	rs.open requete, connecteur,1,2,1
	while not rs.eof
		response.write("<option value='" & rs("DepartementId") & "'>" & rs("DepartementCode")&" - "&rs("DepartementNom") &"</option>")
		rs.movenext
	wend
	rs.close
	connecteur.close
end if
response.write("</select>")
%>

et le code de ma page ville qu récupère la liste des villes :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<%
response.buffer=true
response.write("<select name='ville'>")
if request("dep")<>"-1" then%>
<!--#include file="../connexion.asp" -->
	<%set rs=server.createObject("adodb.recordset")
	requete="SELECT * FROM TBLVILLE WHERE VilleDepartementId=" & request("dep") & " ORDER BY VilleNom"
	rs.open requete, connecteur,1,2,1
	while not rs.eof
		response.write("<option value='" & rs("VilleId") & "'>" & rs("VilleNom")&"</option>")
		rs.movenext
	wend
	rs.close
	connecteur.close
end if
response.write("</select>")
%>

Les listes pays et département sont bien lié mais pas département et ville...

Je remarque que lorsque je chosii un pays les département apparaissent sur la page mais pas dans le code html et je me demande si ce n'est pas du à cela? Je ne vois pas comment faire...

C'est urgent, c'est pour un projet, si vous pouviez m'aidez je vous remercirez bien!

06/05/2007, 21h21
tarikOu

je suis bloqué de la même façon.

En fait on n'arrive pas a recuperer les valeurs du second "select" dans la page principale...
Personne ne saurait d'ou vient le problème?
06/05/2007, 23h08
tarikOu

Après moultes recherches j'ai trouvé mon problème.
Je recuperait "null" parce que j'avais mal rempli ma value dans ma liste... :oops: