[AJAX] Liaison de 2 listes

Salut..
j'aimerais rendre 2 listes liées
voici ma premiere liste :

Code:

1
2
3
4
5
6
7
8
<select name="listeFournisseurs" id="listeFournisseurs" >
    <option value="" disabled selected>Choisissez un fournisseur...</option>
    <%-- Boucle sur la map des fournisseurs --%>
    <c:forEach items="${ fournisseurService.findAll() }" var="fournisseurs">                                    
    <option value="${ fournisseurs.idFournisseur }">${fournisseurs.nom } : ${ fournisseurs.description }</option>
    <c:set var="var1" value="${ fournisseurs.idFournisseur }" scope="request" />
    </c:forEach>
</select>

ma seconde liste :

Code:

1
2
3
4
5
6
7
8
<select  name="listeProduits" id="listeProduits" size="5" >
    <option value="" disabled>Choisissez un produit...</option>
    <%-- Boucle sur la liste des produits --%>
    <c:forEach items="${ fournisseurService.findById(var1).getProduits() }" var="produits">
    <%--  L'expression EL ${ produits.description } permet de cibler la desc de  l'objet Produit stocké dans la liste--%>
    <option value="${ produits.idProduit }">${produits.description }</option>
    </c:forEach>
</select>

je sais que je dois utiliser une fonction javascript pour liée les 2 listes.. je suis pas douée en javascript..
merci de vos suggestions et solutions d'avance :p

:recherch:
:arrow: Listes déroulantes liées entre elles.

Liaison de 2 listes

j'ai essayé d'utiliser la mm approche mais j'obtiens pas le résultat souhaité ( on choisissant un fournisseur dans la 1 liste j 'obtient les produit dans la 2 liste)

voici le code de ma jsp :

Code:

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 
<jsp:useBean id="fournisseurService" class="com.project.service.FournisseurService"></jsp:useBean>
<jsp:useBean id="produitService" class="com.project.service.ProduitService"></jsp:useBean>
<jsp:useBean id="commandeApproGst"	class="com.project.gestionBeans.CreationCommandeApproGst"></jsp:useBean>
<jsp:useBean id="commandeAppro" class="com.project.beans.CommandeAppro"></jsp:useBean>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('listeProduits').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxProduits.jsp",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('listeFournisseurs');
				idfournisseur = sel.options[sel.selectedIndex].value;
				xhr.send("idFournisseur="+idfournisseur);
			}
		</script>
<title>Création d'une commande</title>
</head>
<body>
	<c:import url="/menuAppro.jsp" />
	<div>
		<form method="post" action="<c:url value="/creationCommandeAppro"/>">
			<fieldset>
				<legend>Création d'une commande</legend>
				<fieldset>
					<legend>Informations fournisseur</legend>
					<%-- Si et seulement si la liste des fournisseurs  n'est	pas vide, alors on propose un choix à l'utilisateur --%>
 
					<c:if test="${ !empty fournisseurService.findAll() }">
						<label for="choixNouveauFournisseur">Nouveau fournisseur ?	<span class="requis">*</span>
						</label>
						<input type="radio" id="choixNouveauFournisseur" name="choixNouveauFournisseur" value="nouveauFournisseur" checked /> Oui
						<input type="radio" id="choixNouveauFournisseur" name="choixNouveauFournisseur" value="ancienFournisseur" /> Non	<br />
						<br />
					</c:if>
 
					<div id="nouveauFournisseur">
						<c:import url="/creerFournisseur.jsp" />
					</div>
					<%-- Si et seulement si la liste des fournisseurs  n'est	pas vide, alors on crée la liste déroulante --%>
 
					<c:if test="${ !empty fournisseurService.findAll() }">
						<div id="ancienFournisseur">
							<select name="listeFournisseurs" id="listeFournisseurs" onchange='go()'>
								<option value="" disabled selected>Choisissez un
									fournisseur...</option>
								<%-- Boucle sur la map des fournisseurs --%>
								<c:forEach items="${ fournisseurService.findAll() }" var="fournisseurs">
									<option value="${ fournisseurs.idFournisseur }">${fournisseurs.nom }: ${ fournisseurs.description }</option>
 
								</c:forEach>
							</select>
						</div>
					</c:if>
				</fieldset>
				<fieldset>
				<legend>Informations commande</legend>
				<label for="dateCommande">Date <span class="requis">*</span></label>
				<input type="text" id="dateC" name="dateCommande" value="<c:out value="${commandeAppro.date}"/>" size="30" maxlength="30" disabled />
				<br /> 
				<label for="produit">Produit <span class="requis">*</span></label>
				<div id="produits">
						<select  name="listeProduits" id="listeProduits" size="5" >
							<option value="" disabled>Choisissez un produit...</option>					
						</select>
						<span class="erreur">${form.erreurs['listeProduits']}</span>
				</div>
				<br /> 				
				<label for="quantite">Quantité <span class="requis">*</span></label> 
				<input type="text" id="quantite" name="quantite" value="<c:out value="${commandeAppro.quantite}"/>"	size="30" maxlength="30" /> <span class="erreur">${form.erreurs['quantite']}</span>					
				<br />
 
				<label for="statutLivraison">Livraison prise en charge ?</label> 
				<input type="radio" id="choixLivraison"	name="choixLivraison" value="oui"  /> Oui
				<input type="radio" id="choixLivraison" name="choixLivraison" value="non" checked/> Non <br /><br />
				<br />
				<label for="dateRec">Date de reception <span class="requis">*</span></label>
				<input type="text" id="dateRec" name="dateRec" value="<c:out value="${commandeAppro.dateRec}"/>" size="30" maxlength="30"  /> <span class="erreur">${form.erreurs['dateRec']}</span>
				<br /> 
				<p class="info">${ commandeApproGst.resultat }</p>
			</fieldset>
			</fieldset>
			<input class="bouton" type="submit" value="Valider" /> <input class="bouton" type="reset"	value="Remettre à zéro" /> <br />
		</form>
		</form>
	</div>
	<script src="<c:url value="/inc/jquery.js"/>"></script>
	<%-- Petite fonction jQuery permettant le remplacement de la première
	partie du formulaire par la liste déroulante, au clic sur le bouton radio. --%>
	<script>
		jQuery(document).ready(
				function() {
					/* 1 - Au lancement de la page, on cache le bloc d'éléments du
					 formulaire correspondant aux clients existants */
					$("div#ancienFournisseur").hide();
					/* 2 - Au clic sur un des deux boutons radio "choixNouveauClient", onaffiche le bloc d'éléments correspondant (nouveau ou ancien client) */
					jQuery('input[name=choixNouveauFournisseur]:radio').click(
							function() {
								$("div#nouveauFournisseur").hide();
								$("div#ancienFournisseur").hide();
								var divId = jQuery(this).val();
								$("div#" + divId).show();
							});
				});
	</script>
</body>
</html>

ajaxProduits.jsp code :

Code:

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
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <jsp:useBean id="fournisseurService" class="com.project.service.FournisseurService"></jsp:useBean>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insérez un titre ici</title>
</head>
<body>
<select name="listeProduits" id="listeProduits" size="5">
 
 
	<%-- Boucle sur la liste des produits --%>
	<%-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --%>
	<%-- <c:forEach items="${fournisseurService.findById(var1).getProduits()}" var="produits"> --%>
	<c:forEach items="${fournisseurService.findById(param['idFournisseur']).getProduits()}" var="produits">
		<%--  L'expression EL ${ produits.description } permet de cibler la desc de  l'objet Produit stocké dans la liste--%>
		<option value="${ produits.idProduit }">${ produits.description }</option>
	</c:forEach>
</select>
<span class="erreur">${form.erreurs['listeProduits']}</span>
</body>
</html>

merci encore :) ..

Bonjour,

La prochaine fois, montre nous le code HTML généré de la page appelante de la requête AJAX.

Citation:

Code:

document.getElementById('listeProduits').innerHTML = leselect;

à remplacer par

Code:

document.getElementById('produits').innerHTML = leselect;

Ensuite, la page appelée ne doit retournée qu'une balise select pré-remplie avec ses options (pas de balises <html>, <meta>, ...).
Comment tu récupères la variable postée "idFournisseur" et comment tu l'utilises.

A+.

Citation:

Envoyé par andry.aime

Bonjour,

La prochaine fois, montre nous le code HTML généré de la page appelante de la requête AJAX.

à remplacer par

Code:

document.getElementById('produits').innerHTML = leselect;

j'ai effectuer ce changement ..ça marche comme sur des roulettes mercii :)

Citation:

Ensuite, la page appelée ne doit retournée qu'une balise select pré-remplie avec ses options (pas de balises <html>, <meta>, ...).

A+.

voici le code de la page appele apres modification :)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <jsp:useBean id="fournisseurService" class="com.project.service.FournisseurService"></jsp:useBean> <select name="listeProduits" id="listeProduits" size="5"> <%-- Boucle sur la liste des produits --%> <%-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --%> <%-- <c:forEach items="${fournisseurService.findById(var1).getProduits()}" var="produits"> --%> <c:forEach items="${fournisseurService.findById(param['idFournisseur']).getProduits()}" var="produits"> <%-- L'expression EL ${ produits.description } permet de cibler la desc de l'objet Produit stocké dans la liste--%> <option value="${ produits.idProduit }">${ produits.description }</option> </c:forEach> </select> <span class="erreur">${form.erreurs['listeProduits']}</span>
Citation:

Comment tu récupères la variable postée "idFournisseur" et comment tu l'utilises.

j'ai pas bien saisi ce k tu demande ! :)