Listes liées dans une JSP - Java & Ajax
Bonjour,
J'ai affaire à un cas assez classique : deux listes déroulantes liées dans une page JSP. Le contenu de la deuxième est alimentée en fonction de la sélection de la première. Je cherche à faire cette alimentation en Ajax. En cherchant sur Internet, j'ai trouvé un exemple mais fait en PHP. J'ai donc cherché à l'adapter en java. Pourtant cela ne fonctionne pas. (Je suis débutant en Ajax)
Dans mon cas, la première liste contient des plateformes, et en fonction de celle choisie, je souhaite alimenter la deuxième liste avec des catégories de produit.
Voici mon code :
page JSP : (j'utilise du JSTL dans mes JSP mais cela ne change rien pour mon problème)
Code:
1
2
3
4
5
6
7
8
9
10
11
|
<select id="plateforme" name="plateforme" onchange="go();">
<c:forEach items='${listePlateformes}' var='plateforme'>
<option value="${plateforme.idPlateforme}">${plateforme.libelle} </option>
</c:forEach>
</select>
<div id='categorieProduit' style='display:inline'>
<select name="categorieProduit">
</select>
</div> |
Ajax :
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
|
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 changement de valeur de la première liste
*/
function go(){
var xhr = getXhr();
// On définit 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('categorieProduit').innerHTML = leselect;
}
}
// JE PENSE QUE C EST ICI QU IL Y A UN PROBLEME CAR DANS L EXEMPLE, ON APPELLE UNE PAGE PHP MAIS LA ...
xhr.open("POST","afficherCateg.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'auteur
plateformeselectionnee = document.getElementById('plateforme');
idPlateforme = plateformeselectionnee.options[plateformeselectionnee.selectedIndex].value;
alert(idPlateforme); // RECUPERE LE BON ID DANS LA PREMIERE LISTE
xhr.send("idPlateforme="+idPlateforme); //COMMENT LE RECUPERER DANS "afficherCateg.jsp" ?
} |
page afficherCateg.jsp :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<%
String id= request.getAttribute("idPlateforme").toString(); //ON LE RECUPERE DANS LA REQUEST ??
if(id!=null && id!=""){
int idPlateforme = Integer.parseInt(id);
out.println("<select name='categorieProduit' ");
List<CategorieProduitVO> lesCategProduitVO = FabriqueMetier.getInstance().getMetierCategorieProduit().listerCategorieProduitParIdPlateforme(idPlateforme);
for(CategorieProduitVO c : lesCategProduitVO){
out.println("<option value='"+c.getIdCateg()+"'>"+c.getLibelle()+"</option>");
}
out.println("</select>");
}
%> |
Je n'ai aucun bug, mais rien ne s'affiche. Je sais juste que je passe bien dans ma fonction go().
Merci d'avance.
