使用selectBooleanCheckbox显示/隐藏JSF2表单

时间:2010-09-13 07:42:26

标签: javascript jsf jsf-2

我正在使用JSF2和Java来构建Web应用程序。我想构建一个如下图所示的表单:

alt text

当有人取消选中该复选框时,表单应该会消失: alt text

Here是gwt的一个例子。


到目前为止, 我在managedBean中尝试了<f:ajax>标记和PropertyActionListener的一些内容,但它不起作用。有人可以给我一个例子或至少一些提示来实现我的目标。我真的很感激

3 个答案:

答案 0 :(得分:12)

在复选框中使用<f:ajax event="click" render="@form">,并为包含表单元素的组件提供rendered属性,该属性取决于复选框的状态。不需要另一个JS代码混乱。

<h:form>
    <fieldset>
        <legend>
            <h:selectBooleanCheckbox binding="#{showUserInfo}">
                <f:ajax event="click" render="@form" />
            </h:selectBooleanCheckbox>
            <h:outputText value="User information" />
        </legend>
        <h:panelGroup 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>
        </h:panelGroup>
    </fieldset>
</h:form>

上面的示例将复选框绑定到视图,您当然也可以将其绑定到boolean bean属性,然后可以从not empty属性中删除rendered检查。

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

...

        <h:panelGroup rendered="#{bean.showUserInfo}">

答案 1 :(得分:11)

正如amorfis所说,在这里使用Ajax的想法不是最佳解决方案,因为您将调用服务器进行客户端操作。

最好的解决方案是使用Javascript来隐藏您的组件。例如,如果所有标签和输入文本都嵌套在<h:panelGrid>组件中,则可以这样做:

<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>

答案 2 :(得分:0)

你可以通过jQuery或其他JavaScript来实现。它也可以由<f:ajax>,但它连接到服务器,这里你不需要。

通过jQuery,您可以隐藏表单,而不是更改DOM。据我了解,这应该足够了。

如果您想要更多,请发布一些.xhtml:)