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

[james23]

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
 
<td><select name = "typevoie" id ="typevoie" onchange = "getTypeVoie(this)"> 
<%
	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 value = "+ resultat_typeVoie.getString("nom_type_voie") +">"+resultat_typeVoie.getString("nom_type_voie")+"</option>");
 
	}
	dbc_typeVoie.closeConnexion();
%>
</select></td>
 
<script language="javascript">
function getTypeVoie(selTypeVoie)
{
	var typevoie = selTypeVoie.value;
}
</script>

[james23]

Cela marche tres bien mais je voudrai recupere la valeur que me renvoie le javascript pour pour faire une deuxieme liste avec ce type de requete requete

select nom_voie from adresse where type_voie= ' '

[gwyohm]

Et bien c'est à ce moment que tu lances une requete AJAX pour récupérer les valeurs...
tout est là:
http://siddh.developpez.com/articles/ajax/#LIV

[james23]

dans ce lien il utiliser innerHTML pourtant tu m'a dit que cela ne changer pas le select :s

[gwyohm]

de mémoire ça ne fonctionne pas sous ie... il vaut mieux que ta jsp renvoie du JSON, puis au retour ajax, évaluer ce json et construire les options à la main

[james23]

quand tu dit à la main c'est en dur?

[gwyohm]

à la main, ca veut dire que tu recois un tableau d'options valeur et que tu créées pour chaque element l'option:

ta jsp va renvoyer un flux du type:

Code :

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

1
2
 
[{"text":"Le libellé 1", "value": "1"},{"text":"Le libellé 2", "value": "2"},{"text":"Le libellé 3", "value": "3"}]

coté javascript, tu va implémenter ton callback:

Code :

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

1
2
3
4
5
 
requete.onreadystatechange = function() {
  var tableauValeurs = eval("(" + requete.responseText + ")");
  actualiserNomVoie(tableauValeurs);
};

donc ta fonction actualiserNomVoie:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var actualiserNomVoie = function(tableauVal) {
  // on recupere le select
  var selectNomVoie = document.getElementById("xxx");
  // on vide ce qu'il y avait avant
  for(var i=selectNomVoie.options.length-1;i>=0;i--) {
   selectNomVoie.options[i] = null;
  }
  // on rempli avec les nouvelles valeurs
  for(var i=0;i<tableauVal.length; i++) {
   var opt = new Option(tableauVal[i].text, tableauVal[i].value);
   selectNomVoie.options[selectNomVoie.options.length] = opt;
  }
};

[james23]

oki merci bien cela ma bien aider mais ya une chose que je comprend pas

car j'ai une table sql
adresse(id_adresse, typeVoie,nomVoie)
et deux liste déroulante

1)la premiere liste déroulante je la complete en faisant un select typeVoie from adresse
je récupére cette valeur par le biais de javascript
2)pour executer ma deuxieùe requete pour compléter la deuxieme liste
select nomVoie from adresse where typeVoie = 'rue' par exemple

et a quel moment je fais la deuxieme partie
?
désoler de pas comprendre tout de suite
Merci encore

[gwyohm]

C'est l'objet de la requete AJAX:
Au chargement de la page, tu charges les types de voies dans le select, mais dans le select des noms de voies, tu mets une option en dur du type "choisissez d'abord un type de voie".
Quand l'utilisateur sélectionne un type de voie, tu est notifié du changement via le javascript que nous avons vu précédement. A ce moment tu déclenches une requete AJAX vers une page JSP très simple qui est chargée elle de faire la requete pour obtenir les noms de voies en fonction d'un type. Pour faciliter le code appelé à la fin de l'execution de la requete, le format JSON est approprié. Donc pour répondre à ta question, la deuxieme partie de la requete est faite dans la JSP qui est appelée via AJAX.