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>