listes liées dynamiquement JSP

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:

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.

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.

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

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:

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:

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.

Citation:

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:

request.getParameter('"idGroup")

dans un scriptlet

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

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.

Code:

onchange="go();changer();toutCeQueTuVeux();"

Merci tchize_ pour ta réponse rapide , ça marche nickel !!