Discussion :

[Vinc35]

Bonjour,

Je suis face à un problème d'IHM sur une application Jsf :

il s'agit d'un formulaire de contact, l'utilisateur doit choisir l'adresse à laquelle la réponse lui sera retournée.

Je dois donc utiliser un selectOneRadio (jsf html ou tomahawk ou bien une autre librairie) pour afficher les choix.

Parmis ces choix, je lui propose les différentes adresses qu'il a enregistré dans le système (max 2), une adresse (qu'il peut saisir via un champ input) et la possibilité d'obtenir une réponse par courrier.

En résumé cela donne quelque chose du genre :

[] adressemail1
[] adressemail2
[] une autre adresse : [Champ input]
[] par courrier

Mon problème :

Le champ input doit être affiché uniquement quand l'option sélectionnée est "une autre adresse", caché sinon (sans recharger la page bien sur, coté client)

Actuellement, j'utilise un composant t:selectOneRadio principal auquel j'ajoute des t:radio pour chaque option

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
 
<h:panelGroup style="display:none;">
	<t:selectOneRadio id="radio----" styleClass="----" value="#{----.ctrl.config.adresse}">
		<f:selectItems value="#{----.listeAdresses}" />
	</t:selectOneRadio>
</h:panelGroup>
<h:panelGrid columns="2">
	<h:outputLabel styleClass="----" value="#{libelles['----']}" />
	<h:panelGrid columns="1" styleClass="----">
		<t:radio for="radio----" index="0" rendered="#{----.listeAdresses['0'].value != null}"/>
		<t:radio for="radio----" index="1" rendered="#{----.listeAdresses['1'].value != null}"/>
		<h:panelGrid columns="3" cellspacing="0">
			<t:radio for="radio----" index="2"/>
			<rich:spacer width="5" />
			<h:inputText styleClass="----" size="40" value="#{----.ctrl.config.autreAdresse}" />
		</h:panelGrid>
		<t:radio for="radio----" index="3"/>
	</h:panelGrid>
</h:panelGrid>

Je dois ajouter le javascript (ou ajax) qui me permet de cacher ce champ en fonction de l'option choisie.

Avec Ajax (Ajout d'un a4j:support sur le t:selectOneRadio et les t:radio) le rendered par défaut est à false et donc je peux entrer n'importe quelle valeur, la variable reste a null

Avec du javascript : pas de onclick sur les t:radio, je n'arrive pas à executer de la fonction JS au changement de valeur du select.

Si vous avez deja vu des cas similaire, toute aide est la bienvenue

Merci d'avance

[jdev23]

voilà pour la balise jsf :

Code :

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

1
2
3
4
 
<h:selectOneRadio id="radio" onclick="afficher();">                       
	                        <f:selectItem itemLabel="Autres"/>             
                                </h:selectOneRadio>

et pour la fct javascript c:

Code :

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

1
2
3
4
5
6
7
 
function afficher(){
if(document.getElementById("form:radio:0").checked==true)
document.getElementById("zonedetexte").display='none'
else
document.getElementById("zonedetexte").display='block'
}

[romaintaz]

Le principe de jdev23 est le bon, mais je corrigerais le Javascript ainsi :

Code :

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

1
2
3
4
5
6
7
8
function afficher() {
    var obj = document.getElementById("form:zonedetexte");
    if (document.getElementById("form:2:radio").checked) {
        obj.style.display = "block";
    } else {
        obj.style.display = "none";
    }
}

Il faut remplacer form par l'identifiant du formulaire où sont contenus les éléments radio...

[Vinc35]

Tout d'abord, merci pour vos réponses, c'est effectivement la solution que j'utilise pour un composant "classique" lorsque je souhaite cacher/afficher un objet. (Ou a4j:support avec l'event onclick et un reRender)

Cependant, ici, le problème me semble un peu plus complexe et j'ai du mal m'exprimer.

Je dois séparer les radios dans la pages pour pouvoir afficher un champ input sur le choix 2 (cf le code du 1er post)

Pour cela (et c'est peut être la que j'ai tord) j'utilise un t:selectOneRadio principal et une série de t:radio, liés au selectoneRadio principal

Les composants t:radio n'ont pas d'id (impossible de forcer l'id via un attribut du composant) et la méthode getElementById("monform:monradio:index") (ou monform:index:monradio j'ai essayé les 2) me renvoi null (logique vu qu'aucun element n'existe avec cette id)

Si vous avez une idée.

Voici le code html qui est généré :

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
<table class="panel-adresses">
	<tbody>
		<tr>
			<td><label><input type="radio" name="radio_adresse"
				checked="checked" value="-----@orange.fr"
				onclick="afficher();" class="align-left" />*-----@orange.fr</label></td>
		</tr>
		<tr>
			<td><label><input type="radio" name="radio_adresse"
				checked="checked" value="-----@orange.fr"
				onclick="afficher();" class="align-left" />*-----@orange.fr</label></td>
		</tr>
		<tr>
			<td>
			<table border="0" cellpadding="0" cellspacing="0">
				<tbody>
					<tr>
						<td><label><input type="radio" name="radio_adresse"
							value="input" onclick="afficher();" class="align-left" />*Une
						autre adresse E-mail :</label></td>
						<td><img class="rich-spacer " height="1" id="app_form:j_id77"
							src="/---/a4j_3_2_1-SNAPSHOTimages/spacer.gif.jsf"
							width="5" /></td>
						<td><input id="app_form:input_adresse" type="text"
							name="app_form:input_adresse" class="input-text" size="40" /></td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
		<tr>
			<td><label><input type="radio" name="radio_adresse"
				value="autre" onclick="afficher();" class="align-left" />*Un
			autre moyen</label></td>
		</tr>
	</tbody>
</table>

Et le javascript qui va avec :

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
		function afficher() {
  			var obj = document.getElementById("app_form:input_adresse");
    		if (document.getElementById("app_form:2:radio_adresse").checked) {
    	   		obj.style.display = "block";
    		} else {
    	   		obj.style.display = "none";
    		}
		}
		</script>

[romaintaz]

Une idée un peu moins propre :

Code :

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

1
2
3
4
5
6
7
8
function afficher(elt) {
    var obj = document.getElementById("form:zonedetexte");
    if (elt.nextSibling.innerHTML.toLowerCase().indexOf("une autre adresse e-mail") != -1) {
        obj.style.display = "block";
    } else {
        obj.style.display = "none";
    }
}

et dans le code JSF tu mets :

onclick="afficher(this);" au lieu de onclick="afficher();"

[Sniper37]

salut,
je ne comprend pas pourquoi tu utilises du javascript, il faut profiter de JSF et richfaces, s'il faut faire avec la complexité de JSF et en plus ajouter du code javascript partout..il y'a de quoi !!

au fait pourquoi ne pas utiliser des booleanCheckBox, à la place des buttonRadio,l'acion onClick est mieux géré avec booleanCheckBox..
exemple avec un seul booleanCheckBox, pour 2 ou 3 le principe est le meme ajouter des a4j:outputPanel et faire le bon test dans rendered:

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
 
<h:selectBooleanCheckbox value="#{managedBean.principalAdress}">
<a4j:support event="onclick" reRender="groupPanel" />
</h:selectBooleanCheckbox>
 
<a4j:outputPanel id="groupPanel">
<a4j:outputPanel id="adress1" layout="block"
rendered="#{managedBean.principalAdress}">
<h:inputText value="adresse principal"/>
</a4j:outputPanel>
<a4j:outputPanel rendered="#{!managedBean.principalAdress}" id="adress2">
<h:outputText value="adresse secondaire">
</h:outputText>
</a4j:outputPanel>
</a4j:outputPanel>

[romaintaz]

salut,
je ne comprend pas pourquoi tu utilises du javascript, il faut profiter de JSF et richfaces, s'il faut faire avec la complexité de JSF et en plus ajouter du code javascript partout..il y'a de quoi !!

Oui et non.
Je suis assez contre le fait d'ajouter du JS, je dois admettre, mais franchement, pourquoi faire un aller-retour serveur (en Ajax ou pas, peu importe) pour quelque chose qui n'en a finalement pas besoin ?

au fait pourquoi ne pas utiliser des booleanCheckBox, à la place des buttonRadio,l'acion onClick est mieux géré avec booleanCheckBox..

Ton exemple est correct, mais le souci est qu'il faut alors empêcher l'utilisateur de sélectionner plusieurs options. D'où l'utilisation d'un radio bouton (qui est, je le concède, peu agréable en JSF)... Ou alors écrire une petite fonction Javascript qui décoche les autres checkbox dès que l'on en choisit une

[Vinc35]

Tout a fait, l'utilisation du selectOneRadio est du au fait que l'utilisateur peut choisir 1 seule adresse parmis n. En utilisant des selectBooleanCheckbox, je suis obligé de desactiver les autres quand une est choisie.

Sinon, pour savoir si je dois afficher ou non le champ input j'utilise ce test dans le javascript :

Code :

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

document.getElementsByName("app_form:radio_adresse")[2].checked

Ca tourne bien, mais uniquement sur les options du selectOneRadio les t:radio ne sont pas pris en compte. Or la contrainte est justement de séparer les différentes options du select ...

Gniiii >_<

[Sniper37]

Oui et non.
Je suis assez contre le fait d'ajouter du JS, je dois admettre, mais franchement, pourquoi faire un aller-retour serveur (en Ajax ou pas, peu importe) pour quelque chose qui n'en a finalement pas besoin ?

ouii mais ça ne coute rien cet aller-retour, et on y gagne en maintenabilité du code, et les problèmes de compatibilités entre navigateurs.Enfin, moi dès qu'il s'agit d'ajouter une fonction javascript qui contient quelques lignes; je reste assez réticent.ça doit venir de mon allergie de code JS

Ton exemple est correct, mais le souci est qu'il faut alors empêcher l'utilisateur de sélectionner plusieurs options. D'où l'utilisation d'un radio bouton (qui est, je le concède, peu agréable en JSF)... Ou alors écrire une petite fonction Javascript qui décoche les autres checkbox dès que l'on en choisit une

En effet, c'est le problème, moi quand il y'a plusieurs choix, j'utilise un selectOneMenu, mais, si je comprend bien la question au début, l'utilisateur doit choisir une adresse entre 2 ou ajouter une troisième, donc il y'a là qu'un seul choix possible...

[Sniper37]

Tout a fait, l'utilisation du selectOneRadio est du au fait que l'utilisateur peut choisir 1 seule adresse parmis n. En utilisant des selectBooleanCheckbox, je suis obligé de desactiver les autres quand une est choisie.

c'est simple de désactiver les autres..
à l'interieur de a4j:support:

Code :

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

1
2
 
<a4j:actionparam name="adress2" value="false"													assignTo="#{managedBean.adress2}" />

sinon utlise firedebug pour voir ce qui ne va pas, tu as peu etre une erreur quelque part.

[Vinc35]

Bon, problème """résolu""", il a été décidé d'utiliser un simple champ input toujours accessible

Merci pour votre aide a tous les 3

Nb : je laisse le sujet en non résolu pour ceux qui viendraient a tomber dessus via une recherche