Visibilité d'un panel

**Mqnnnn** · 22/03/2010, 12h34

Bonjour,

Je me suis mis sur un projet ASP.net depuis. Malheureusement, étant novice en la matière, je galère vraiment bcp.

Dans ma page, j'ai créé une liste déroulante et 4 panels.
Je voudrais à partir de la liste déroulante afficher le panel correspondant et rendre invisible les autres.

Malheureusement, je n'ai pas trouver les options visibility des mes panels et rien ne marche.

Voici mon code js :

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
 
    function ChoixGestion(){
 
	    if (document.getElementById("listGestion").value == "agence")
	    {
	        alert(document.getElementById("panel_agence").getAttribute("visibility");
	        document.getElementById("panel_agence").visibility = "visible";
	        document.getElementById("panel_etablissement").visibility = "hidden";
	        document.getElementById("panel_motif").visibility = "hidden";
	        document.getElementById("panel_section").visibility = "hidden";
	    } 
	    else if (document.getElementById("listGestion").value == "etablissement")
	    {
	        document.forms.item("panel_agence").visible = false;
	        document.forms.item("panel_etablissement").visible = true;
	        document.forms.item("panel_motif").visible = false;
	        document.forms.item("panel_section").visible = false;
	    }
	    else if (document.getElementById("listGestion").value == "motif")
	    {
	        document.forms.item("panel_agence").visible = false;
	        document.forms.item("panel_etablissement").visible = false;
	        document.forms.item("panel_motif").visible = true;
	        document.forms.item("panel_section").visible = false;
	    }
	    else if (document.getElementById("listGestion").value == "section")
	    {
	        document.forms.item("panel_agence").visible = false;
	        document.forms.item("panel_etablissement").visible = false;
	        document.forms.item("panel_motif").visible = false;
	        document.forms.item("panel_section").visible = true;
	    }
    }

Pouvez-vous m'aider svp ?
J'en aurai grandement besoin.

Mqnnnn

**vermine** · 22/03/2010, 12h39

Bonjour,

A priori je dirais de passer par le style:

Code :

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

1
2
.style.visibility = "visible";

**Mqnnnn** · 22/03/2010, 12h47

Merci de ta réponse, mais j'avais déjà essayé cette solution et malheureusement, cela ne marche pas.
Je viens encore d'essayer.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function ChoixGestion(){
 
	    if (document.getElementById("listGestion").value == "agence")
	    {
	        alert(document.getElementById("listGestion").value);
	        document.getElementById("panel_agence").style.visibility = "visible"; 
	        document.getElementById("panel_etablissement").style.visibility = "hidden";
	        document.getElementById("panel_motif").style.visibility = "hidden";
	        document.getElementById("panel_section").style.visibility = "hidden";
	    }

Aurais-tu une autre idée ou qqun d'autre aurai-t-il une idée sur le sujet ?

**vermine** · 22/03/2010, 12h52

Pourrions-nous avoir le code de création de ce que vous appelez "panel" ?
Ou bien tant qu'à faire, le code HTML généré.

**Mqnnnn** · 22/03/2010, 12h55

Voici le code HTML d'un panel :

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
 
<asp:Panel ID="panel_etablissement" runat="server" Visible="False">
 
                            <div id="oblig" align=left><u>Gestion des Etablissements :</u></div><br /><br />
                            <asp:Label ID="Label11" runat="server" align=left Text="Selection de l'établissement (modification ou suppression seulement) :"></asp:Label>
                            <asp:ListBox ID="listEtablissement2" runat="server" Rows="1" ><asp:ListItem Selected="True" Text="----------" Value="-1"></asp:ListItem></asp:ListBox>
                            <br /><br /><br />
 
                            <asp:Table ID="Table2" runat="server">
                                <asp:TableRow>
                                    <asp:TableCell><asp:Label ID="Label10" runat="server" Text="Nom de l'établissement :"></asp:Label></asp:TableCell>
                                    <asp:TableCell><asp:TextBox ID="txtEtablissementNom" runat="server"></asp:TextBox></asp:TableCell>
                                </asp:TableRow><asp:TableRow>
                                    <asp:TableCell><br /><br /><br /></asp:TableCell>
                                </asp:TableRow>
                            </asp:Table>
 
                            <input id="btnEtablissement_ajout" type="submit" value="Ajouter" align=left/>
                            <input id="btnEtablissement_modifier" type="submit" value="Modifier" align=middle/>
                            <input id="btnEtablissement_supprimer" type="submit" value="Supprimer" align=right/>
 
                        </asp:Panel>

Est-ce suffisant ? Ou il faut tout le code HTML ?

**Mqnnnn** · 22/03/2010, 13h01

Voici ma page HTML :

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
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="gestion.aspx.cs" Inherits="Web_interim.gestion" %>
 
<%@ Register Assembly="eWorld.UI.Compatibility, Version=2.0.6.2393, Culture=neutral, PublicKeyToken=24d65337282035f2"
    Namespace="eWorld.UI.Compatibility" TagPrefix="cc1" %>
 
 
<%@ Register Assembly="eWorld.UI, Version=2.0.6.2393, Culture=neutral, PublicKeyToken=24d65337282035f2"
    Namespace="eWorld.UI" TagPrefix="ew" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
 
<head id="Head1" runat="server">
    <title>BBGR</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="stylesheet1.css" type="text/css" />
    <style type="text/css">
        .style1
        {
            font-size: x-large;
            font-weight: bold;
            color: #C2ABAF;
            font-style: normal;
            font-variant: normal;
            line-height: normal;
            font-family: Tahoma, sans-serif;
        }
        .style2
        {
            font-size: medium;
            font-weight: bold;
            color: #AB0132;
            font-style: normal;
            font-variant: normal;
            line-height: normal;
            font-family: Tahoma, sans-serif;
        }
    </style> 
 
<script type="text/javascript">
 
    function ChoixGestion(){
 
	    if (document.getElementById("listGestion").value == "agence")
	    {
	        alert(document.getElementById("listGestion").value);
	        document.getElementById("panel_agence").style.visibility = "visible"; 
	        document.getElementById("panel_etablissement").style.visibility = "hidden";
	        document.getElementById("panel_motif").style.visibility = "hidden";
	        document.getElementById("panel_section").style.visibility = "hidden";
	    } 
	    else if (document.getElementById("listGestion").value == "etablissement")
	    {
	        document.forms.item("panel_agence").visible = false;
	        document.forms.item("panel_etablissement").visible = true;
	        document.forms.item("panel_motif").visible = false;
	        document.forms.item("panel_section").visible = false;
	    }
	    else if (document.getElementById("listGestion").value == "motif")
	    {
	        document.forms.item("panel_agence").visible = false;
	        document.forms.item("panel_etablissement").visible = false;
	        document.forms.item("panel_motif").visible = true;
	        document.forms.item("panel_section").visible = false;
	    }
	    else if (document.getElementById("listGestion").value == "section")
	    {
	        document.forms.item("panel_agence").visible = false;
	        document.forms.item("panel_etablissement").visible = false;
	        document.forms.item("panel_motif").visible = false;
	        document.forms.item("panel_section").visible = true;
	    }
    }
 
</script>  
 
 
 
 
</head>
 
 
<body>
    <div id="page" align="center">
      <form id="form1" runat="server">
		<div id="toppage" align="center">
			<div id="date">
				<div class="smalltext" style="padding:13px;"><strong>  
                    <asp:Label ID="Date_jour" runat="server" Text=""></asp:Label>  </strong></div>
			</div>
			<div id="topbar">
				<div align="right" style="padding:12px;" class="smallwhitetext"><a href="#">Home</a> 
                    | <a href="#">Sitemap</a> | <a href="#">Contact Us</a></div>
			</div>
		</div>
		<div id="header" align="center">
			<div class="titletext" id="logo">
				<div class="logotext" style="margin:2px"><img src="images/logoBBGR.bmp" style="width:117px; height:107px;"/></div> 
			</div>
			<div id="pagetitle">
				<div id="title" class="style1" align="right">Outil de gestion des intérimaires</div>
			</div>
		</div>
		<div id="content" align="center">
			<div id="menu" align="right">
				<div align="right" style="width:189px; height:8px;"><img src="images/menu_top.jpg" width="189" height="8" alt="mnutopshadow" /></div>
				<div id="linksmenu" align="center">
					<a href="default.aspx" title="Nouvel intérimaire">Nouvel intérimaire</a>
					<a href="#" title="Rechercher un intérimaire">Rechercher un intérimaire</a>
					<a href="#" title="Tableaux exel">Tableaux exel</a>
					<a href="gestion.aspx" title="Panel de gestion">Panel de gestion</a>
				</div>
				<div align="right" style="width:189px; height:8px;"><img src="images/mnu_bottomshadow.gif" width="189" height="8" alt="mnubottomshadow" /></div>
			</div>
		<div id="contenttext">
			<div class="panel">
			    <span class="style2"><center>Panel de Gestion</center></span>
			        <span class="bodytext"><br /><br /><br />
 
                        <asp:DropDownList ID="listGestion" runat="server" onChange="ChoixGestion()">
                            <asp:ListItem Text="----------" Value="-1" Selected="True"></asp:ListItem>
                            <asp:ListItem Value="agence"  Text="Gestion des Agences d'intérim"></asp:ListItem>
                            <asp:ListItem Text="Gestion des Etablissements" Value="lieu"></asp:ListItem>
                            <asp:ListItem Text="Gestion des Sections" Value="section"></asp:ListItem>
                            <asp:ListItem Text="Gestion des Motifs" Value="motif"></asp:ListItem>
                        </asp:DropDownList>
		<br /><br /><br />
		<div id="oblig"><center>____________________________________________</center></div>	
		<br /><br /><br />
                        <asp:Panel ID="panel_agence" runat="server" Visible="False">
 
                            <div id="oblig" align=left><u>Gestion des Agences :</u></div><br /><br />
                            <asp:Label ID="Label1" runat="server" align=left Text="Selection de l'agence (modification ou suppression seulement) :"></asp:Label>
                            <asp:ListBox ID="listScte" runat="server" Rows="1"><asp:ListItem Selected="True" Text="----------" Value="-1"></asp:ListItem></asp:ListBox>
                            <br /><br /><br />
 
                            <asp:Table ID="Table1" runat="server">
                                <asp:TableRow>
                                    <asp:TableCell align=right><asp:Label ID="Label2" runat="server" Text="Nom de l'agence :"></asp:Label></asp:TableCell>
                                    <asp:TableCell><asp:TextBox ID="txtAgenceNom" runat="server"></asp:TextBox></asp:TableCell>
                                </asp:TableRow><asp:TableRow>
                                    <asp:TableCell align=right><asp:Label ID="Label3" runat="server" Text="Téléphone :"></asp:Label></asp:TableCell>
                                    <asp:TableCell><asp:TextBox ID="txtAgenceTel" runat="server"></asp:TextBox></asp:TableCell>   
                                </asp:TableRow><asp:TableRow>
                                    <asp:TableCell><br /><br /></asp:TableCell>
                                </asp:TableRow><asp:TableRow>
                                    <asp:TableCell align=right><asp:Label ID="Label4" runat="server" Text="Adresse :"></asp:Label></asp:TableCell>
                                    <asp:TableCell><asp:TextBox ID="txtAgenceAdr" runat="server" Width="250"></asp:TextBox></asp:TableCell>
                                </asp:TableRow><asp:TableRow>
                                    <asp:TableCell align=right><asp:Label ID="Label5" runat="server" Text="Code postal :"></asp:Label></asp:TableCell>
                                    <asp:TableCell><asp:TextBox ID="txtAgenceCP" runat="server"></asp:TextBox></asp:TableCell>
                                    <asp:TableCell align=right><asp:Label ID="Label6" runat="server" Text="Ville :"></asp:Label></asp:TableCell>
                                    <asp:TableCell><asp:TextBox ID="txtAgenceVille" runat="server"></asp:TextBox></asp:TableCell>
                                </asp:TableRow><asp:TableRow>
                                    <asp:TableCell><br /><br /></asp:TableCell>
                                </asp:TableRow><asp:TableRow>
                                    <asp:TableCell align=right><asp:Label ID="Label7" runat="server" Text="Contact de l'agence :"></asp:Label></asp:TableCell>
                                    <asp:TableCell><asp:TextBox ID="txtAgenceContact" runat="server"></asp:TextBox></asp:TableCell>
                                </asp:TableRow><asp:TableRow>
                                    <asp:TableCell align=right><asp:Label ID="Label8" runat="server" Text="Email :"></asp:Label></asp:TableCell>
                                    <asp:TableCell><asp:TextBox ID="txtAgenceEmail" runat="server"></asp:TextBox></asp:TableCell>
                                </asp:TableRow><asp:TableRow>
                                    <asp:TableCell><br /><br /></asp:TableCell>
                                </asp:TableRow><asp:TableRow>
                                    <asp:TableCell align=right><asp:Label ID="Label9" runat="server" Text="Rattaché à :"></asp:Label></asp:TableCell>
                                    <asp:TableCell><asp:ListBox ID="listEtablissement" runat="server" Rows="1" ><asp:ListItem Selected="True" Text="----------" Value="-1"></asp:ListItem></asp:ListBox></asp:TableCell>
                                </asp:TableRow><asp:TableRow>
                                    <asp:TableCell><br /><br /><br /></asp:TableCell>
                                </asp:TableRow>
                            </asp:Table>
 
 
                                <input id="btnAgence_ajout" type="submit" value="Ajouter" align=left/>
                                <input id="btnAgence_modifier" type="submit" value="Modifier" align=middle/>
                                <input id="btnAgence_supprimer" type="submit" value="Supprimer" align=right/>
 
                        </asp:Panel>
 
                        <asp:Panel ID="panel_etablissement" runat="server" Visible="False">
 
                            <div id="oblig" align=left><u>Gestion des Etablissements :</u></div><br /><br />
                            <asp:Label ID="Label11" runat="server" align=left Text="Selection de l'établissement (modification ou suppression seulement) :"></asp:Label>
                            <asp:ListBox ID="listEtablissement2" runat="server" Rows="1" ><asp:ListItem Selected="True" Text="----------" Value="-1"></asp:ListItem></asp:ListBox>
                            <br /><br /><br />
 
                            <asp:Table ID="Table2" runat="server">
                                <asp:TableRow>
                                    <asp:TableCell><asp:Label ID="Label10" runat="server" Text="Nom de l'établissement :"></asp:Label></asp:TableCell>
                                    <asp:TableCell><asp:TextBox ID="txtEtablissementNom" runat="server"></asp:TextBox></asp:TableCell>
                                </asp:TableRow><asp:TableRow>
                                    <asp:TableCell><br /><br /><br /></asp:TableCell>
                                </asp:TableRow>
                            </asp:Table>
 
                            <input id="btnEtablissement_ajout" type="submit" value="Ajouter" align=left/>
                            <input id="btnEtablissement_modifier" type="submit" value="Modifier" align=middle/>
                            <input id="btnEtablissement_supprimer" type="submit" value="Supprimer" align=right/>
 
                        </asp:Panel>
 
                        <asp:Panel ID="panel_motif" runat="server" Visible="False">
 
                            <div id="oblig" align=left><u>Gestion des Motifs :</u></div><br /><br />
                            <asp:Label ID="Label12" runat="server" align=left Text="Selection du motif (modification ou suppression seulement) :"></asp:Label>
                            <asp:ListBox ID="listMotif" runat="server" Rows="1" ><asp:ListItem Selected="True" Text="----------" Value="-1"></asp:ListItem></asp:ListBox>
                            <br /><br /><br />
 
                            <asp:Table ID="Table3" runat="server">
                                <asp:TableRow>
                                    <asp:TableCell><asp:Label ID="Label13" runat="server" Text="Abréviation du motif :"></asp:Label></asp:TableCell>
                                    <asp:TableCell><asp:TextBox ID="txtMotifNom" runat="server"></asp:TextBox></asp:TableCell>
                                </asp:TableRow><asp:TableRow>
                                    <asp:TableCell><br /><br /><br /></asp:TableCell>
                                </asp:TableRow>
                            </asp:Table>
 
                            <input id="btnMotif_ajout" type="submit" value="Ajouter" align=left/>
                            <input id="btnMotif_modifier" type="submit" value="Modifier" align=middle/>
                            <input id="btnMotif_supression" type="submit" value="Supprimer" align=right/>
 
                        </asp:Panel>
 
                        <asp:Panel ID="panel_section" runat="server" Visible="False">
 
                            <div id="oblig" align=left><u>Gestion des Sections :</u></div><br /><br />
                            <asp:Label ID="Label14" runat="server" align=left Text="Selection de la section (suppression seulement) :"></asp:Label>
                            <asp:ListBox ID="listSection" runat="server" Rows="1" ><asp:ListItem Selected="True" Text="----------" Value="-1"></asp:ListItem></asp:ListBox>
                            <br /><br /><br />
 
                            <asp:Table ID="Table4" runat="server">
                                <asp:TableRow>
                                    <asp:TableCell align=right><asp:Label ID="Label15" runat="server" Text="Code de la section :"></asp:Label></asp:TableCell>
                                    <asp:TableCell><asp:TextBox ID="txtSectionNom" runat="server"></asp:TextBox></asp:TableCell>
                                </asp:TableRow><asp:TableRow>
                                    <asp:TableCell align=right><asp:Label ID="Label16" runat="server" Text="Rattaché à l'établissement :"></asp:Label></asp:TableCell>
                                    <asp:TableCell><asp:ListBox ID="listEtablissement3" runat="server" Rows="1" ><asp:ListItem Selected="True" Text="----------" Value="-1"></asp:ListItem></asp:ListBox></asp:TableCell>
                                </asp:TableRow><asp:TableRow>
                                    <asp:TableCell><br /><br /><br /></asp:TableCell>
                                </asp:TableRow>
                            </asp:Table>
 
                            <input id="btnSection_ajout" type="submit" value="Ajouter" align=left/>
                            <input id="btnSection_supression" type="submit" value="Modifier" align=right/>
 
 
                        </asp:Panel>
 
 
 
 
 
 
 
			        </span>
 
            </div>
	    </div>
		</div>
 
      </form>
     </div>
        <div id="footer" class="smallgraytext" align="center">
 
		</div>		
 
</body>
</html>

En espérant que se sera suffisant !

Visibilité d'un panel

JavaScript

Vue hybride

Discussions similaires

Partager

Partager