selectOneRadio + inputText
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:
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 :D
Merci d'avance
