interaction entre deux listes déroulantes avec les jsp et xmlhttprequest

Version imprimable

26/08/2008, 11h49
paquito

interaction entre deux listes déroulantes avec les jsp et xmlhttprequest

Bonjour,
Je débute avec les jsp, cependant je voudrais afficher certains éléments d'une liste à partir de la sélection d'une autre liste.
SVP pourriez-vous me donner des pistes pour résoudre ce problème.

Merci pour votre aide
26/08/2008, 12h16
OButterlin

Événement onchange sur la liste source + AJAX pour chargement de la deuxième (ou alors faire un submit du formulaire pour recharger la page).

A+

Merci pour ton aide.

J'ai essayé de produire les scripts suivants mais je n'ai aucune action qui se produit pourtant il n'y a pas d'erreur lors de l'exécution.

Voici les codes produits.

fichier form.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
 
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="java.sql.*" %>
 
<html>
<head>
<%
 
 String host = "localhost";
 String port = "3306";
 String databasename = "abonnement_tel";
 String login = "root";
 String password = "root";
 Connection connexion;
 Statement stat=null;
 String val_retour = request.getParameter("id_marque");
 ResultSet result = null;
 
 String requete = "SELECT NOM_MODELE FROM MODELE ID_MARQUE ="+val_retour;
 
 try
        {
                //Class.forName("org.gjt.mm.mysql.Driver");
                Class.forName("com.mysql.jdbc.Driver");
                String url = "jdbc:mysql://"+host+":"+port+"/"+databasename;
                 connexion =  DriverManager.getConnection(url, login, password);
        System.out.println("driver charger");
                stat = connexion.createStatement();
                result = stat.executeQuery(requete);
                
                
                while(result.next()){
                System.out.println(result.getString(1));
                        
                }
                
        }
        catch (Exception e)
        {
                e.printStackTrace();
        }
 
 
 
%>
 
</head>
<body>
 
</body>
</html>

Formulaire

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
 
<div class="Centered">
	<form  name="form_selects" id="form_selects" action="" method="" onsubmit="return false;">
		<fieldset>
			<legend>Faites un choix dans la liste de gauche<br />et observez le résultat dans celle de droite</legend>
			<div class="Left">
			Marques&nbsp;:
			<select name="id_marque" id="id_marque" onchange="request05(this.form)">
				<option value="" selected="selected"></option>
		<option value="1">NOKIA</option>
		<option value="2">SAMSUNG</option>
		<option value="3">HTC</option>
		<option value="4">SONY ERICSSON</option>
		<option value="5">LG</option>
		<option value="5">MOTOROLA</option>
			</select>
			&nbsp;&nbsp;&nbsp;Modèles&nbsp;:
			<select name="id_modele" id="id_modele" class="ButtonL">
 
			</select>
			</div>
		</fieldset>
	</form>
</div>

Script Javascript

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
 
 
<script type="text/javascript">
<!--
var l1    = f.elements["id_marque"]; 
        var l2    = f.elements["nom_modele"]; 
        var index = l1.selectedIndex; 
        if(index < 1) 
           l2.options.length = 0; 
        else { 
           var xhr_object = null; 
             
           if(window.XMLHttpRequest) // Firefox 
              xhr_object = new XMLHttpRequest(); 
           else if(window.ActiveXObject) // Internet Explorer 
              xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
           else { // XMLHttpRequest non supporté par le navigateur 
              alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
              return; 
           } 
         
           xhr_object.open("POST", "form.jsp", true); 
             
           xhr_object.onreadystatechange = function() { 
              if(xhr_object.readyState == 4) 
                 eval(xhr_object.responseText); 
           } 
         
           xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
           var data = "family="+escape(l1.options[index].value)+"&form="+f.name+"&select=nom_modele"; 
           xhr_object.send(data); 
        } 
 
 
//-->
</script>

Merci pour votre aide.

26/08/2008, 14h05
OButterlin
Le code javascript que tu montres est celui de la fonction request05(this.form) ?

Si c'est le cas, tu fais référence à "nom_modele" alors que le champ select porte le nom "id_modele".
En plus, tu ne fais rien du résultat, eval(xhr_object.responseText).

Il faudrait générer un contenu qui ajoute les options au select, pour ça, tu as la méthode javascript
Code:

1 2 form.id_modele.options[form.id_modele.options.length] = new Option("value", "texte");
Une servlet aurait été plus adaptée à ce traitement, même si une jsp peut faire l'affaire (d'ailleurs, c'est une servlet également)

A+

Je débute en javascript et en java/servlet/jsp, donc Je ne comprends pas très bien ce qu'il faut faire.
En ce qui concerne la deuxième méthode de traitement que tu m'as proposée, je peux la mettre en œuvre mais j'aurai bien aimé utiliser l'objet xmlhttprequest.
voici le code javascript que je viens de faire mais je ne vois pas comment utilisé la ligne suivante:

Code:

form.id_modele.options[form.id_modele.options.length] = new Option("value", "texte");

code javascript

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
 
<script type="text/javascript">
<!--
 
var requete = null; /* On crée une variable globale qui contiendra l'objet XHR */
 
/*
 Fonction qui crée un objet XHR.
 Cette fonction initialisera la valeur dans la variable globale "requete"
*/
 
function creerRequete() {
    try {
        requete = new XMLHttpRequest(); /* On essaye de créer un objet XmlHTTPRequest */
    } catch (microsoft) {
        /* Microsoft utilise une autre technique, on tente de créer un objet ActiveX */
        try {
            requete = new ActiveXObject('Msxml2.XMLHTTP');
        } catch(autremicrosoft) {
            /* On en teste une autre méthode si la première n'a pas marchée */
            try {
                requete = new ActiveXObject('Microsoft.XMLHTTP');
            } catch(echec) {
                /* Si aucune méthode ne fonctionne, il ne reste plus qu'à mettre à jour le navigateur ! */
                requete = null;
            }
        }
    }
    if(requete == null) {
        alert('Votre navigateur ne semble pas supporter les object XMLHttpRequest.');
    }
}
 
function load_data()
{
        
        var l1    = f.elements["id_marque"]; 
        var l2    = f.elements["id_modele"]; 
        var index = l1.selectedIndex; 
        if(index < 1) 
           l2.options.length = 0; 
        else {
                creerRequete();
 
                requete.open("POST", "form.jsp", true); 
             
                   requete.onreadystatechange = function() { 
                      if(requete.readyState == 4) 
                         eval(requete.responseText); 
                   } 
                 
                   var data = "id_marque="+escape(l1.options[index].value)+"&form="+f.name+"&select=id_modele";
                   form.id_modele.options[form.id_modele.options.length] = new Option("value", "texte");
                    
                   requete.send(data);   
        }               
}
//-->
</script>

Merci pour ton aide

26/08/2008, 16h47
OButterlin

Ci-joint 2 fichiers html pour te montrer ce à quoi tu dois arriver...

A+
26/08/2008, 17h05
paquito

Je te remercie beaucoup OButterlin.

Je vais pouvoir appliquer cette méthode à mon application .

1 pièce(s) jointe(s)

Maintenant lors de la sélection il y a une fenêtre alert qui s'ouvre avec une erreur j'ai mis l'image en pièce jointe.
J'ai voulu également faire un test avec ma page jsp, ça ne marche pas non plus.
voici le code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <%@page import="java.util.ArrayList"%> <%@page import="java.util.List"%><%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <% String val_retour = request.getParameter("id_marque"); List<String> list = new ArrayList<String>(); list.add(1,"un"); list.add(2,"deux"); list.add(3,"trois"); list.add(4,"quatre");
Merci pour ton aide

27/08/2008, 08h42
OButterlin

Ça vient du script que je t'ai mis en exemple

Code:

alert( "Réponse obtenue : " + rsp );

Au vu de ce qu'il t'affiche, il y a un problème lors de l'appel quand même (c'est un message d'erreur serveur)
27/08/2008, 10h27
paquito

je pense aussi que l'erreur vient de mon fichier jsp. il ne récupère pas les valeurs du jsp. Si je passe par les servlets penses-tu que le traitement soit plus efficace?

Merci pour ta réponse
27/08/2008, 10h35
OButterlin

Plus rapide ? Pas forcément... mais plus clair, assurément ! ;)

Dans ton cas, si tu regardes le texte renvoyé, tu as une erreur 404.
Il ne trouve pas la page (GestionAbonnement/form.jsp)...

Peux-tu montrer la page d'appel (actuelle)

1 pièce(s) jointe(s)

J'ai créé le formulaire et le javascript dans un fichier createForm.jsp qui dans le même répertoire que le fichier form.jsp. Dans mon index.jsp, je fais appel au fichier createForm.jsp.

voici mon fichier form.jsp :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <%@page import="java.util.ArrayList"%> <%@page import="java.util.List"%><%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <% String val_retour = request.getParameter("id_marque"); List<String> list = new ArrayList<String>(); list.add(1,"un"); list.add(2,"deux"); list.add(3,"trois"); list.add(4,"quatre"); %>
Voici également une image de ma page actuelle:

27/08/2008, 11h15
paquito

En faisant des tests, je me rends compte que c'est un problème de chemin.
Je n'ai plus à présent le message d'erreur. il me reste à récupérer les valeurs de ma jsp et de remplir ma liste.

Par analogie avec le fichier test2.htm, j'ai remarqué que tu as créé un tableau de liste, pour pouvoir remplir la liste déroulante.

Ma question est de savoir comment faire pareil en jsp.

Merci pour ta réponse

Bon, adapte ça...

Servlet

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
 
package nom.du.package;
 
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
 
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
public class TestServlet extends HttpServlet
{
    private static final long serialVersionUID = 1;
 
    public void service(HttpServletRequest request, HttpServletResponse response)
    {
        StringBuilder sb = new StringBuilder("new Array( ");
        Connection connection = null;
        try
        {
            String idMarqueString = request.getParameter("idMarque");
            Integer idMarque = new Integer(idMarqueString);
            connection = ...???...;
            PreparedStatement pstmt = connection.prepareStatement("select ID_MODELE,NOM_MODELE from MODELE where ID_MARQUE = ?");
            pstmt.setInt(1, idMarque.intValue());
            ResultSet rs = pstmt.executeQuery();
            while (rs.next())
            {
                sb.append("new Array(\"").append(rs.getInt(1)).append("\", \"")
                        .append(rs.getString(2)).append("\"),");
            }
            sb.replace(sb.length() - 1, sb.length(), ");");
 
            PrintWriter out = response.getWriter();
            out.write(sb.toString());
            out.close();
        }
        catch (Exception e)
        {
            System.out.println(e.getMessage());
        }
        finally
        {
            if (connection != null)
                try
                {
                    connection.close();
                }
                catch (Exception ignored)
                {
                }
        }
    }
}

La page associée

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
 
<html>
<head>
<script>
function getData()
{
    var requete = null;
    try
    {
        requete = new XMLHttpRequest();
    }
    catch (e)
    {
        requete = new ActiveXObject('Microsoft.XMLHTTP');
    }
    
    if ( requete == null ) return;
         
    requete.onreadystatechange = function() 
    { 
        if (requete.readyState == 4)
        {
            window.status = "appel reçu...";
            var rsp = null;
            rsp = requete.responseText;
 
            var arr = eval(rsp);
            
            var tmp = document.forms[0].s2.options;
            tmp.length = 0;
        
            for ( var i = 0; i < arr.length; i++ )
            {
                tmp[tmp.length] = new Option(arr[i][1], arr[i][0]);
            }
        } 
    }
        
    var data = "idMarque=" + document.forms[0].s1.value;
    requete.open("POST", "/GTCWeb/Test", true);
    requete.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    requete.send(data);      
    window.status = "appel émit...";
}
 
 
</script>
 
</head>
 
<body>
<form>
    <select name="s1" onchange="getData()">
        <option value="1">texte 1</options>
        <option value="2">texte 2</options>
        <option value="3">texte 3</options>
        <option value="4">texte 4</options>
    </select>
<br>
    <select name="s2">
    </select>
 
</form>
</body>
</html>

A+

27/08/2008, 12h56
paquito

1 pièce(s) jointe(s)
Merci pour les derniers scripts. J'ai refais mon code et j'ai de nouveau un problème de chemin que je n'arrive pas à résoudre pourtant j'utilise le bon chemin.

Dans la partie Javascript, j'écris cette ligne qui fait référence à l'appel de la servlet.
Code:

1 2 requete.open("POST", "../src/servlet/TestServlet.java", true);
Merci pour ton aide
Voici une image de mon arborescence sous eclipse

On ne référence pas une servlet comme ça 8O

Il faut l'inscrire dans le fichier web.xml, une section <servlet> et une autre <servlet-mapping>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 ... <servlet> <servlet-name>TestServlet</servlet-name> <servlet-class>le.package.TestServlet</servlet-class> </servlet> ... <servlet-mapping> <servlet-name>TestServlet</servlet-name> <url-pattern>/Test</url-pattern> </servlet-mapping> ...
C'est ce nom (Test) qui sera utilsé dans la page pour l'appel (préfixé par le nom de l'application bien sûr)

1 pièce(s) jointe(s)

Merci pour tes explications.
J'ai bien référencé ma servlet, tout me paraît normal mais il ne retrouve pas toujours le chemin de la servlet.

voici mon fichier web.xml

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
 
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<display-name>
	GestionAbonnement</display-name>
	<servlet>
		<description>
		</description>
		<display-name>
		TraitementData</display-name>
		<servlet-name>TraitementData</servlet-name>
		<servlet-class>
		servlet.TraitementData</servlet-class>
	</servlet>
	<servlet>
		<description>
		</description>
		<display-name>
		ListDeroulante</display-name>
		<servlet-name>ListDeroulante</servlet-name>
		<servlet-class>
		servlet.ListDeroulante</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>TraitementData</servlet-name>
		<url-pattern>/TraitementData</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>ListDeroulante</servlet-name>
		<url-pattern>/List</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>
</web-app>

voici mon javascript

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
 
<script type="text/javascript">
<!--
 
function getData()
{
        var requete = null;
        try
        {
                requete = new XMLHttpRequest();
        }
        catch (e)
        {
                requete = new ActiveXObject('Microsoft.XMLHTTP');
        }
        
        if ( requete == null ) return;
             
        requete.onreadystatechange = function() 
        { 
                if (requete.readyState == 4)
                {
                        window.status = "appel reçu...";
                        var rsp = null;
                        rsp = requete.responseText;
                        alert( "Réponse obtenue : " + rsp );
                        var arr = eval(rsp);
                        
                        var tmp = document.forms[0].id_modele.options;
                        tmp.length = 0;
                
                        for ( var i = 0; i < arr.length; i++ )
                        {
                                tmp[tmp.length] = new Option(arr[i][0], arr[i][1]);
                        }
                } 
        }
        
        /*var data = "idMarque=" + document.forms[0].s1.value;*/
        var data = "?id_marque=" + document.forms[0].id_marque.value;
    requete.open("POST", "GestionAbonnement/List", true);
    requete.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    requete.send(data);      
    window.status = "appel émit...";
        
        
}
 
//-->
</script>

Tout devrait normalement marché mais ça n'est pas le cas.

Voici l'erreur qu'il me renvoie, le chemin n'est pas déjà correct. J'ai modifié le chemin en ne mettant que la référence, il ne reconnaît pas toujours le chemin.

Merci encore pour ton aide.

Code:

1
2
3
4
5
6
7
8
9
...    
    /*var data = "idMarque=" + document.forms[0].s1.value;*/
    var data = "?id_marque=" + document.forms[0].id_marque.value;
    requete.open("POST", "/GestionAbonnement/List", true);
    requete.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    requete.send(data);      
    window.status = "appel émit...";
...

Le "/" devant !

Pas besoin du ? dans ?id_marque=
Par contre, tu ne peux pas garder le "_" dans le nom (d'où idMarque)

28/08/2008, 18h23
paquito

Merci à toi OButterlin pour toutes ces explications.
Tout marche maintenant bien.
Je peux clore maintenant cette discussion.