Listes déroulantes liées en JSP

**mel-baro** · 28/05/2009, 12h28

Bnjour,

Je souhaiterais développer des listes liées dynamiquement en fonction du choix de la première via une BDD. Pour cela j'utilise l'événement Onchange de javascript mais je n'y arrive pas. il y a plus de 2 semaines que je bloque sur ça, si quelqu'un pourrait m'aider je lui serais reconnaissant.

Probléme :

j'utilise la variable sValue = request.getParameter("groupName") pour récupérer le groupName sélectionné dans la liste "affiche2Suite.jsp" et je veux qu'il m affiche dans la 2iéme liste les moniteurs correspondants au groupe selectionné dans le premiére Liste 'affiche1Suite.jsp'

voici mon code :

affiche1Suite.jsp :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@page language="java" import="java.sql.*"%>
 
<%
String url = "jdbc:mysql://localhost/test";
String username = "root";
String password = null ;
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection(url,username,password);
Statement stmt = con.createStatement();
%>
<%
String sValue = request.getParameter("groupName");
%>
<%
out.println("<select name ='monitor' >");
 
ResultSet rs = (ResultSet) stmt.executeQuery("select monitorName from CPUgraph where groupName like '"+sValue+"' group by  groupName, monitorName order by groupName asc");
 
out.println("<option >--Choisissez un moniteur---</option>");
 
while (rs.next()) {
 
out.println("<br>");
out.println("<option value ='"+rs.getString("monitorName")+"'>"+rs.getString("monitorName")+"</option>");
out.println("<br>");
 
}
rs.close();
 
out.println("</select>");
 
%>

-------------------

affiche2Suite.jsp :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@page language="java" import="java.sql.*"%>
<%
String url = "jdbc:mysql://localhost/test";
String username = "root";
String password = null ;
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection(url,username,password);
Statement stmt = con.createStatement();
%>
 
 
<html> 
<head> 
<title>SiteScope graph old</title> 
<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('monitor').innerHTML = leselect;
                                        }
                                }
 
                                // Ici on va voir comment faire du post
                                xhr.open("POST","affiche1Suite.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 du groupName
                                sel = document.getElementById('group');
                                idgroup = sel.options[sel.selectedIndex].value;
                                xhr.send("idGroup="+idgroup);
                        }
                function changer(){ 
                document.formulaire.champstext.value=document.formulaire.groupName.value;
        }
                </script>
 
 
 
</head> 
<body bgcolor="#FFFFFF"> 
<center><H1>SiteScope +</h1>
 
<form name="formulaire">
 
<select name='groupName' id='group' onChange ='go();'>
<option value ='-1' >--Choisissez un groupe---</option>
<% 
ResultSet rs2 = (ResultSet) stmt.executeQuery("select groupName from CPUgraph group by groupName");
 
    while (rs2.next()) {
                 
                 out.println("<option name = 'test' value = '"+rs2.getString("groupName")+"'>"+rs2.getString("groupName")+"</option>");
        
        }
        rs2.close();    
%>
 
</select>
 
</form>
 
<label> moinitor</label>
<div id = 'monitor' style ='display:inline'>
<select name ='monitor'>
<option value ='-1'> Choisir 1 monitor</option>
</select>
</div>
 
</body>
</html>

**Lorantus** · 03/06/2009, 12h55

(Tu peux enlever les print("<br>") dans affiche1Suite.jsp. Cette JSP retourne qu'une selection :<select>....</select>.)

Le principe est sur un Ajax... et semble correcte. Pas de raison d'être avec une erreur.

As-tu essayé d'appeler manuellement affiche1Suite.jsp... type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

http://127.0.0.1/applic/affiche1Suite.jsp?groupName=1234

La réponse est correcte, comme attendue ?

PS : merci d'avoir placer les [code].

Listes déroulantes liées en JSP

Servlets/JSP Java

Vue hybride

Discussions similaires

Partager

Partager