Comment cacher des boutons avec JSF ?

Version imprimable

30/05/2011, 22h54
geeksDeve

Comment cacher des boutons avec JSF ?

je suis entrain de programmer une pour la réservation de vol en ligne..
j'ai deux cas possible pour la réservation : 1 aller simple , 2 aller retour

je cherche une maniéré de cacher la date de retour et l'heure de retour l’osque je click sur aller simple avec java script ou ajax

1 aller simple
---------------------------------
|¤| aller simple || aller retour

date depart
|_______|__|

heure depar
|_______|__|
---------------------------------

2 aller retour
---------------------------------
| | aller simple |¤| aller retour

date depart date retour
|_______|__| |_______|__|

heure depar heure arriver
|_______|__| |_______|__|
---------------------------------

En JavaScript, ce n'est guère compliqué.

Code:

1
2
3
4
5
6
7
8
9
10
<h:form id="myForm">
    <h:selectOneRadio ... onclick="checkValue(this);">
        <f:selectItem itemLabel="aller" itemValue="aller"/>
        <f:selectItem itemLabel="aller-retour" itemValue="allerRetour"/>
    </h:selectOneRadio>
    ...
    <h:panelGroup id="dateRetour">
        // Date et Heure d'arrivée ici
    </h:panelGroup>
</h:form>

Et le code JS qui va bien. A noter que j'utilise jQuery ici, livré avec Richfaces. Cela reste possible d'utiliser du JavaScript normal si besoin...

Code:

1
2
3
4
5
6
7
8
9
function checkValue(field) {
    if (jQuery(field).val() === "allerRetour") {
        // Valeur choisie "Aller / Retour", on cache...
        jQuery("#myForm\\:retour").hide();
    } else {
        // ...sinon on affiche
        jQuery("#myForm\\:retour").show();
    }
}

31/05/2011, 11h55
geeksDeve

Salut et merci pour la réponse :
j'ai essayé mais sa pas marcher, je vois pas l'utilisation de id="dateRetour" et id="heureRetour" dans la fonction......info de plus la date Retour et l'heure de retour sont dans un autre formulaire "form2" et le selectOneRadio dans le formulaire "myForm"

Pour jsf, tu as une solution native nommée "rendered".

Les champs jsf, associés à ce paramètre, peuvent devenir visibles ou non selon des critères côté Bean.

Par exemple:
Tu as côté java:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 private boolean onError = false; //IMPORTANT: bien mettre getOnError et non isOnError (autogénéré), sinon jsf ne sait pas en tenir compte public boolean getOnError() { return onError; } /** * @param onError the onError to set */ public void setOnError(boolean onError) { this.onError = onError; } //... //Puis tu as à mettre le set: setOnError(true); // Selon la condition que tu gères en code java
Puis, côté page: (par exemple

Code:

<h:outputText value=" #{TonBeanDeGestion.valeurDuChamp} > " rendered="#{TonBeanDegestion.onError}"/>

Citation:
Envoyé par magellan
Pour jsf, tu as une solution native nommée "rendered".

Les champs jsf, associés à ce paramètre, peuvent devenir visibles ou non selon des critères côté Bean.

Par exemple:
Tu as côté java:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 private boolean onError = false; //IMPORTANT: bien mettre getOnError et non isOnError (autogénéré), sinon jsf ne sait pas en tenir compte public boolean getOnError() { return onError; } /** * @param onError the onError to set */ public void setOnError(boolean onError) { this.onError = onError; } //... //Puis tu as à mettre le set: setOnError(true); // Selon la condition que tu gères en code java
Puis, côté page: (par exemple

Code:

<h:outputText value=" #{TonBeanDeGestion.valeurDuChamp} > " rendered="#{TonBeanDegestion.onError}"/>
est comment je cache les composants :roll:

31/05/2011, 13h24
romaintaz

Citation:

Envoyé par magellan

Pour jsf, tu as une solution native nommée "rendered".

Oui, c'est sûr, sauf qu'au mieux, ça t'oblige à faire un appel Ajax, ce qui n'est pas franchement utile quand tu veux faire un truc aussi simple...

Citation:

Envoyé par intelo

Salut et merci pour la réponse :
j'ai essayé mais sa pas marcher, je vois pas l'utilisation de id="dateRetour" et id="heureRetour" dans la fonction......info de plus la date Retour et l'heure de retour sont dans un autre formulaire "form2" et le selectOneRadio dans le formulaire "myForm"

N'ayant pas ton code sous la main, j'ai montré un exemple. Monte moi le code de ta page, et je te dirais comment adapter ma solution...

voici le 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
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
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
 
<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
 
 
<f:view>
<html>
<head>
<script language="javascript">
function checkValue(field) {
    if (jQuery(field).val() === "allerRetour") {
        // Valeur choisie "Aller / Retour", on cache...
        jQuery("#myForm\\:retour").hide();
    } else {
        // ...sinon on affiche
        jQuery("#myForm\\:retour").show();
    }
}
 
</SCRIPT> 
 
	<title>reservation en ligne</title>
	<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
 
<body leftmargin=0 topmargin=0 marginheight="0" marginwidth="0" background="images/ciel_bleu.jpg">
<table width="762" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr> 
 
    <td width="794" height="29" background="images/fon01.gif"> 
      <table width="503" border="0" cellspacing="0" cellpadding="0">
        <tr> 
 
          <td width="1">
 
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr> 
    <td height="172"><img src="images/avion3.jpg" width="762" height="172"></td>
 
  </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="794" align="center" background="images/fon_menu.gif">
  <tr>
	<td width="3"><img src="images/menu01.gif" width="3" height="42" alt="" border="0"></td>
	<td width="788">
 
<table border="0" cellpadding="0" cellspacing="0">
<tr>
	<td width="28%"><p class="menu01"><a href="acceuil.html">RECHERCHE</a></p></td>
	<td width="23"><img src="images/desin_m.gif" alt="" width="24" height="42" border="0"></td>
	<td width="27%"><p class="menu01"><a href="">SELECTION</a></p></td>
	<td width="23"><img src="images/desin_m.gif" alt="" width="24" height="42" border="0"></td>
	<td width="27%"><p class="menu01"><a href="">RESERVATION</a></p></td>
	<td width="23"><img src="images/desin_m.gif" alt="" width="24" height="42" border="0"></td>
	<td width="25%"><p class="menu01"><a href="">PAIEMENT</a></p></td>	
</tr>
</table>
 
	</td>
 
	<td width="79" align="right"><img src="images/menu02.gif" width="3" height="42" alt="" border="0"></td>
</tr>
</table>
<div align="center"><img src="images/main01.gif" width="759" height="5" alt="" border="0"></div>
<table border="0" cellpadding="0" cellspacing="0" width="759" align="center">
<tr valign="top">
	<td background="images/fon_left.gif"><img src="images/fon_left.gif" width="3" height="13" alt="" border="0"></td>
	<td width="753" bgcolor="#FFFFFF">
<p class="px5">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
<tr valign="top">
	<td  align="left" style=" width : 210px;">
<!-- left -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
	            <td colspan="3" height="23" bgcolor="#777777" style="FONT-WEIGHT: bold; FONT-FAMILY: 'Times New Roman'; FONT-SIZE: medium; COLOR: #ffffff;"><img src="images/puce1.gif" > Gerer vos reservation</td>
</tr>
<tr>
	<td colspan="3" bgcolor="#CCCCCC"><img src="mageis/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
<tr>
	<td width="1" rowspan="3" bgcolor="#CCCCCC"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
	<td bgcolor="#EF9400" height="3"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
	<td width="1" rowspan="3" bgcolor="#CCCCCC"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
<tr>
	            <td width="227"> 
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<h:panelGrid columns="2">
 
 
<h:outputText value="Login : " />
 
<h:inputText value="" style=" width : 140px;"/>
 
<h:outputText value="Password : " style=" width : 140px;"/>
<h:inputSecret value="" style=" width : 140px;"  />
 
</h:panelGrid>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td align="center" valign="middle" height="30">
<h:commandButton value="CONNECTION" />
 
 
 
</td>
</tr>
</table>
 
	</td>
</tr>
 
 
<tr>
	<td background="images/t_fon.gif" height="28"><img src="images/px1.gif" width="1" height="1" alt="" border="0" style="width : 4px; height : 1px;"></td>
</tr>
<tr>
	<td colspan="3" align="right"><img src="images/t_bot.gif" width="229" height="9" alt="" border="0"></td>
</tr>
</table>
<!-- /left -->
	</td>
	<td width="80%">
<!-- right -->
 
<table border="0" cellpadding="0" cellspacing="0" style=" width : 515px;">
<tr>
	<td colspan="3" height="25" bgcolor="#777777" style="FONT-FAMILY: 'Times New Roman'; FONT-SIZE: medium; FONT-WEIGHT: bold; COLOR: #ffffff;"><img src="images/puce1.gif" > Trouver votre vol</td>
</tr>
<tr>
	<td colspan="3" bgcolor="#CCCCCC"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
<tr>
	<td rowspan="3" bgcolor="#CCCCCC" style=" width : 1px;"><img src="images/px1.gif" width="1" height="1" alt="" border="0" style="width : 1px; height : 1px;"></td>
	<td bgcolor="#EF9400" height="3"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
	<td width="1" rowspan="3" bgcolor="#CCCCCC"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
<tr>
	            <td width="450"> <p class="left" style="color: #FF6600;">
	            <h:form id="myForm" >
	            <table cellspacing="" cellpadding="" width="100%">
	            	<tr>
	            	<td  style=" width : 68% ">
	            	<h:panelGroup>
	            	<h:selectOneRadio  onclick="checkValue(this);"   >
	            <f:selectItem itemLabel="Aller Simple"  itemValue="aller" id="Aller" />	
	             <f:selectItem itemLabel="Aller Retour"   itemValue="allerRetour" id="AllerRetour"  />
 
	            		</h:selectOneRadio>
 
	            	</h:panelGroup>
	            	<td style=" width : 79px;"></td>
	            	<td  style=" width : 30%">
	            	<h:panelGroup>
 
	            	<h:selectBooleanCheckbox value="true"  title="click" id="checkbox"  />
	            	<h:outputText value=" Escale"/><h:outputText/>
 
 
	            	</h:panelGroup>
	            	</td>
	            	<tr>
	            </table>
	            </h:form>
	            <h:form id="form2" >
                  <table style=" width : 100% ;">
                  <tr>
                  	  <th>
                  <h:outputText  value=" Depart" style="width : 33%; "/>
                  </th>
                  <th>
                  <h:outputText value=" Arrive" style="width : 33%; " />
                  </th>
                  <th>
                  <h:outputText value=" Compagnie Aerienne" style="width : 33%; "/>
                  </th>
				  </tr>
                  <tr>
                  <td><h:selectOneMenu style=" width : 163px;">
                  	  <code:selectItems value="" />
                  </h:selectOneMenu>
				  </td>
                  <td>
                  <h:selectOneMenu style=" width : 163px;" >
                  	  <code:selectItems value="" />
                  </h:selectOneMenu>
				  </td>
                  <td>
                  <h:selectOneMenu>
                  	  <code:selectItems value="" />
                  </h:selectOneMenu></td>
 
                  </tr>
                  <tr>
                  <th>
                  <h:outputText value="Date depart" style="width : 33%; "/>
                  </th>
                  <th>
                  <h:outputText value="Date retour" style="width : 33%; " />
                  </th>
                  <th>
                  <h:outputText value=" Classe" style="width : 33%; "/>
                  </th>
                  </tr>
                  <tr>
                  <td>
                  <rich:calendar >
 
                  </rich:calendar>
 
                  </td>
                  <td>
                  <rich:calendar id="DateRetour"  >
 
                  </rich:calendar>
 
                  </td>
                  <td>
                  <h:selectOneMenu style=" width : 126px;">
 
                  </h:selectOneMenu>
                  </td>
                  </tr>
                  <tr>
                  <th>
                  <h:outputText value=" Heure  depart" style="width : 33%; "/>
                  </th>
                  <th>
                  <h:outputText value=" Heure retour" style="width : 33%; " />
                  </th>
                  <th>
                  <h:outputText value=" Nombre De Passager" style="width : 33%; "/>
                  </th>
                  </tr>
                  <tr>
                   <td>
 
                  <h:selectOneMenu style=" width : 163px;">
 
                  </h:selectOneMenu>
                  </td>
                  <td>
 
                  <h:selectOneMenu style=" width : 163px;"  id="HeurRetour" >
 
                  </h:selectOneMenu>
                  </td>
                  <td>
                  <h:selectOneMenu style=" width : 126px;">
 
                  </h:selectOneMenu>
                  </td>
                  </tr>
                  <tr style=" height : 45px;">
                  <td colspan="3" align="center">
                  <h:commandButton value="RECHERCHER" style=" width : 104px; height : 27px;"/>
 
                  </td>
                  </tr>
                  </table>
</h:form>
 
	</td>
</tr>
<tr>
	<td background="images/t_fon.gif" height="28"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
<tr>
	<td colspan="3" align="right"><img src="images/t_bot.gif" width="229" height="9" alt="" border="0"></td>
</tr>
</table>
<!-- /right -->
	</td>
</tr>
</table>
<br>
	</td>
	<td background="images/fon_right.gif"><img src="images/fon_right.gif" width="3" height="10" alt="" border="0"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="759" align="center">
<tr>
	<td colspan="2" background="images/fon_bot.gif" height="42" align="right"> 
    </td>
</tr>
<tr align="center">
	<td width="270" height="80"><img src="images/viewlogo.aspx.png" width="129" height="60" alt="" border="0"></td>
	<td width="490"><p align="center" style="color: #FFFFFF;"> &copy; Copyright 
        </p></td>
</tr>
</table>
 
</body>
</html>
 
</f:view>

Essaie avec ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 function checkValue(field) { if (jQuery(field).val() === "allerRetour") { // Valeur choisie "Aller / Retour", on cache... jQuery("#myForm\\:DateRetourPopup").hide(); jQuery("#myForm\\:HeurRetour").hide(); } else { // ...sinon on affiche jQuery("#myForm\\:DateRetourPopup").show(); jQuery("#myForm\\:HeurRetour").show(); } }
J'ai fait la même chose, mais j'ai caché (ou affiché) le champ d'entrée pour l'heure (#myForm\\:HeurRetour) ainsi que le calendrier. Pour le calendrier, RF va en fait créer un <span> dont l'ID sera l'ID donné, préfixé par l'ID du formulaire (myForm) et suffixé de Popup. Comme ton ID est DateRetour, il devient donc en HTML myForm:DateRetourPopup.

Sinon, tu devrais peut être considérer l'usage du <h:panelGrid>, parce que tout le code HTML de tes tableaux (les tr, th, td), ça rend ton code très peu lisible !

31/05/2011, 15h07
geeksDeve

merci pour la reponse,
qu'es que je met dans le paramettres filed "checkValue(field)" dans le

Code:

<h:selectOneRadio onclick="checkValue(???????);" >

je met comme ça

Code:

onclick="checkValue(this);"

mais j'ai pas compris qu'es que vous voulez dire avec ça :
Sinon, tu devrais peut être considérer l'usage du <h:panelGrid>, parce que tout le code HTML de tes tableaux (les tr, th, td), ça rend ton code très peu lisible ![/QUOTE]

[QUOTE=romaintaz;6025205]Essaie avec ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
function checkValue(field) {
    if (jQuery(field).val() === "allerRetour") {
        // Valeur choisie "Aller / Retour", on cache...
        jQuery("#myForm\\:DateRetourPopup").hide();
        jQuery("#myForm\\:HeurRetour").hide();
    } else {
        // ...sinon on affiche
        jQuery("#myForm\\:DateRetourPopup").show();
        jQuery("#myForm\\:HeurRetour").show();
    }
}

oui sa marcher, merci beaucoup.....

31/05/2011, 16h16
geeksDeve

a la place de

Code:

hide();

on peut utiliser également

Code:

attr('disabled', true);

et

Code:

attr('disabled', false);

pour le

Code:

show();

j'ai essayé sa marche...mais sa pas marcher pour le calender
31/05/2011, 17h25
romaintaz

ça ne marche pas pour le calendrier tout simplement parce que ce composant va générer plusieurs composants HTML. Il faut donc à la fois désactiver le champ de saisie, mais aussi l'icone cliquable...

Citation:

Envoyé par intelo

j'ai pas compris qu'es que vous voulez dire avec ça (...)

Je dis juste que tu devrais apprendre à utiliser le composant <h:panelGrid>, car il simplifiera beaucoup ton code, et le rendra plus lisible. Son but est de créer un tableau. De ton côté, tu ajoutes simplement les composants.

Par exemple :
Code:

1 2 3 4 5 6 7 8 <h:panelGrid columns="2"> <h:outputText value="un"/> <h:outputText value="deux"/> <h:outputText value="trois"/> <h:outputText value="quatre"/> <h:outputText value="cinq"/> </h:panelGrid>
te génèrera le tableau suivant :
Code:

1 2 3 4 5 +-------+--------+ | un | deux | | trois | quatre | | cinq | | +-------+--------+
et c'est quand même beaucoup plus simple que d'écrire à la main toutes les balises TR, TD, TH, etc...

31/05/2011, 18h53
geeksDeve

merci beaucoup pour votre aide