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.
When the 'Own' Selection is made I want the display to look as follows.
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.
Updated the images. For some reason they didn't get attached to the first post.