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