Discussion :

[james23]

Bonjour,

Je possède deux listes déroulantes qui se remplissent automatiquement a l'aide d'une base de donné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
 
<td><select name = "type voie" id ="type voie" style="width : 120px"> 
<%
	DBConnexion dbc_typeVoie = new DBConnexion();
	String sql_typeVoie = "SELECT DISTINCT nom_type_voie FROM adresse";
	ResultSet resultat_typeVoie = dbc_typeVoie.recupereRequete(sql_typeVoie);
	while(resultat_typeVoie.next())
	{
		out.print("<option>"+resultat_typeVoie.getString("nom_type_voie")+"</option>");
	}
	dbc_typeVoie.closeConnexion();
 
%>
</select></td>
<td><select name = "nom voie" id ="nom voie"style="width : 160px">
<%
	DBConnexion dbc_nomVoie = new DBConnexion();
	String sql_nomVoie = "SELECT DISTINCT nom_voie FROM adresse";
	ResultSet resultat_nomVoie = dbc_nomVoie.recupereRequete(sql_nomVoie);
	while(resultat_nomVoie.next())
	{
		out.print("<option>"+resultat_nomVoie.getString("nom_voie")+"</option>");
	}
	dbc_nomVoie.closeConnexion();
%>
</select></td>

je voudrai les lié en sorte de sorte que lorsque que je choisi un élément dans la premiere liste déroulante, je voudrai récupérer cette valeur pour pouvoir faire ma deuxieme requete pour pouvoir remplir ma deuxieme liste déroulante. Je voudrai que ceci soit fait sans recharger la page donc on m'a dit d'utiliser le javascript et l'ajax. Je programme en JSP sans servlet. J'ai déja commencé a faire le script mais sans succes je sais pas comment l'intégré. On m'a également parler de faire un objet JSON pour pouvoir faire ma deuxième requête. Si quelqu'un pourrai m'aider car je comprend pas trop


Voici la script que j'ai commencé:

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
 
/* Création de la variable globale qui contiendra l'objet XHR */
var requete = null;
 
function creerRequete()
{
    try
    {
        /* On tente de créer un objet XmlHTTPRequest */
        requete = new XMLHttpRequest();
    }
    catch (microsoft)
    {
        /* Microsoft utilisant une autre technique, on essays de créer un objet ActiveX */
        try
        {
            requete = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch(autremicrosoft)
        {
            /* La première méthode a échoué, on en teste une seconde */
            try
            {
                requete = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(echec)
            {
                requete = null;
            }
        }
    }
    if(requete == null)
    {
        alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
    }
 
 
}
/**
 * Fonction privée qui va mettre à jour l'affichage de la page.
 */
 
 function actualiserNomVoie()
{
    var listeNomVoie = requete.responseText;
    var blocListe = document.getElementById('nom_voie');
    blocListe.innerHTML = listeNomVoie;
}
 
 
 
function getDepartements(idr)
{
        var blocListe = document.getElementById('nom_voie');
        /* On crée l'objet XHR */
        creerRequete();
        /* Définition du fichier de traitement */
        var url = "test.jsp"
 
        /* Envoi de la requête à la page de traitement */
 
        requete.open('GET', url, true);
 
        requete.onreadystatechange = function()
 
        /* Mise à jour de l'affichage, on appelle la fonction apropriée */
 
		actualiserNomVoie();
 
        requete.send(null);
 
}

Si quelqu'un peut m'aider a réaliser cela.
Merci d'avance

[gwyohm]

Bonjour,

Tu ne peux pas changer le contenu d'un select via un innerHTML. Je te recommande une petite lecture
http://javascript.developpez.com/faq...js#listesLiees

[james23]

mais a quel moment on recupérer la valeur de la premiere liste déroulante? Car j'en ai besoin pour compléter ma deuxieme requete pour compléter ma deuxieme liste déroulante?

[james23]

J'ai tester le code que tu m'a mis en lien, sur ce que j'ai compris, il fait des insertion de ses tableau dans les select?

[gwyohm]

Le mieux est d'attendre que la sélection change, donc d'écouter l'événement onchange.

[james23]

Désolé mais je n'ai pas très bien saisie ce que tu m'a dit.

[gwyohm]

Tu dois probablement faire quelque chose comme

Code :

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

1
2
 
<select onchange="getDepartements(this.value)">

A chaque changement de la valeur de ce select, la fonction getDepartements est appelée avec la valeur sélectionnée en paramètre

[james23]

oui j'ai fais

Code :

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

1
2
3
4
5
6
7
 
<script language="javascript">
function getTypeVoie(selTypeVoie)
{
	var type_voie=selTypeVoie.value;
}					
</script>

et dans mon input

Code :

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

1
2
 
<input type="text" id = "numVoie" name="numVoie" onchange = "getTypeVoie(this.value)"/>

[gwyohm]

Attention tu demandes 2 fois la valeur ! La deuxième fois ca ne fonctionnera pas !

Code :

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

1
2
3
4
5
6
7
<script language="javascript">
function getTypeVoie(selTypeVoie)
{
	var type_voie=selTypeVoie.value;
}					
</script>

Code :

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

1
2
<input type="text" id = "numVoie" name="numVoie" onchange = "getTypeVoie(this.value)"/>

L'un des 2 est à supprimer...

[james23]

meme la 1er fois ça ne marche pas puisque quand je fais une

alert("type_voie")
sa me met undefined

[gwyohm]

Les options du select sont générées sans value...

Code :

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

1
2
3
4
5
6
7
8
9
10
<select name = "type voie" id ="type voie" style="width : 120px"> <%
DBConnexion dbc_typeVoie = new DBConnexion();
String sql_typeVoie = "SELECT DISTINCT nom_type_voie FROM adresse";
ResultSet resultat_typeVoie = dbc_typeVoie.recupereRequete(sql_typeVoie);
while(resultat_typeVoie.next())	{
  out.print("<option>"+resultat_typeVoie.getString("nom_type_voie")+"</option>");
}
dbc_typeVoie.closeConnexion();
%>
</select>

à compléter

Code :

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

out.print("<option value=\"" + resultat_typeVoie.getString("nom_type_voie") + "\">"+resultat_typeVoie.getString("nom_type_voie")+"</option>");

D'ailleurs il serait plus simple d'avoir le code html généré par la jsp et non le code de la JSP

[gwyohm]

Ben tu les as

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<%
	DBConnexion dbc_nomVoie = new DBConnexion();
	String sql_nomVoie = "SELECT DISTINCT nom_voie FROM adresse";
	ResultSet resultat_nomVoie = dbc_nomVoie.recupereRequete(sql_nomVoie);
	while(resultat_nomVoie.next())
	{
		out.print("<option>"+resultat_nomVoie.getString("nom_voie")+"</option>");
	}
	dbc_nomVoie.closeConnexion();
%>

il faut juste que tu adaptes ta requetes. Ta JSP test.jsp doit ressembler à ca :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<%
DBConnexion dbc_nomVoie = new DBConnexion();
String sql_nomVoie = "SELECT DISTINCT nom_voie FROM adresse where nom_type_voie='" + request.getParameter("type").replaceAll("'", "''") + "'";
	ResultSet resultat_nomVoie = dbc_nomVoie.recupereRequete(sql_nomVoie);
        out.print("[");
	while(resultat_nomVoie.next())
	{
  out.print("{\"text\": \"" + resultat_nomVoie.getString("nom_voie").replaceAll("\"", "\\\"") + "\",\"value\":\"" + resultat_nomVoie.getString("nom_voie").replaceAll("\"", "\\\"") + "\"}");
	}
        out.print("]");
	dbc_nomVoie.closeConnexion();
%>

[E.Bzz]

Ben tu les as

Ah oui, tiens !

+1

A+