listes liées dynamiquement JSP

**mel-baro** · 30/06/2009, 17h12

Bonjour,

je suis face à un pb depuis longtemps, j'arrive pas à afficher une liste en fonction de l'autre, sachant que c est 2 listes récupérent des données d'un BD de données MYSQL.

ma table sitescopelog contient :

groupeName , monitorName, monitorID, sample

Code :

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

1
2
3
4
MonitoringSiteScope, Monitor - CPU, 2, 68512
MonitoringSiteScope, Monitor - Ping : 220.110.24.54, 1,23151
SYSTEMERessources, Recup SWAP, 3, 7850
SYSTEMERessources, Recup CPU, 4, 16390

liste déroulante 1 : tout les groupName
liste déroulante 2 : tout les monitorName correspondant à la liste 1

je voudrais afficher dans une liste déroulante 2 tout les monitorNames qui correspondent à la liste déroulante 1.

si quelqu'un à une idée, je suis prenant.

Merci d'avance.

**tchize_** · 30/06/2009, 18h07

lorsque l'on sélectionne une valeur dans la première colonne tu dois soumettre le formulaire. En fonction de cette valeur tu peux alors remplir ta deuxième liste.

**erox44** · 01/07/2009, 09h48

en général pour faire ça on utilise AJAX , tu trouvera des tutos assez facilement.

**mel-baro** · 01/07/2009, 16h38

Merci pour votre réponse,

j'ai trouvé un exemple en php /ajax et j'ai essayé de le traduire en java et ça donne :

j'ai crée 2 pages jsp, la premiére contienne le formulaire qui récupére les donénes de la table. et la deuxiéme jsp contient le résultat qui doit être envoyé.
Page : 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
<%@ 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","monitor.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="group" id ="group" onChange ="go();">
		<OPTION VALUE='-1'>-- Choisissez un groupe --</OPTION>
<% ResultSet rs = (ResultSet) stmt.executeQuery("select groupName from sitescopelog group by groupName");%>
	<% while (rs.next()) {%>
 
		 <option value = "<%=rs.getString("groupName")%>" ><%=rs.getString("groupName") %></option>
	<%
        }
        %>
	<%
        rs.close();
        %>
 
	</SELECT>
 
</form>
 
<label> moinitor</label>
<div id = 'monitor' style ='display:inline'>
<select name ="monitor" id = "monitor">
<option value ='-1'> Choisir un monitor</option>
</select>
</div>
 
</body>
</html>

Page : monitor.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
<%@ 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:3306/test";
String username = "root";
String password = null ;
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection(url,username,password);
Statement stmt = con.createStatement();
%>
 
<select name="monitor" id="monitor">
<%      
        
                ResultSet rs = (ResultSet) stmt.executeQuery("select monitorName from sitescopelog where groupName like '"+idGroup+"' group by monitorName");
                        
                        
                while (rs.next()){ 
                                        %> 
 
			<option value="<%=rs.getString("monitorName")%>"><%=rs.getString("monitorName")%></option> 
			<%} %>
 
</select>

le sousci que j'ai , c 'est la variable (idGroup), on dirait qu'il a reconnait pas dans la page monitor.jsp

Merci pour vos conseils.

**tchize_** · 01/07/2009, 20h47

Envoyé par mel-baro

le sousci que j'ai , c 'est la variable (idGroup), on dirait qu'il a reconnait pas dans la page monitor.jsp

Normal, tu ne la défini nulle part. Si c'est un pamètre de la requete, il faut remplacer par

Code :

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

request.getParameter('"idGroup")

dans un scriptlet

**mel-baro** · 02/07/2009, 12h02

Merci bcp c 'est génial , ça marche maintenant

,

une question, je voudrais savoir si c est possible en javaScript de mettre 2 méthodes dans un onChange = " "

j'ai une méthode go () et changer(). j'ai essayé de créer une méthode mére et de mettre les 2 méthodes go() et changer() , mais ça marche pas

merci de votre aide.

listes liées dynamiquement JSP

Servlets/JSP Java

Vue hybride

Discussions similaires

Partager

Partager