Discussion :

[E.Bzz]

alert me réécris tout le code de ma page jsp

Heu ... on peut voir le code qui génère la réponse Ajax ?
(c'est la seule partie que l'on ai pas vue)

A+

[gwyohm]

En faisant ce test, ça ne passe pas du tout. alert me réécris tout le code de ma page jsp

Le code non évalué de test.jsp ? si oui, c'est qu'il manque quelque chose dans ta jsp pour que le serveur l'interprète ; tu peux poster ce que l'alert te renvoie ?

[james23]

Code :

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

xhr.responseText;

C'est cela qui ne marche pas, l'alert m'envoie tout mon code de ma jsp

[E.Bzz]

Heu ... on peut voir le code qui génère la réponse Ajax ?
(c'est la seule partie que l'on ai pas vue)

A+

One again

[james23]

J'ai montré tout ce que j'avais concernant les liste que je souhaite liée. J'ai rien d'autre.

[E.Bzz]

Dans ton code :

Code :

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

1
2
3
4
5
6
        /* Définition du fichier de traitement */
        var url = "test.jsp"
 
        /* Envoi de la requête à la page de traitement */
 
        requete.open('GET', url, true);

Tu as donc bien une page test.jsp qui génère ta réponse Ajax, non ?

A+

[james23]

c'est sa qui me met mes nouvelle valeur

Code :

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

1
2
3
4
5
6
 
// 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; 
}

[E.Bzz]

Si tu veux récupérer une réponse, il faut bien que tu prévois un traitement serveur qui génère cette réponse.

Je te conseille de refaire un tour par les Cours car il y a visiblement eu quelques loupés

EDIT : Tu vois bien, ici

Code :

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

var tableauValeurs = eval("(" + xhr.responseText + ")");

que le tableau qu'utilise ta fonction est alimenté via le résultat de ta requête Ajax ...
Il faut donc qu'Ajax renvoie une réponse te permettant d'alimenter ce tableau (Lapalisse dixit) et donc, qu'une page soit prévue pour sur le serveur ...

A+

[james23]

Je résume désoler je suis débutant

j'envoi ma requete par le biais d'Ajax, le serveur va l'exécuter mais c'est lui qui va exécuté ma requete SQL pour complèter la deuxieme liste?
Si c'est ça, sa voudrai dire que le serveur possède tous les nom de voies?

[gwyohm]

Ben tu les as

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<%
	DBConnexion dbc_nomVoie = new DBConnexion();
	String sql_nomVoie = "SELECT DISTINCT nom_voie FROM adresse";
	ResultSet resultat_nomVoie = dbc_nomVoie.recupereRequete(sql_nomVoie);
	while(resultat_nomVoie.next())
	{
		out.print("<option>"+resultat_nomVoie.getString("nom_voie")+"</option>");
	}
	dbc_nomVoie.closeConnexion();
%>

il faut juste que tu adaptes ta requetes. Ta JSP test.jsp doit ressembler à ca :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<%
DBConnexion dbc_nomVoie = new DBConnexion();
String sql_nomVoie = "SELECT DISTINCT nom_voie FROM adresse where nom_type_voie='" + request.getParameter("type").replaceAll("'", "''") + "'";
	ResultSet resultat_nomVoie = dbc_nomVoie.recupereRequete(sql_nomVoie);
        out.print("[");
	while(resultat_nomVoie.next())
	{
  out.print("{\"text\": \"" + resultat_nomVoie.getString("nom_voie").replaceAll("\"", "\\\"") + "\",\"value\":\"" + resultat_nomVoie.getString("nom_voie").replaceAll("\"", "\\\"") + "\"}");
	}
        out.print("]");
	dbc_nomVoie.closeConnexion();
%>

[E.Bzz]

j'envoi ma requete par le biais d'Ajax, le serveur va l'exécuter mais c'est lui qui va exécuté ma requete SQL pour complèter la deuxieme liste?

Ajax ne fait qu'appeler une page sur le serveur.
Dans ton, le rôle de cette page est (sera !!) d'interroger la BDD pour y récupérer les nom de voies requis, puis de formater cette réponse de manière à ce que ta fonction onreadystatechange puisse en traiter le résultat.

C'est bien cette page qu'il te manque.

Si c'est ça, sa voudrai dire que le serveur possède tous les nom de voies?

Le serveur non, mais la BDD qu'il a la possibilité d'interroger, oui
Et tu sembles avoir une BDD puisqu'on trouve du SQL dans ton code ...

A+

[E.Bzz]

Ben tu les as

Ah oui, tiens !

+1

A+

[james23]

Peut-tu m'expliquer ton code car je ne le comprend pas :s
désoler de t'embetter

[gwyohm]

Avant tout je voudrais être sur que comme l'a écrit à demi-mots E.Bzz (dans sa grande sagesse), dans cette discussion, il est question de 2 JSPs

• Une qui contient tes 2 composants selects
• Une deuxième qui s'appele test.jsp. Pour faire simple, disons que ces 2 pages ne peuvent pas être la même.

Appelons la premiere formulaire.jsp pour ce message.

Quand dans la page formulaire.jsp tu fais une selection sur la première select, une succession d'appels Javascript conduit le navigateur à faire un appel asynchrone (AJAX) vers la deuxième JSP (test.jsp) en passant en paramètre la valeur choisie par l'utilisateur.
Celle ci va générer via une requete SQL la liste des noms de voies qui ont le type de voie choisi. D'où la requete SQL.

Comme nous avons décidé d'exploiter le resultat au format JSON (serialisation des objets javascript), nous générons ces resultats non pas en HTML, mais au format JSON.
On commence donc par écrire dans le flux de réponse

Code :

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

[

qui margue le début d'un tableau,
puis pour chaque element ramené par la requete, on ecrit

Code :

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

1
2
 
{"text": "nom de la voie 1", value="nom de la voie 1"}

s'il y a un suivant, on met une virgule - Attention j'avais oublié ce point dans ma précédente réponse

Code :

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

1
2
3
4
 
if(resultat_nomVoie.hasNext()) {
out.print(",");
}

à la fin on ferme le tableau

Code :

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

]

Bref la jsp test.jsp doit générer quelque chose comme :

Code :

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

1
2
3
4
5
 
[
{"text": "des champs élysées", "value": "des champs élysées"},
{"text": "de la république", "value": "de la république"}
]

si on lui passe come nom_type_voie "avenue" par exemple.
REMARQUE dans mon code j'ai mis des

Code :

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

.replaceAll("\"", "\\\"")

c'est pour éviter de faire des erreurs de syntaxe si le nome d'une voie contient le caractère "
Une fois que la page va renvoyer ces données, nous allons évaluer cette réponse text pour obtenir un tableau d'objet
EDIT: il n'y a pas de hasNext dans l'API ResultSet. Le développeur java aura rectifié de lui même :

Code :

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

1
2
3
4
5
6
7
8
 
if(resultat_nomVoie.hasNext()) {
out.print(",");
}
// devient
if(! resultat_nomVoie.isLast()) {
out.print(",");
}

[james23]

Je pensais qu'on pouvais tout faire avec une seule page jsp.
Mais que vas contenir alors la deuxième page, je saisi pas trop (elle comportera la deuxième liste déroulante?

[E.Bzz]

Quand dans la page formulaire.jsp tu fais une selection sur la première select, une succession d'appels Javascript conduit le navigateur à faire un appel asynchrone (AJAX) vers la deuxième JSP (test.jsp) en passant en paramètre la valeur choisie par l'utilisateur.
Celle ci va générer via une requete SQL la liste des noms de voies qui ont le type de voie choisi. D'où la requete SQL.

[james23]

Donc dans formulaire.jsp

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
 
<td><input type="text" name="numVoie" size="5" maxlength="10" value = "<%String chp_numV = request.getParameter("numVoie");%>"/></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","/pex/application/traitementOuvPonctuel.jsp?type=" + typeVoie,true);
						xhr.onreadystatechange = function() {
						/*	var responseText = xhr.responseText;
							alert(responseText );*/
							var tableauValeurs = eval("(" + xhr.responseText + ")"); 
							actualiserNomVoie(tableauValeurs); 
						}
						xhr.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>

et dans test.jsp

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
 
<%
	DBConnexion dbc_nomVoie = new DBConnexion();
	String sql_nomVoie = "SELECT DISTINCT nom_voie FROM adresse where nom_type_voie='" + request.getParameter("type").replaceAll("'", "''") + "'";
	ResultSet resultat_nomVoie = dbc_nomVoie.recupereRequete(sql_nomVoie);
	out.print("[");
	while(resultat_nomVoie.next())
	{
		out.print("{\"text\": \"" + resultat_nomVoie.getString("nom_voie").replaceAll("\"", "\\\"") + "\",\"value\":\"" + resultat_nomVoie.getString("nom_voie").replaceAll("\"", "\\\"") + "\"}");
		if(! resultat_nomVoie.isLast()) {
			out.print(",");
		}
 
	}
	out.print("]");
	dbc_nomVoie.closeConnexion();
%>

[gwyohm]

c'est ca ! ... tiens nous au courant...

[gwyohm]

J'ai répondu trop vite...

Code :

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

1
2
3
4
5
6
7
8
function go(typeVoie){
 var xhr = getXhr();
 if(! xhr) {
   alert("problème avec xhr");
}
xhr.open("GET","/pex/application/traitementOuvPonctuel.jsp?type=" + typeVoie,true);
//...

Donc pas test.jsp

[james23]

ça ne fonctionne pas

car lorsque je met alert(xhr.responseText)

il me dit qu'il n'aime pas

Code :

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

1
2
3
4
5
 
 
if(! resultat_nomVoie.isLast()) {
	out.print(",");
		}