[AJAX] Select qui dépend d'une autre ? filtrage

Version imprimable

Bonjour,
je commence à peine à travailler avec Struts2, je cherche à lier 2 select entre eux en utilisant Ajax,
j'ai utilisé un exemple sur ce lien mais le résultat est catastrophique.
le second select est remplacé par la totalité de la page,
Voilà mon code 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
 
<script type="text/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;
  }
 
/**
* Méthode qui sera appelée sur le click du bouton
*/
  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('secondSelect').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","url.methode.action",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 la valeur
	sel = document.getElementById('firstSelect');
	valeur = sel.options[sel.selectedIndex].value;
	xhr.send("valeur="+valeurFirstSelect);
  }
</script>

..........

Code:

1
2
3
4
5
6
7
8
9
10
 
<s:select id="firstSelect" name="rechercheBean.firstSelect" list="listeValeurs" 
	listValue="valeur" listKey="valeur" headerKey="" 
	headerValue="-- Selectionner une valeur --" onchange="go()">
</s:select>
...............
<s:select id="secondSelect" name="rechercheBean.secondSelect" 
	list="listeMvt" listKey="mvtId" listValue="mvtLib" 
	headerKey="" headerValue="-- Selectionner un mouvement --">
</s:select>

le code java de la methode :

Code:

1
2
3
4
5
6
7
8
9
10
 
......
private String valeur;
//getter et setter de valeur
......
public String methode() {
   listeMvt= ..... // j'obtiens la liste des mvt en fonction de la valeur
   .......
   return INPUT;// vers la meme page jsp
}

juste pour précision : au moment de l'initialisation de la page, j'ai dans les 2 select toutes les valeurs avec tous les mouvements,
Si quelqu'un à une idée, j'en serais très reconnaissant !! :calim2:
Merci

28/12/2010, 11h05
miabi

Bonjour,

le problème (a mon avis) vient de ton xhr.responseText qui doit prendre la totalité du HTML de ta page, vérifie bien tes balises.
28/12/2010, 11h21
rimas2009

Merci pour ta réponse rapide,
mais tu peut être plus précis ?
si j'ai bien compris :
dans ma méthode java je renvoi INPUT, effectivement il renvoie la page jsp (si je te suis bien),
donc, il faut que la liste du 2 select ??? et comment ?
28/12/2010, 11h33
miabi
Et bien dans cette partie du code :
Code:

1 2 3 leselect = xhr.responseText; document.getElementById('secondSelect').innerHTML = leselect;
la variable "leselect" récupère les informations avec le xhr.responseText pour ensuite remplacer le code HTML de ton deuxième select par celui-ci, et donc si le code HTML récupérer est différent d'un code HTML d'un select ça peut provoquer l'erreur que tu as.

(ça fait beaucoup de "select" tout ça :mouarf:)

Bon, j'ai trouvé une solution un peu bidon mais qui marche et elle plus facile à comprendre, elle utilise du jquery.
le mieux c'est de créer une page JSP pour le deuxième select qui va être rafraichi en fonction du premier select.
la page JSP du 2éme select secondSelect.jsp :
Code:

1 2 3 4 5 6 7 8 <%@ taglib uri="/struts-tags" prefix="s"%> // importer les js et css jquery <s:select id="secondSelect" name="rechercheBean.secondSelect" list="listeMvt" listKey="mvtId" listValue="mvtLib" headerKey="" headerValue="-- Selectionner un mouvement --" > </s:select>
dans la page principale JSP :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript""> function onSelectMouv() { //utilisation de jquery var valeurId= $("#firstSelect").val(); $("#selectMouv").load("votreActionStruts.action", {"valeurId": valeurId}); } </script> .......... <s:select id="firstSelect" name="rechercheMouvementBean.firstSelect" list="listeValeurs" listValue="valeur" listKey="valeurId" headerKey="" headerValue="-- Selectionner une valeur --" onchange="javascript:onSelectMouv();"> </s:select> <div id="selectMouv" > // l'endroit du 2éme select <jsp:include page="secondSelect.jsp" /> </div>
Le plus amusant dans ce code, c'est qu'on peut faire de l'ajax sur n'importe quel composant (balise), je l'est fait sur des tableau displaytag, il suffit de remplacer le code de jsp du 2éme select par celui que vous voulais ajaxé.
Voilà, je sais, c'est pas propre de créer une jsp pour un select, mais c'est la solution que j'ai trouvé,
si quel qu'un à mieux je suis preneur.

13/07/2011, 10h13
ahlam1

select avec ajax et struts 2

bonjour rimas2009
j'ai un problème similaire de select
le Firstselect je le remplis moi meme et je veux récupérer la sélection pour remplir le secondSelect
je suis débutante dans ajax,je travail avec eclipse et mysql,hibernet et struts 2
1)je ne sais pas comment récuperer la selection dans le firstSelect pour l'envoyé dans la méthode send(...)
2)pour URL de la methode open("POST",url,true) c'est nomDeLaClasse .java qui traitera le requête ??? cad url=nomClass.java ou c'est nomClass.nomMethode

si quelqu'un peut m'aider je serai très reconnaissante
merci d'avance