Show a hidden radio button when another radio button is checked in JSF

Question

I'm trying to hide/show JSF panels based on UI events. More specifically, I have many radio buttons, every radio buttons should exists within its own panel. I need to make a hidden panel visible based on radio button click. How can I do this?

Answer 1

Instead of using the css attribute visibility, you should consider to either render the radio button - or not - depending on the value of the first radio button.

Just keep in mind, that you cannot update a component that has not been rendered, but only its parent:

<h:form>
    <h:panelGroup id ="grp1">
        <h:selectOneRadio value="#{testController.radio1}">
            <f:selectItem itemValue="show" itemLabel="Show next Radio" />
            <f:selectItem itemValue="hide" itemLabel="Hide next Radio" />
            <f:ajax render="grp2"></f:ajax>
        </h:selectOneRadio>
    </h:panelGroup>
    <h:panelGroup id ="grp2">
      <h:selectOneRadio value="#{testController.radio2}" rendered="#{testController.radio1 eq 'show'}">
            <f:selectItem itemValue="show" itemLabel="Show next Radio" />
            <f:selectItem itemValue="hide" itemLabel="Hide next Radio" />
        </h:selectOneRadio>
    </h:panelGroup>
</h:form>

with the baking bean

@Named
@ViewScoped
public class TestController implements Serializable {
    private String radio1;
    private String radio2;

    //+getter and setter
}