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+

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

Servlets/JSP Java

Vue hybride

Discussions similaires

Partager

Partager