[AJAX] ajax,struts et liste deroulante

Version imprimable

bonjours,
je travaille avec struts et j'ai une liste deroulante que je remplis de la base de donnée comme suit:

Code:

1
2
3
4
5
6
7
8
9
10
<td class="Style2"> Objectifs individuel :</td>
		<td>
                        <select name="objIndiv" id="objIndiv" onChange='update()'>
                        <%Iterator it = GetList.getObjByUserId(id).iterator(); 
		String ob=null;
		while(it.hasNext()){
		ObjIndiv objindiv =(ObjIndiv)it.next();			             ob=objindiv.getLibelleObjIndiv();		
                          %>			
<option type="text" size="50" value="<%=objindiv.getLibelleObjIndiv()%>"><%=ob %> </option>
		<%}%> </select>  </td>

j'ai besoin de recuperer l'id de la valeur selectionnée dans la liste ,pour pouvoir mettre à jours les autres listes qui s'obtiennent par une methode utilisant cet id.

je suis debutante dans ajax,j'ai essayé ceci:

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
<script type="text/javascript">
 
	//creer l'objet XMLHttpRequest pour pouvoir utiliser Ajax
	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 ActiveXObjec("Microsoft.XMLHTTP");}
			                              }
		  else { // XMLHttpRequest non supporté par le navigateur 
 alert("Votre navigateur ne supporte pas les objetsXMLHTTPRequest..."); 
			  xhr = false; 
	  } 
                                            return xhr
		                          	}
	   // Méthode qui sera appelée sur changement du select
 
	function update(){
	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('objIndiv').innerHTML = leselect;
 
						}
						}
	// Ici on va voir comment faire du post
	xhr.open("POST","/update",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, l'id de l'objectif individuel
	sel = document.getElementById('objIndiv');
	libelleObj = sel.options[sel.selectedIndex].value;
	xhr.send("idObjIndiv="+idObjIndiv);
 
			}
		</script>

mais je n'ai pas su comment recuperer l idObjIndiv
en fait je suis perdue,ce que je voulais c'est que la mise à jour se fait dans la meme page.

30/09/2008, 12h55
witch

Code:

xhr.open("POST","/update",true);

tu fais quoi avec cette fonction, je ne comprends ou tu veux envoyer ton post là?
normalement on utilise cette fonction pour envoyer les données à une page précise.
cette fonction doit contenir comme deuxième paramètre, une page executable .js je suppose pour ton cas, c'est là ou tu vas récupérer la variable envoyé par le POST, en java on utilise souvent request.getAttribute("le nom de la variable")
c'est dans cette page ou tu vas utiliser ça, pour faire l'ajout des données que cette variable contient.
tu fais déjà un innerHTML sur l'objet "objIndiv"

Code:

document.getElementById('objIndiv').innerHTML = leselect;

déjà définit dans :

Code:

<select name="objIndiv" id="objIndiv" onChange='update()'>

la page reponse.js, par exemple va contenir un ajout de la variable renvoyée, donc quelque chose de ce genre :

Code:

<option value=<% request.getAttribute("le nom de la variable") %>>=<% request.getAttribute("le nom de la variable") %></option>

je ne suis pas sure que je suis dans la bonne voie avec ce que tu veux faire, mais c'est ce qui est basique à savoir en ajax, ça permet un rechargement d'une partie de la page au lieu de toute la page, donc un envoie asynchrone et une réponse rapide.
je t'invite à des tutoriels, qui sont très intéressants sur developpez.com ;)

bon courage

++
30/09/2008, 13h46
emenemza

Code:

xhr.open("POST","/update",true);

en fait /update est le path de l'action,ou peut etre devrais je faire /update.do
en fait j'ai voulu recuperer la valeur dans l'action qui va par la suite appeler une page jsp ou la valeur devrait etre utilisée,sinon est ce que je peux faire directement

Code:

xhr.open("POST","page2.jsp",true);

et dans ce cas est ce que la page2 sera automatiquement chargée apres la soumission de la page ou il y'a le script?

Bon,permettez moi de vous expliquer ce que je veux faire,peut etre que ma demarche est erronée depuis le debut,
alors,j'ai une page ou il ya 3 listes deroulantes,disons 2 pour simplifier,dans la première il ya les objectifs individuels et dans la 2ème il ya les orienttations.lorsque je selectionne l'objectif individuel,l'orientation doit changer,mais ce qui est selectionné c'est le libelleObjIndiv,or pour recuperer l'orientation j'ai besoin de l'id.
si ça peut etre dans le meme formulaire c'est bien,si non je peux mettre une autre page ou je fais un autre traitement(mais la meme interface)pour recuperer l'orientation par le libellé si je peux pas avoir l'id

j'espère que vous y voyer mieux ainsi,merci bcp pour votre aide
30/09/2008, 14h58
witch
Citation:

sinon est ce que je peux faire directement

Code :
xhr.open("POST","page2.jsp",true);

Oui, c'est bien comme ça qu'on pourra executer du script, pour une réponses à une requete asynchrone

Citation:

lorsque je selectionne l'objectif individuel,l'orientation doit changer,mais ce qui est selectionné c'est le libelleObjIndiv,or pour recuperer l'orientation j'ai besoin de l'id.
Code:

1 2 ....<option type="text" size="50" value="<%=objindiv.getLibelleObjIndiv()%>"><%=ob %> </option> <%}%> ...
Si t'as besoin du ID tu peux le mettre à la place du value de l'option, comme ça tu pourras le récuperer pour l'utiliser dans la deuxième requete dans ta page "page2.jsp", et le libellé tu l'affichera entre la balise option à la place de la variable "ob" je suppose qu'elle contient aussi le libellé, non?

Pour ce que tu cherches à faire, c'est faisable, il suffit que tu arrives à terminer cette tache tout seul, ce n'est pas du tout compliqué :)

++

bonjours,
merci bcp de m'avoir repondu.Voici ce que j'ai fais:

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
<script type="text/javascript">
 
	//creer l'objet XMLHttpRequest pour pouvoir utiliser Ajax
	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 ActiveXObjec("Microsoft.XMLHTTP");}
			                              }
		  else { // XMLHttpRequest non supporté par le navigateur 
 alert("Votre navigateur ne supporte pas les objetsXMLHTTPRequest..."); 
			  xhr = false; 
	  } 
                                            return xhr
		                          	}
	   // Méthode qui sera appelée sur changement du select
 
	function update(){
 
	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;
 
 
 
						}
						}
 
	// Ici on va voir comment faire du post
    xhr.open("POST","userFiche.jsp",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, l'id de l'objectif individuel
	sel = document.getElementById('objIndiv');
	code = sel.options[sel.selectedIndex].value;
	xhr.send("codeObjIndiv="+code);
 
			}
		</script>

et pour le recuperer:

Code:

1
2
3
4
5
6
7
8
9
<%String code=(String)request.getAttribute("codeObjIndiv"); %>
 <%	Iterator it3 = GetList.getPhaseByCode(code).iterator(); 
		String num=null;
		while(it3.hasNext()){
		Phase phase=(Phase)it3.next();
		num=phase.getLibellePhase();
%>			
<input value="<%=phase.getLibellePhase()%>" name="nomPhase" id='phase'/>
	  <%}%>  </th>

mais j'ai cette erreur: java.lang.NullPointerException
ce qui veux dire que je ne recupère rien dans la variable code!!
une autre question qui me tracasse:

Code:

leselect = xhr.responseText;

c'est lui qui censsé recevoir la reponse du serveur,quel est son role ici??

NB:tous les codes sont dans la meme page userFiche.jsp

pardonner mes questions bêtes,mais il se trouve que c'est mon premier script :oops:

02/10/2008, 18h23
witch

Citation:

Envoyé par emenemza

NB:tous les codes sont dans la meme page userFiche.jsp

ça

Citation:

Envoyé par emenemza

NB:tous les codes sont dans la meme page userFiche.jsp

ça veut dire qu'il s'agit de la même page, que c'elle sur le script java 8O

Code:

xhr.open("POST","userFiche.jsp",true);

La page ou tu envoies les données pour le traitement ajax, doit être une nouvelle page, c'est là ou tu vas utiliser ton code, ci-dessous:
Code:

1 2 3 4 5 6 7 8 9 <%String code=(String)request.getAttribute("codeObjIndiv"); %> <% Iterator it3 = GetList.getPhaseByCode(code).iterator(); String num=null; while(it3.hasNext()){ Phase phase=(Phase)it3.next(); num=phase.getLibellePhase(); %> <input value="<%=phase.getLibellePhase()%>" name="nomPhase" id='phase'/> <%}%> </th>
Donc si tu ne récupéres rien dans ta variable c'est que c'est evident, tu envoies les données sur la même page, là ou tu mets déjà un script pour ne rien récupérer d'abord
m'enfin
je te propose un tutoriel pour comprendre un peu comment ça fonctionne, c'est en utilisant le script php, mais l'important c'est de comprendre l'utilité d'ajax :
http://siddh.developpez.com/articles/ajax/

Fais moi un plaisir, et lis ça stp :supplier:

03/10/2008, 09h41
E.Bzz

Bonjour,
une petite remarque éclaire (pas eu le temps de tout lire) :

Citation:

Envoyé par witch17

La page ou tu envoies les données pour le traitement ajax, doit être une nouvelle page,

Pas du tout : ça peut tout à fait être la même page (le même fichier .jsp ou .php). Il suffit qu'un paramètre de l'url, testé à réception permette de lancer un traitement plutôt qu'un autre. Dans ce cas, la même page peut tenir le rôle de 2 pages différentes.
Dans un cas générer la page qui va lancer les requêtes Ajax (celle qui est affichée à l'écran) et dans l'autre, générer la réponse attendue suite à l'appel Ajax.
Oualà, c'était tout :)

EDIT : c'est une remarque d'ordre générale et ça ne veut pas dire que la remarque de Witch17 est mauvaise : c'est peut-être effectivement le problème dans le cas présent, car il faut gérer tout ça correctement.

A+
03/10/2008, 11h46
witch

Citation:

Envoyé par E.Bzz

ça peut tout à fait être la même page (le même fichier .jsp ou .php). Il suffit qu'un paramètre de l'url, testé à réception permette de lancer un traitement plutôt qu'un autre. Dans ce cas, la même page peut tenir le rôle de 2 pages différentes.
Dans un cas générer la page qui va lancer les requêtes Ajax (celle qui est affichée à l'écran) et dans l'autre, générer la réponse attendue suite à l'appel Ajax.

Tiens je ne sais pas pourquoi je n’ai jamais pensé à ça, j’avoue que mon problème, ce n’est pas que je suis débutante seulement, mais aussi, que je ne vais toujours pas au bout des choses, je m’amuse à changer de langage de programmation tout le temps(ce n’est pas un choix personnel biensure).

Mais, vu le niveau du problème de ce thread, et vu le script, je suggère de faire dans un premier temps, chaque traitement spécifique dans une page à part, même si on peut aller à crée deux lignes dans une page sur 10 :lol:

Merci E.Bzz pour tes remarques constructives.

Salut
03/10/2008, 13h32
emenemza
Bonjours,
j'ai refais le code en envoyant la variable dans une autre page:(l'action)

Code:

xhr.open("POST","/getUserFiche.do",true);

et dans /getUserFiche.do:
Code:

1 2 String code=(String)request.getParameter("codeObjIndiv"); session.setAttribute("phaseList", GetList.getPhaseByCode(code));
j'ai aussi utilisé firebug,et voici les erreurs qu'il me donne:
invalid assignment left-hand side
xhr.send("codeObjIndiv"=+code);\n

et lorsque je change l'element selectionné dans le select:

update is not defined
onchange(change )
update();
03/10/2008, 13h59
witch

Citation:

Envoyé par emenemza

j'ai aussi utilisé firebug,et voici les erreurs qu'il me donne:
invalid assignment left-hand side
xhr.send("codeObjIndiv"=+code);\n

et lorsque je change l'element selectionné dans le select:

update is not defined
onchange(change )
update();

En même temps c'est au niveau javascript, fait un alert sur la variable "code", pour voir si elle contient vraiment l'élément à renvoyer comme paramètre, le type de la variable, peut être un problème.

prend l'habitude à faire des alerts là ou ça bloque.

bon j'ai trouvé l'erreur de javaScript,c'etais juste uen fautev de frappe:

xhr.send("codeObjIndiv= " + code); au lieu de xhr.send("codeObjIndiv"= + code);

mtn j'ai pas d'erreur au chargement mais dans la reponse j'ai:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html><head><title>Apache Tomcat/5.5.9 - Rapport d'erreur</title><style><!--H1 {font-family:Tahoma,Arial

,sans-serif;color:white;background-color:#525D76;font-size:22px;} H2 {font-family:Tahoma,Arial,sans-serif

;color:white;background-color:#525D76;font-size:16px;} H3 {font-family:Tahoma,Arial,sans-serif;color

:white;background-color:#525D76;font-size:14px;} BODY {font-family:Tahoma,Arial,sans-serif;color:black

;background-color:white;} B {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76

;} P {font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px;}A {color : black

;}A.name {color : black;}HR {color : #525D76;}--></style> </head><body><h1>Etat HTTP 404 - /getUserFiche

.do</h1><HR size="1" noshade="noshade"><p><b>type</b> Rapport d'état</p><p><b>message</b> <u>/getUserFiche

.do</u></p><p><b>description</b> <u>La ressource demandée (/getUserFiche.do) n'est pas disponible.</u
></p><HR size="1" noshade="noshade"><h3>Apache Tomcat/5.5.9</h3></body></html>

03/10/2008, 14h18
emenemza

j'ai fait alert(code) ,ça marche trés bien,le code est renvoyé
03/10/2008, 14h32
witch

Bon déjà ça

Citation:

Envoyé par emenemza

j'ai fait alert(code) ,ça marche trés bien,le code est renvoyé

C'est une réponse à ça :

Citation:

Envoyé par emenemza

j'ai besoin de recuperer l'id de la valeur selectionnée dans la liste ,pour pouvoir mettre à jours les autres listes qui s'obtiennent par une methode utilisant cet id.

:)
Sinon je ne comprends pas pourquoi t'as des styles envoyé comme réponses, la page ou on récupere la reponse ne doit pas contenir de style, tout ce qu'elle va contenir, c'est une nouvelle liste avec des données à jour, provenant d'une requete de la base de données que tu utilises, donc:
une connexion à la base de données
une requete
une selection des données à jour, en utilsant biensure, la variable code, que t'as envoyé à cette page.

bien à toi.
03/10/2008, 16h24
emenemza
oui,mais c'est pas moi qui a mis les styles dans la page,ce que j'ai mis moi dans l'action getUserFiche.do c'est:
Code:

1 2 3 String code=(String)request.getParameter("codeObjIndiv"); session.setAttribute("phaseList", GetList.getPhaseByCode(code));
j'ai copié la reponse dans un fichier.html pour voir son contenu,c'est le style des pages d'erreur que renvoi tomcat :(
03/10/2008, 16h58
witch
Citation:

Envoyé par emenemza

j'ai copié la reponse dans un fichier.html pour voir son contenu,c'est le style des pages d'erreur que renvoi tomcat :(

Pour qu'on se mette d'accord, c'est quoi la reponse pour toi, pour moi...sur la fonction du xmlHttpRequest, je pense à ça la variable "leselect":
Code:

1 2 3 // 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;
03/10/2008, 17h04
emenemza

oui c'est bien ça.si on fait

Code:

document.write(xhr.responseText);

ou

Code:

document.write(leselect)

j'obtiens la reponse
03/10/2008, 17h22
witch

Et t'as quoi sur la page réponse, fais voir le code de cette page, fais voir tout le code des deux pages si c'est necessaire, pour qu'on finisse vite...

J'ai l'impression que tu ne comprends toujours pas comment ça marche, pourtant c'est quelque chose de basique ce que tu cherches à faire, as tu lis attentivement le site que je t'ai envoyé sur l'exemple en ajax, c'est tout à fait la même chose que ce que tu veux faire...

++