1 Reply Latest reply on Sep 7, 2010 12:28 PM by cmathrusse

    Challenge with selectOneRadio

    cmathrusse
    cmathrusse Sep 7, 2010 12:26 PM

      I'm using JSF2 with RichFaces 4 on GlassFish v3 and I have a page that is dynamically rendering data and uses a selectOneRadio. The problem that I am having is to display a text input, with text before it, when a radio selection is made. I realized quickly that the only clean way to do this was to set the layout of the selectOneRadio to pageDirection. Otherwise the result would have proven unpredictable and displayed poorly. When no selections are made the display looks something like this.

       

      Initial.png

       

      When the 'Own' Selection is made I want the display to look as follows.

       

      After Select.png

       

       

      I've been struggling with using panel grids and panel groups but the layout of the table just doesn't seem quite right. Especially when the TextInput is rendered. Seeing as it is the only row that is rendered in the table, it seems that things get a bit out of alignment with the radio buttons.

       

      <h:panelGrid columns="2" id="panelGrid3">

      <h:panelGrid columns="1" id="panelGrid1">

      <h:selectOneRadio value="#{answerBean.choice}"

      layout="pageDirection"

      label="#{answerBean.question.name}"

      required="#{answerBean.question.required}" disabled="#{disabled}"

      id="questionSingleChoiceRadio">

       

      <f:valueChangeListener binding="#{answerBean}" />

      <f:selectItems value="#{answerBean.choices}" />

       

      </h:selectOneRadio>

      </h:panelGrid>

       

      <h:panelGrid columns="1" id="panelGridText">

      <ui:repeat var="addInfoForChoice"

      value="#{answerBean.answer.question.choiceSet.choices}">

       

      <h:panelGroup layout="block">

      <h:outputText value="#{addInfoForChoice.helpText}"

      rendered="#{addInfoForChoice.additionalInfo}" />

                                  </h:panelGroup>

                                  <h:panelGroup layout="block">

      <h:inputText value="addInfoTextInput" required="true" id="addInfoText"

           rendered="#{addInfoForChoice.additionalInfo}"/>

      </h:panelGroup>

       

      I'm also having a difficult time producing the javascript to enable this field only when the proper radio is selected.

       

      Can someone give me a bit of assistance to get this to work correctly?

       

      Thanks very much.