3 Replies Latest reply on Nov 5, 2008 4:38 AM by ilya_shaikovsky

    selectOneRadio with reRender to activate optional fields

    alain94040

      Hi All,

      I have been trying to do something that sounds like it should be simple, except I can't figure it out... I want to give the user a choice between several alternatives, so I use a h:selectOneRadio tag. But if the user selects a certain alternative, I'd like to make visible an optional field, for instance a text input.

      A typical example would be:

      [X] I already have an account
      account number is __________
      [ ] I do not already have an account

      This is the JSF code I have been playing with:

      <h:selectOneRadio value="#{foo.hasAccount}" required="true" layout="pageDirection">
       <f:selectItem itemValue="#{true}" itemLabel="already have account" />
       <f:selectItem itemValue="#{false}" itemLabel="do not already have account" />
       <a:support event="onclick" action="next" reRender="userName"/>
      </h:selectOneRadio>
      
      <s:fragment id="userName">
       <h:inputText value="#{foo.AccountName}" required="true" disabled="#{foo.hasAccount==false}"/>
      </s:fragment>
      


      Whenver I toggle between yes and no, the inputText is not re-rendered, as far as I can tell. But if I click on any other real button, the text field does appear and disappear based on the value of the toggle. So it sounds like I'm missing something about the reRendering action. I tried "onblur" and "onclick", no difference.

      I'd appreciate any help you can give. I'm sure for an advanced user, it's an obvious question!

        • 1. Re: selectOneRadio with reRender to activate optional fields
          ilya_shaikovsky

          Something like this:

           <h:form id="myform">
           <h:panelGrid columns="1">
           <h:selectOneRadio value="#{userBean.name}">
           <f:selectItem itemLabel="register" itemValue="0"/>
           <f:selectItem itemLabel="login" itemValue="1"/>
           <a4j:support event="onchange" reRender="out"></a4j:support>
           </h:selectOneRadio>
           <h:panelGroup id="out">
           <h:outputText rendered="#{userBean.name == 1}" value="enter your nickname"/>
           <h:inputText rendered="#{userBean.name == 1}" />
           </h:panelGroup>
           </h:panelGrid>
           </h:form>
          


          should works just as you need.

          • 2. Re: selectOneRadio with reRender to activate optional fields
            alain94040

            Thanks, that's the right way to do what I want.

            Bonus points: any idea how to have selectOneRadio have a layout of Page (as in a bullet list, one item per line), but insert the optional field "in line" with the first bullet?

            The only way I can think of is have separate independent checkmarks and connect their behavior (when one is on, the other ones are off) via Javascript, which would be quite ugly. Any better idea?

            • 3. Re: selectOneRadio with reRender to activate optional fields
              ilya_shaikovsky

              something like this?

               <style>
               .top{
               vertical-align:top;
               }
              ` </style>
               <h:form id="myform">
               <h:panelGrid columns="2" columnClasses="top,top">
               <h:selectOneRadio value="#{userBean.name}" layout="pageDirection">
               <f:selectItem itemLabel="login" itemValue="1"/>
               <f:selectItem itemLabel="register" itemValue="0"/>
               <a4j:support event="onchange" reRender="out"></a4j:support>
               </h:selectOneRadio>
               <h:panelGroup id="out">
               <h:outputText rendered="#{userBean.name == 1}" value="enter your nickname"/>
               <h:inputText rendered="#{userBean.name == 1}" />
               </h:panelGroup>
               </h:panelGrid>
               </h:form>