Show/hide another input fields using h:selectBooleanCheckbox

Question

I am using JSF2 and Java to build a web application. I want to build a form like the one at the picture below:

Answer 1

You could do it by jQuery, or another JavaScript. It is also possible by <f:ajax>, but it connects to the server, which you don't need here.

By jQuery you can just hide the form, not changing the DOM. As far as I understand, it should be enough.

Post some .xhtml if you want more :)

Answer 2

As suggested by amorfis, the idea of using Ajax here is not the best solution, as you will do a call to your server for a client-side manipulation.

The best solution is to use Javascript to hide your component(s). For example, if all your labels and input texts are nested in a <h:panelGrid> component, you can do that:

<script type="text/javascript">
    function hideOrShow(show) {
        // Get the panel using its ID
        var obj = document.getElementById("myForm:myPanel");
        if (show) {
            obj.style.display = "block";
        } else {
            obj.style.display = "none";
        }
    }
</script>

<h:form id="myForm">
    <h:selectBooleanCheckbox id="myCheckbox" onclick="hideOrShow(this.checked);"/>

    <h:panelGrid id="myPanel" columns="2">
        ...
    </h:panelGrid>
</h:form>

Answer 3

Use <f:ajax render="idOfPanelContainingInputFields"> in the checkbox and give the component containing the input fields a rendered attribute which depends on the checkbox's state. No need for another JS code clutter.

<h:form>
    <fieldset>
        <legend>
            <h:selectBooleanCheckbox binding="#{showUserInfo}">
                <f:ajax render="idOfPanelContainingTextBox" />
            </h:selectBooleanCheckbox>
            <h:outputText value="User information" />
        </legend>
        <h:panelGroup id="idOfPanelContainingTextBox" layout="block">
            <ui:fragment rendered="#{not empty showUserInfo.value and showUserInfo.value}">
                <p>
                    <h:outputLabel for="firstName" value="First name:" />
                    <h:inputText id="firstName" value="#{bean.user.firstName}" />
                </p>
            </ui:fragment>
        </h:panelGroup>
    </fieldset>
</h:form>

The above example binds the checkbox to the view, you can of course also bind it to a boolean bean property, you can then remove the not empty check from the rendered attribute.

            <h:selectBooleanCheckbox value="#{bean.showUserInfo}">

...

            <ui:fragment rendered="#{bean.showUserInfo}">

See also:

• How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
• Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?