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

**paquito** · 26/08/2008, 11h49

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

**OButterlin** · 26/08/2008, 12h16

É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+

**paquito** · 26/08/2008, 12h57

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 :

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
 
<%@ 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 :

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
 
<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 :

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
 
 
<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.

**OButterlin** · 26/08/2008, 14h05

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 :

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

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+

**paquito** · 26/08/2008, 15h28

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 :

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

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

code javascript

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
 
<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

**OButterlin** · 26/08/2008, 16h47

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

A+

**paquito** · 26/08/2008, 17h05

Je te remercie beaucoup OButterlin.

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

**paquito** · 26/08/2008, 18h19

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 :

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

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

**OButterlin** · 27/08/2008, 08h42

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

Code :

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

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)

**paquito** · 27/08/2008, 10h27

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

**OButterlin** · 27/08/2008, 10h35

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)

**paquito** · 27/08/2008, 10h59

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 :

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
 
<%@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:

**paquito** · 27/08/2008, 11h15

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

**OButterlin** · 27/08/2008, 12h09

Bon, adapte ça...

Servlet

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
 
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 :

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
 
<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+

**paquito** · 27/08/2008, 12h56

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 :

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

1
2
 
requete.open("POST", "../src/servlet/TestServlet.java", true);

Merci pour ton aide
Voici une image de mon arborescence sous eclipse

**OButterlin** · 27/08/2008, 13h57

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

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

Code :

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

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)

**paquito** · 27/08/2008, 14h58

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 :

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
 
<?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 :

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
 
<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.

**OButterlin** · 27/08/2008, 15h40

Code :

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

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)

**paquito** · 28/08/2008, 18h23

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

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

Servlets/JSP Java

Discussions similaires

Partager

Partager