Listes Déroulantes liées dans une JSP

**andyajram** · 08/05/2015, 10h21

Bonjour, je galère sur un problème que j'arrive pas a comprendre comment le résoudre , j'ai deux listes déroulante Délégations et guichets , je voudrais que la dernière se remplisse en fonction du choix dans la première liste déroulante j'arrive a afficher les données sur les deux listes , mais j'arrive pas a faire la liaisons entre eux, voici mon code JSP avec lequel j'affiche les données :

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
 
<tr> <td><b> Délégation:</b></td>
					<td> <select id="delegations" name="delegations">
				<option> Choisir une Délégation</option>
    		 <% 
    		 ResultSet rs= ControleParDelegation.getdelegations();
    		 while(rs.next()){
    		 %>
					<option> <%= rs.getString("lib_dlg") %></option>			
					<%}  
						%>
						</select></td>
				</tr>
				<tr> <td><b> Guichet:</b></td>
					<td> <select id="guichets" name="guichets">
						<option>Choisir Un Guichet</option>
						<% 
    		 ResultSet rs1= ControleParGuichet.getguichets();
    		 while(rs1.next()){
    		 %>
					<option> <%= rs1.getString("g.guichet_cod") %></option>			
						<%}  
							%>
						</select></td>

Merci d'avance

**sekaijin** · 08/05/2015, 10h58

Bonjour

Déjà tu poste le code HTML que tu vois dans ton navigateur (afficher la source) et non le code JSP

le navigateur n'a pas accès à ta jsp.
Il a accès à ce que produit ta JSP.

Elle peut très bien faire 500 lignes de java et ne produire que les texte

Code :

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

TOTO

Ti navigateur ne verra alors que TOTO.

le code JSP nous est donc d'aucune utilité.

Ensuite il te faut réfléchir à qui fait quoi.

L'utilisateur active le lien de ta JSP
Le navigateur envoie une requête au serveur
Le serveur reçoit la requête
Le serveur ouvrer un contexte d'exécution
Le serveur exécute la JSP
Le serveur envoi le résultat de l'exécution au navigateur
Le serveur ferme le contexte
Le Navigateur reçoit le résultat
Le navigateur Lit le texte HTML du résultat
Le navigateur interprète le texte HTML du résultat
Le navigateur crée les éléments de la page (DOM)
L'utilisateur choisit une valeur dans la première liste.
Le navigateur change la valeur de l'option dans le DOM
Le navigateur génère un événement "change"
Le code Javascript capte l'événement
Le code javascript exécute la fonction associé à l'événement.

Comme tu le vois il y a bien longtemps que la JSP a fini son travail lorsque le javascript s'exécute.

pour ce qui est de gérer des liste liées localement (navigateur) ou à distance (via le serveur)
Il y a des dizaine de discussions sur le sujet des tuto et de la doc

A+JYT

**andyajram** · 08/05/2015, 11h03

Bonjour , les résultat obtenus viennent de ces deux classes

Code java :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class ControleParDelegation extends ConnexionManager{
	static private PreparedStatement pst=null;
	public static ResultSet getdelegations(){
		ResultSet rs=null;
		try {
			String sql="Select lib_dlg from delegations";
			pst= getConnection().prepareStatement(sql);
			rs=pst.executeQuery();
		} catch (Exception e) {
			System.out.print(e.getMessage());
		}
		return rs;
	}
}

Code java :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class ControleParGuichet extends ConnexionManager{
	static private PreparedStatement pst=null;
	public static ResultSet getguichets(){
		ResultSet rs1=null;
		try {
			String sql="SELECT g.guichet_cod FROM guichets g INNER JOIN agences a ON a.agc_cod = g.agc_cod INNER JOIN delegations d ON d.ref_dlg = a.ref_dlg WHERE d.lib_dlg LIKE '%Siege%'";
			pst= getConnection().prepareStatement(sql);
			rs1=pst.executeQuery();
		} catch (Exception e) {
			System.out.print(e.getMessage());
		}
		return rs1;
	}
}

**sekaijin** · 08/05/2015, 11h21

encore une fois le code de ton serveur ne nous sert à rien

javascript s'execute sur le poste du client
java sur le serveur

tu ouvre ton navigateur
tu active ton url
et lorsque la page est affichée
tu fais "afficher la source"

Tu aura alors le code HTML du navigateur
Qui est le SEUL code auquel à accès javascript
le reste n'existe pas.

A+JTT

**andyajram** · 08/05/2015, 11h27

Désolé , mais je ne comprend pas ce que tu veux !!! c'est ça mon code que j'utilise pour afficher mes liste déroulante je ne sais pas de quoi tu as besoin pour m'aider ! tu peux être plus précis ?!
MErci

**sekaijin** · 08/05/2015, 12h16

As tu lu ce que j'ai écris ?
LE CODE JSP n'est JAMAIS visible par le navigateur
SEUL le CODE HTML est visible par JAVASCRIPT

Je vais faire simple

tu as un code JAVA qui produit un code HTML
le code HTML est interprété par le navigateur qui produit le DOM
Le code Javascript manipule le DOM

Alors tes classes java sont codé comme tu veux
cela n'a aucune importance
la seule chose qui compte c'est ce que reçoit le navigateur

DONC tu vas dans ton NAVIGATEUR et tu AFFICHES la SOURCE
DANS le NAVIGATEUR. et UNIQUEMENT DANS le NAVIGATEUR.

es-tu sur de savoir comment fonctionne un serveur web et un navigateur ?

A+JYT

**andyajram** · 08/05/2015, 12h23

le Code que j'ai est ce que j'ai posté je ne sais pas ce que tu veux d'autres !! même si je fais afficher code source ca ne va pas donner ce qui est utile a mon problème , voila ce que ca donne

Code html :

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
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
<html>
<head>
<script>
function loadFrame (elm){
    var frame1 = document.getElementById('IFrame1');
    frame1.src = elm.dataset.src;
}
</script>
<script>
function loadFrame2 (elm){
    var frame2 = document.getElementById('IFrame2');
    frame2.src = elm.dataset.src;
}
</script>
<script>
function loadFrame3 (elm){
    var frame3 = document.getElementById('IFrame3');
    frame3.src = elm.dataset.src;
}
</script>
<script>
function loadFrame4 (elm){
    var frame4 = document.getElementById('IFrame4');
    frame4.src = elm.dataset.src;
}
</script>
<script>
function loadFrame5 (elm){
    var frame5 = document.getElementById('IFrame5');
    frame5.src = elm.dataset.src;
}
</script>
<script>
function loadFrame6 (elm){
    var frame6 = document.getElementById('IFrame6');
    frame6.src = elm.dataset.src;
}
</script>
<script>
function loadFrame7 (elm){
    var frame7 = document.getElementById('IFrame7');
    frame7.src = elm.dataset.src;
}
</script>
<script>
function loadFrame8 (elm){
    var frame8 = document.getElementById('IFrame8');
    frame8.src = elm.dataset.src;
}
</script>
<style>
  body {
    position: absolute;
    min-height: 100%;
    width: 100%;
    background-image: url(images/Accueil1.png);  
    background-size: cover;
}
    </style>
    <!-- Load jQuery from Google's CDN -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <!-- Source our javascript file with the jQUERY code -->
    <script src="script.js"></script>
    <link rel="stylesheet" href="dropdown-menu.css" />
    <title>Bienvenue Abdelaziz</title>
    <link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
  </head>
<body>
<br />
<br />
<ul class="menu-vertical" style="margin-top: 120px;margin-left:-9;">
	<td><font color="219E8D" size="5" ><Big><b>Ouvrir</b></Big></font></td>
   	<li class="mv-item"><a data-src="ControledelaJournee.jsp" onClick="loadFrame(this)">Contrôle de la Journée</a></li>
  	<li class="mv-item"><a data-src="MainCouranteSolde.jsp" onClick="loadFrame(this)">Main Courante Solde</a></li>
  	<li class="mv-item"><a data-src="MainCouranteMouvement.jsp" onClick="loadFrame(this)" align="left">Main Courante Mouvement</a></li>
  	<li class="mv-item"><a  data-src="Reglements.jsp" onClick="loadFrame(this)">Réglements</a></li>
  	<li class="mv-item"><a  data-src="PortefeuilleResil.jsp" onClick="loadFrame(this)">Portefeuille Résilié</a></li>
  	<li class="mv-item"><a data-src="EtatPortefeuille.jsp" onClick="loadFrame(this)">Etat Portefeuille</a></li>
  	<li class="mv-item"><a data-src="Transactions.jsp" onClick="loadFrame(this)">Transactions</a></li>
  	<li class="mv-item"><a data-src="VentilationComptable.jsp" onClick="loadFrame(this)">Ventilation Comptable</a></li>
  	<td><font color="219E8D" size="5" ><Big><b>Action</b></Big></font></td>
  	<li class="mv-item"><a href="#" >Clôture de la Journée</a></li>
  	<li class="mv-item"><a href="index.jsp">Déconnexion</a></li> 
</ul>
<br />
<br />
<IFRAME marginWidth=2 marginHeight=0  frameBorder=0 width=1000 scrolling=no height=800 name="I1" id="IFrame1" style=" margin-top: -575px;margin-left: 300;" align="left">
</IFRAME>
<IFRAME marginWidth=2 marginHeight=0  frameBorder=0 width=1000 scrolling=no height=800 name="I2" id="IFrame2" style=" margin-top: 2px;margin-left: 300;" align="left">
</IFRAME>
<IFRAME marginWidth=2 marginHeight=0  frameBorder=0 width=1000 scrolling=no height=800 name="I3" id="IFrame3" style=" margin-top: 2px;margin-left: 300;" align="left">
</IFRAME>
<IFRAME marginWidth=2 marginHeight=0  frameBorder=0 width=1000 scrolling=no height=800 name="I4" id="IFrame4" style=" margin-top: 2px;margin-left: 300;" align="left">
</IFRAME>
<IFRAME marginWidth=2 marginHeight=0  frameBorder=0 width=1000 scrolling=no height=800 name="I5" id="IFrame5" style=" margin-top: 2px;margin-left: 300;" align="left">
</IFRAME>
<IFRAME marginWidth=2 marginHeight=0  frameBorder=0 width=1000 scrolling=no height=800 name="I6" id="IFrame6" style=" margin-top: 2px;margin-left: 300;" align="left">
</IFRAME>
<IFRAME marginWidth=2 marginHeight=0  frameBorder=0 width=1000 scrolling=no height=800 name="I7" id="IFrame7" style=" margin-top: 2px;margin-left: 300;" align="left">
</IFRAME>
<IFRAME marginWidth=2 marginHeight=0  frameBorder=0 width=1000 scrolling=no height=800 name="I8" id="IFrame8" style=" margin-top: 2px;margin-left: 300;" align="left">
</IFRAME>
</body>
</html>

**sekaijin** · 08/05/2015, 12h54

Cela illustre exactement mon propos le code JSP ne permet pas de comprendre ce que le navigateur reçois
Il n'y a aucune liste déroulante dans ta page !! contrairement à ce que laisse supposer ta jsp.

mais je vois que tu utilises des iframe
un iframe c'est ouvrir une AUTRE page dans un cadre

pour savoir ce que le navagateur traite et donc comment sont liés tes listes il n'y a qu'une solution
avoir le code HTML de la page (iframe) qui contient ces listes.

pour y parvenir il te faut ouvrir l'url de l'IFRAME dans le navigateur et afficher la source.

Il faut savoir que chaque iframe est une page indépendante des autres il n'y a aucun liens entre elles.
C'est généralement une mauvaise conception que d'utiliser 2 iframes dans une page (sauf cas exceptionnel)
en avoir autant est une première pour moi. Mais l'expérience montre que plus il y en a plus le développement devient compliqué
plus l'expérience de l'utilisateur est difficile.

enfin si tes deux liste sont dans deux iframe
tu peux laisser tomber. c'est mort.
une iframe étant une page indépendante de l'autre il est quasi impossible de les faire communiquer entre elles.
même si tu parviens à établir ce lien il suffit qu'une des deux soit ré-affichée pour que tout le javascript tombe en erreur. il faut alors tout recommencer.

Je vois là un gros problème de conception générale.
il est beaucoup plus simple et efficace de faire des servlets qui produisent des fragment HTML (et non des pages) et d'utiliser AJAX pour inclure ces fragment dans des div de la page.
tu as alors une seule page tous les objets DOM sont dans le même contexte Javascript et la communication deviens naturelle.

A+JYT

**andyajram** · 08/05/2015, 13h10

ce que je t'ai donnée n'est que le code de la page d’accueil et les liste déroulante sont dans une seul eframe les autres eframe sont en relation avec d'autres pages que j'affiche voila le code où ya mes liste déroulante

Code html :

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
<table id="tab1" style="width: 400px; position: absolute; top: 88px; left: 200px ;border-width:5px;border-style:solid;" border-color="8DD8E3">
			<caption  align="left"><FONT color="#8DD8E3" size="4"><b><big> Critères de Sélection </big></b> </FONT></caption>
 
				<tr> <td><b> Délégation:</b></td>
					<td> <select id="delegations" name="delegations">
				<option> Choisir une Délégation</option>
 
					<option>  Siege</option>			
 
					<option>  Casa-Anfa</option>			
 
					<option>  Ain Chok</option>			
 
					<option>  El Fida</option>			
 
					<option>  Ben M Sick</option>			
 
					<option>  Ain Sebaa</option>			
 
					<option>  Sidi Bernoussi</option>			
 
					<option>  Mohammedia</option>			
 
						</select></td>
				</tr>
				<tr> <td><b> Guichet:</b></td>
					<td> <select id="guichets" name="guichets">
						<option>Choisir Un Guichet</option>
 
					<option> 46</option>			
 
					<option> 47</option>			
 
						</select></td>
				</tr>

mais normalement elle sont remplie depuis la base de données pas comme ce qui est affiché ici c'est juste parceque la page est éxécutée

**sekaijin** · 08/05/2015, 18h51

il n'y a aucun javascript dans ta page

je comprends de moins en moins ce que tu fais
je te conseille de lire la FAQ et les tutos sur le sujet
Car là je ne vois vraiment pas comment on peut t'aider.

A+JYT

Listes Déroulantes liées dans une JSP

JavaScript

Discussions similaires

Partager

Partager