Listes deroulantes liées JSP/Javascript

Version imprimable

16/08/2011, 14h51
aminemao

Listes deroulantes liées JSP/Javascript

Bonjour,

je développe une application web J2EE.
dans ma JSP Je souhaite créer deux liste déroulante (classe et attribut) tel que la liste des attribut ne peut être rempli que si je récupéré la valeur de l'élément sélectionné dans la liste des classe.
Sachant que la méthode pour récupérer les attributs est en java getAttribute(string idClass).
Ma question est donc est ce que je peux utiliser cette méthode dans ma fonction javascript?
si oui, comment faut-il faire? sinon y a t'il un autre moyen?

Merci d'avance
16/08/2011, 14h59
andry.aime

Bonsoir,

Citation:

Envoyé par aminemao

Sachant que la méthode pour récupérer les attributs est en java getAttribute(string idClass).
Ma question est donc est ce que je peux utiliser cette méthode dans ma fonction javascript?

Non, tu ne peux pas utiliser java dans javascript. Regarde plutôt du coté AJAX.
Si tu utilises JSF, tu peux regarder du coté RichFace qui te facilitera l'utilisation d'AJAX et fait une recherche sur le forum ou tutoriel JSF.

A+.
17/08/2011, 15h44
aminemao

Bonjour,

tout se passe dans ma jsp. j'importe la classe et je récupère la methode getAttribute(idclass) qui me retourne une liste d'attribut.
Le "idclass" je dois le récupérer de l'élément sélectionné dans la liste déroulante des classes.

pour l'instant j'ai pas d'idée comment faire :( .

Merci pour votre aide

Re,

Coté javascript, regarde le lien que j'ai donné plus haut. Coté serveur (ton controller en java), tu récupères l'id envoyé via ajax, et lance la requête pour chercher les valeurs dans la base. Tu envoies ensuite un texte html qui sera ton second avec le writer du response. Quelque chose comme ça
Code:

1 2 3 4 5 6 PrintWriter outputWriter = response.getWriter(); outputWriter.write("<select name='nomSecondSelect'>"); outputWriter.write("<option value='resultRequete1'>text1</option>"); outputWriter.write("<option value='resultRequete2'>text2</option>"); outputWriter.write("</select>"); outputWriter.close();
En fait, pour les options, tu les génères avec les données de la base.

A+.

18/08/2011, 11h05
aminemao

Rebonjour,

j'ai essayé de faire ca, mais je ne sais pas comment faire pour récupérer l'id envoyé via ajax.
en fait moi au lieu de faire la connexion a la BD, j'ai ma methode java qui me retourne une liste d'attribut.

Désolé pour le dérangement
18/08/2011, 11h08
andry.aime

Citation:

Envoyé par aminemao

j'ai essayé de faire ca, mais je ne sais pas comment faire pour récupérer l'id envoyé via ajax.

De la même façon que tu récupères une variable de formulaire submiter.

Citation:

Envoyé par aminemao

en fait moi au lieu de faire la connexion a la BD, j'ai ma methode java qui me retourne une liste d'attribut.

C'est cette liste que tu parcours pour générer les options ;).

A+.

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
 
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("<portlet:namespace />attributId").innerHTML = leselect;
			}
		}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","html/portlet/journal/conf.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
	sel = document.getElementById("<portlet:namespace />classId");
	idclass = sel.options[sel.selectedIndex].value;                               
	xhr.send("idclass="+idclass);
}
</script>

Désolé mais je vois pas comment faire j'ai essayé un truc bête du genre xhr.getparamter("idclass") mais ca me donne rien

18/08/2011, 11h45
andry.aime

Citation:

Désolé mais je vois pas comment faire j'ai essayé un truc bête du genre xhr.getparamter("idclass") mais ca me donne rien

Comme j'ai dit plus haut, tu le récupères de la même façon qu'un formulaire submiter.

Code:

request.getParameter("idclass");

Coté javascript, montre nous le code HTML et javascript généré par le jsp.

A+.

voici ma jsp dans laquel j'affiche ma liste déroulante de classes

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
78
79
80
81
82
83
84
 
<%
List<Attribute> attList = null;
List<OntClass> listClass = null;
ClassService os = new ClassService();
// methode qui génère la liste des classes
listClass = os.listOntClasses(String.valueOf(themeDisplay.getScopeGroupId()), themeDisplay.getLanguageId().substring(0,2));
 %>
 
<div>
                                <aui:select  showEmptyOption="true" label="CLass" name="classId" inlineLabel="true"  onchange="go()">
 
                                         <%
 
                                          for (int j = 0; j < listClass.size(); j++) {
                                          //System.out.println(l.get(i).getUri());
                                                String name [] = listClass.get(j).getUri().split("/");
                                         %>
 
                                              <aui:option  label="<%= name[3] %>"  value="<%= ListClass.get(j).getUri()%>" />
 
 
                                          <%
                                            }
                                          %>
 
                               </aui:select>
                        </div>
 
                                <aui:fieldset>                                  
							<div class="lfr-form-row lfr-form-row-inline">
                                                            <aui:select showEmptyOption="true" label="Attribut" name="attributId" id="attributId" inlineLabel="true">
 
 
                                                            </aui:select>
							</div>                                               
                                  </aui:fieldset>
 
                <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("<portlet:namespace />attributId").innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","html/portlet/journal/conf.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
				sel = document.getElementById("<portlet:namespace />classId");
				idclass = sel.options[sel.selectedIndex].value;                                
				xhr.send("idclass="+idclass);
			}
		</script>

18/08/2011, 12h11
andry.aime

Je parle du code généré, qui se trouve dans le source de ton navigateur mais pas le jsp qui le génère.
18/08/2011, 12h29
aminemao

le code generé ets trop long en fait, vu que ma jsp est inclus dans une autre jsp et c'est pas facile a se positionner dans le code.
Je ne sais pas pourquoi tu as besoin de ca?? pour l'instant j'ai la liste des classes rempli.et liste des attribut qui s'affiche
18/08/2011, 12h36
andry.aime

Citation:

Envoyé par aminemao

le code generé ets trop long en fait, vu que ma jsp est inclus dans une autre jsp et c'est pas facile a se positionner dans le code.

Ben tu ne sais pas trier les bouts de code javascript et html concerné :koi:

Citation:

Envoyé par aminemao

Je ne sais pas pourquoi tu as besoin de ca??

Un peu de lecture :fleche: Important : Les règles incontournables d'utilisation de ce forum