[AJAX] lier deux liste déroulante JSP + AJAX+ ORACLE

Version imprimable

Voir 40 message(s) de cette discussion en une page

Si je reprend tout

la je complete ma premiere liste

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<td><select name = "typevoie" id ="typevoie" onchange = "getTypeVoie(this)"> 
<%
	DBConnexion dbc_typeVoie = new DBConnexion();
	String sql_typeVoie = "SELECT DISTINCT nom_type_voie FROM adresse";
	ResultSet resultat_typeVoie = dbc_typeVoie.recupereRequete(sql_typeVoie);
	while(resultat_typeVoie.next())
	{
		out.print("<option value = "+ resultat_typeVoie.getString("nom_type_voie") +">"+resultat_typeVoie.getString("nom_type_voie")+"</option>");
 
	}
	dbc_typeVoie.closeConnexion();
%>
</select></td>

Puis je récupère la valeur selectionner de la première liste grace au javascript

Code:

1
2
3
4
5
6
7
 
<script language="javascript">
function getTypeVoie(selTypeVoie)
{
	var typevoie = selTypeVoie.value;
}
</script>

Ensuite je fais ma deuxième liste

Code:

1
2
3
4
5
6
7
 
<td><select name = "nom voie" id ="nom voie"style="width : 160px">
 
	<option value = -1> choissez d'abord un type de voie</option>
 
 
</select></td>

Ensuite j'exécute le code javascript

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
 
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; 
	}
};
 
function go(){
	var xhr = getXhr();
	xhr.open("GET","test.jsp",true);
	requete.onreadystatechange = function() { 
		var tableauValeurs = eval("(" + requete.responseText + ")"); 
		actualiserNomVoie(tableauValeurs); 
	}
	send(null);
	};
 
var actualiserNomVoie = function(tableauVal) {
	 // on recupere le select 
	var selectNomVoie = document.getElementById("nomVoie"); 
	// on vide ce qu'il y avait avant 
	for(var i=selectNomVoie.options.length-1;i>=0;i--) { 
		selectNomVoie.options[i] = null; 
	} 
	// on rempli avec les nouvelles valeurs 
	for(var i=0;i<tableauVal.length; i++) { 
		var opt = new Option(tableauVal[i].text, tableauVal[i].value); 
		selectNomVoie.options[selectNomVoie.options.length] = opt; 
	}
 };

C'est comme cela si je résume bien?

C'est presque ca ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<td><select name = "typevoie" id ="typevoie" onchange = "getTypeVoie(this)"> 
<%
	DBConnexion dbc_typeVoie = new DBConnexion();
	String sql_typeVoie = "SELECT DISTINCT nom_type_voie FROM adresse";
	ResultSet resultat_typeVoie = dbc_typeVoie.recupereRequete(sql_typeVoie);
	while(resultat_typeVoie.next())
	{
		out.print("<option value = "+ resultat_typeVoie.getString("nom_type_voie") +">"+resultat_typeVoie.getString("nom_type_voie")+"</option>");
 
	}
	dbc_typeVoie.closeConnexion();
%>
</select></td>

ca ok

plus bas tu as ca (et tu mets un id et un name valide ;) sinon ca va pas aller plus loin...) :

Code:

1
2
3
4
5
6
<td><select name = "nomVoie" id ="nomVoie"style="width : 160px">
 
	<option value = -1> choissez d'abord un type de voie</option>
 
 
</select></td>

ensuite un bout de js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script language="javascript">
function getTypeVoie(selTypeVoie)
{
	var typevoie = selTypeVoie.value;
        // et là tu déclenches l'appel ajax :
        go(typevoie );
 
}
 
function go(typeVoie){
	var xhr = getXhr();
        // attention à l'url appelée : regarder avec firebug ce qui se passe
	xhr.open("GET","test.jsp?type=" + typeVoie,true);
	requete.onreadystatechange = function() { 
		var tableauValeurs = eval("(" + requete.responseText + ")"); 
		actualiserNomVoie(tableauValeurs); 
	}
	send(null);
	};
</script>

le reste j'ai pas regardé dans le détail mais ca a l'air bon

15/07/2010, 09h08
james23

dans le select des nom de voie, il faut pas que je fasse appel à
"onchange = "ActualiserNomVoie(this)" ??

Pour l'url, faudrait-il pas que je rentre l'url du navigateur en dur? Car test.jsp c'est juste le nom de ma page.

car cela ne fonctionne pas. Il ne rentre pas dans mon fonction getXhr() je sais pas pourquoi
15/07/2010, 14h27
gwyohm
Si tu fais

Code:

onchange = "ActualiserNomVoie(this)"

Il n'y a rien a actualiser puisque la requete AJAX n'a pas été lancée !
l'événement change (onchange) doit déclencher une suite d'opération qui va
1. récupérer la valeur du select
2. déclencher une requete AJAX prenant en compte la nouvelle valeur
3. le retour de cet appel AJAX va remplir le deuxième select
15/07/2010, 14h34
james23

Pourtant je les fait ces 3 démarche que tu as cité mais j'arrive pas a accèder a la méthode getXhr()

Dans le code que j'ai donné en exemple :

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
// appelé par onchange
function getTypeVoie(selTypeVoie)
{
	var typevoie = selTypeVoie.value;
        // et là tu déclenches l'appel ajax :
        // appel go
        go(typevoie );
        
}
 
function go(typeVoie){

        // appel getXhr ...
	var xhr = getXhr();
        // on peut tester que xhr est valide
       if(! xhr) {
         alert("problème avec xhr");
return
       }

        // attention à l'url appelée : regarder avec firebug ce qui se passe
	xhr.open("GET","test.jsp?type=" + typeVoie,true);
	requete.onreadystatechange = function() { 
		var tableauValeurs = eval("(" + requete.responseText + ")"); 
		actualiserNomVoie(tableauValeurs); 
	}
	send(null);
	};
</script>

Mais encore faut-il que getXhr renvoie bien l'objet !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;
};

15/07/2010, 15h09
james23

ça ne fonctionne toujours pas.
15/07/2010, 15h25
gwyohm

tu as tracé avec firebug ? mis des alertes ? ça ne fonctionne pas à quel moment ?
15/07/2010, 15h29
james23

j'ai mis des alert dans la méthode getXhr() aucun ne s'affiche
15/07/2010, 15h34
gwyohm
commence par le début, tu passes par la fonction appelée par le onchange ? tu utilises firebug ? un truc pratique dans chaque fonction, tu commences par
Code:

1 2 3 4 5 6 7 8 function jambon() { try { // le code de ta fonction } catch(err) { console.log(err); } }
Ainsi, s'il y a des erreurs, tu les verra dans la console firebug
15/07/2010, 15h42
james23

je n'ai pas firebug

il faut être sur firefox pour utilisé cela?
15/07/2010, 15h44
gwyohm
oui,

mais c'est pas grave tu remplaces
Code:

1 2 console.log(err);
par
Code:

1 2 alert(err.message);
15/07/2010, 15h56
james23

ça me met requete indéfini pour la fonction getXhr()
15/07/2010, 16h24
E.Bzz

Bonjour,

Citation:

Envoyé par james23

ça me met requete indéfini pour la fonction getXhr()

on peut voir la dernière version de ton code ?

A+

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
 
<td><input type="text" name="numVoie" size="5" maxlength="10" value = ""/></td>
					<td><select name = "typevoie" id ="typevoie" style="width : 120px" onchange = "getTypeVoie(this)">
						<option value = -1>-------type de voie-------</option>
					<%
						DBConnexion dbc_typeVoie = new DBConnexion();
						String sql_typeVoie = "SELECT DISTINCT nom_type_voie FROM adresse";
						ResultSet resultat_typeVoie = dbc_typeVoie.recupereRequete(sql_typeVoie);
						while(resultat_typeVoie.next())
						{
							out.print("<option value = "+resultat_typeVoie.getString("nom_type_voie")+">"+resultat_typeVoie.getString("nom_type_voie")+"</option>");
						}
						dbc_typeVoie.closeConnexion();
 
					%>
					</select></td>
 
					<td><select name = "nomVoie" id ="nomVoie"style="width : 160px">
						<option value = -1>-----------nom de voie-----------</option>
 
					</select></td>
					<script language="javascript">
 
					function getTypeVoie(selTypeVoie)
					{
						var typevoie = selTypeVoie.value;
						go(typevoie );
					}
 
 
					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 = null; 
						}
						return xhr;
					};
 
					function go(typeVoie){
						var xhr = getXhr();
					  	if(! xhr) {
							alert("problème avec xhr");
						}
							// attention à l'url appelée : regarder avec firebug ce qui se passe
						xhr.open("GET","ouvPonctuel.jsp?type=" + typeVoie,true);
						requete.onreadystatechange = function() { 
							var tableauValeurs = eval("(" + requete.responseText + ")"); 
							actualiserNomVoie(tableauValeurs); 
						}
						send(null);
					};
 
					var actualiserNomVoie = function(tableauVal) {
						 // on recupere le select 
						var selectNomVoie = document.getElementById("nomVoie"); 
						// on vide ce qu'il y avait avant 
						for(var i=selectNomVoie.options.length-1;i>=0;i--) { 
							selectNomVoie.options[i] = null; 
						} 
						// on rempli avec les nouvelles valeurs 
						for(var i=0;i<tableauVal.length; i++) { 
							var opt = new Option(tableauVal[i].text, tableauVal[i].value); 
							selectNomVoie.options[selectNomVoie.options.length] = opt; 
						}
					};
 
					</script>

il faut que tu changes

Code:

requete.onreadystatechange

par

Code:

xhr.onreadystatechange

Code:

send(null)

par

Code:

xhr.send(null)

et dans

Code:

1
2
3
4
xhr.onreadystatechange = function() { 
		var tableauValeurs = eval("(" + requete.responseText + ")"); 
		actualiserNomVoie(tableauValeurs); 
	}

Code:

1
2
3
4
xhr.onreadystatechange = function() { 
		var tableauValeurs = eval("(" + xhr.responseText + ")"); 
		actualiserNomVoie(tableauValeurs); 
	}

16/07/2010, 08h50
james23

Effectivement, en changeant cela, je n'ai plus l'erreur mais rien ne se passe dans ma deuxieme liste.

et bien il faut debugger...

Code:

1
2
3
4
5
6
7
8
9
10
11
xhr.onreadystatechange = function() {
  var responseText = xhr.responseText;
  alert(responseText );
  var tableauValeurs = eval("(" + xhr.responseText + ")"); 
  actualiserNomVoie(tableauValeurs); 
}
// ...
 
var actualiserNomVoie = function(tableauVal) {
// pareil, du debug pour voir où ca coince...
};

16/07/2010, 10h54
E.Bzz

Une question bête :mrgreen: :
pourquoi actualiserNomVoie() est déclarée sous forme de variable et non de manière classique comme les autres fonctions ?

EDIT : on ne déclare pas de variable dans une boucle

Code:

var opt = new Option(...)

Cela créé une multidéclaration d'une même variable et constitue une erreur potentielle ...

A+
16/07/2010, 11h03
james23
Citation:
Envoyé par gwyohm

et bien il faut debugger...

Code:

1 2 3 4 xhr.onreadystatechange = function() { var responseText = xhr.responseText; alert(responseText ); var tableauValeurs = eval("(" + xhr.responseText + ")");
En faisant ce test, ça ne passe pas du tout. alert me réécris tout le code de ma page jsp

Voir 40 message(s) de cette discussion en une page