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

Version imprimable

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

16/07/2010, 11h17
E.Bzz

Citation:

Envoyé par james23

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+
16/07/2010, 11h18
gwyohm

Citation:

Envoyé par james23

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 ?
16/07/2010, 14h29
james23

Code:

xhr.responseText;

C'est cela qui ne marche pas, l'alert m'envoie tout mon code de ma jsp
16/07/2010, 14h31
E.Bzz

Citation:

Envoyé par 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 :mrgreen:
16/07/2010, 14h41
james23

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

Dans ton code :

Code:

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+

c'est sa qui me met mes nouvelle valeur

Code:

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; 
}

16/07/2010, 15h01
E.Bzz

:zen:

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:

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+
16/07/2010, 15h19
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?

8O
Ben tu les as

Citation:

Envoyé par james23

Code:

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:

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();
%>

16/07/2010, 15h33
E.Bzz

Citation:

Envoyé par james23

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.

Citation:

Envoyé par james23

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 :aie:
Et tu sembles avoir une BDD puisqu'on trouve du SQL dans ton code ...

A+
16/07/2010, 15h34
E.Bzz

Citation:

Envoyé par gwyohm

8O
Ben tu les as

Ah oui, tiens !

+1 8O

A+
16/07/2010, 15h39
james23

Peut-tu m'expliquer ton code car je ne le comprend pas :s
désoler de t'embetter
16/07/2010, 16h05
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:

[

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

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:

1 2 3 4 if(resultat_nomVoie.hasNext()) { out.print(","); }
à la fin on ferme le tableau

Code:

]

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

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:

.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:

1 2 3 4 5 6 7 8 if(resultat_nomVoie.hasNext()) { out.print(","); } // devient if(! resultat_nomVoie.isLast()) { out.print(","); }
16/07/2010, 16h20
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?
16/07/2010, 16h33
E.Bzz

Citation:

Envoyé par gwyohm

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.

Donc dans formulaire.jsp

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 = "<%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:

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();
%>

16/07/2010, 16h51
gwyohm

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

J'ai répondu trop vite...
Citation:
Envoyé par james23
Code:

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 :aie:

16/07/2010, 16h57
james23
ça ne fonctionne pas

car lorsque je met alert(xhr.responseText)

il me dit qu'il n'aime pas
Code:

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

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