使用 JQuery 隐藏/显示 <p:inputText> [关闭]答案

【问题标题】：Hide/Show <p:inputText> using JQuery [closed]使用 JQuery 隐藏/显示 <p:inputText> [关闭]
【发布时间】：2014-01-23 14:31:32
【问题描述】：

是否有任何选项可以将标志设置为 true 并在更改时隐藏 <p:inputText id="name" value="#{mybean.value}" />？

JSF 代码如下

<h:form>
      <p:selectOneMenu style="width:150px" id="id" onchange="onCall()">
              <f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
              <f:selectItem itemLabel="Other" itemValue="Other"></f:selectItem>
       </p:selectOneMenu>
       <p:selectBooleanCheckbox id="flag"/>
       <p:inputText id="name" value="#{mybean.value}/>
 </h:form>

请给我一个想法来解决我的问题

【问题讨论】：

您正在询问如何使用 jQuery（客户端）做某事，但您只显示服务器端代码。您的客户端代码需要对客户端输出进行操作，与您显示的内容分开。
不，我只是想在客户端本身进行验证..
具体来说，您想做什么？ jQuery 不能修改 <p:selectBooleanCheckbox id="flag"/> 但它可以修改由它生成的客户端代码。同样，它不能隐藏<p:inputText id="name" value="#{mybean.value}/>，但它可以隐藏由它生成的客户端代码。在您的 jQuery 代码中，您需要定位客户端元素。届时，对这些元素调用 .hide() 或 .val() 即可。

标签： jquery jsf primefaces

【解决方案1】：

您有两种方法来实现这一点，jQuery 或 Normal JSF。

JSF

豆

private Boolean renderInputText;

public void setRenderInputText(Boolean renderInputText) {
    this.renderInputText = renderInputText
}

public Boolean getRenderInputText() {
   return renderInputText;
}

xhtml

<p:selectBooleanCheckbox id="flag" value="{bean.renderInputText}" >.
   <p:ajax update="inputPanel" />
</p:selectBooleanCheckbox>

<h:panelGroup id="inputPanel">
    <p:inputText rendered="{bean.renderInputText}"/>
</h:panelGroup>

jQuery

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

<h:head>
    <!-- This can be located either in the facelet or in external js file-->
    <script>
        $(function() {
            PF('selectWV').jq.change(function() {
                if (PF('selectWV').isChecked()) {
                    PF('buttonWV').jq.show();
                } else {
                    PF('buttonWV').jq.hide();
                }
            })
        })
    </script>
</h:head>

<h:body>

    <h:form id="form">
                    Accept Terms: <p:selectBooleanCheckbox
            widgetVar="selectWV" />
        <p:commandButton value="Register" widgetVar="buttonWV"
            style="display: none" />
    </h:form>
</h:body>
</html>

一个小的工作示例（jQuery 版本）可以在github 上找到，两个主要文件terms.xhtml 和terms.js

还有一个online Demo。

希望对您有所帮助。

【讨论】：

【解决方案2】：

JSF/服务器端解决方案：

如果您不想显示 JSF 组件，请使用 rendered 属性。例如

<p:inputText id="name" ... rendered="#{myBean.displayed}" />

如果您想隐藏它，请将 displayed 布尔值设置为 false。这将发生在服务器端。

JavaScript/客户端解决方案：

您也可以使用 JavaScript 代码，这个解决方案几乎与 JSF 或 PrimeFaces 无关：

JavaScript 函数：

function hideNameInput() {
    $('[id="#{p:component('name')}"]').hide();
}

#{p:component('name')} 将返回输入的 HTML 标识符。

【讨论】：

隐藏组件工作，同时我想将复选框标志状态更改为 true

【解决方案3】：

您可以在 bean 中使用 ajax 和布尔值（如标志）来执行此操作

<h:form id="mainForm">
    <p:selectOneMenu style="width:150px" id="id" onchange="onCall()">
        <f:selectItem itemLabel="Select" itemValue=""></f:selectItem>
        <f:selectItem itemLabel="Other" itemValue="Other"></f:selectItem>
    </p:selectOneMenu>
    <p:selectBooleanCheckbox id="flag" value="#{mybean.flag}" update="mainForm"/>
    <p:inputText id="name" value="#{mybean.value}" rendered="#{mybean.flag}"/>
</h:form>

编辑：忘记重新加载视图以在值更改后显示/隐藏

问候

【讨论】：

他正在寻求客户端解决方案。
是否在不使用服务器代码的情况下抛出客户端级别
为什么要在客户端做呢？
OP 要求在客户端执行此操作..
@XtremeBiker 说第二次真的很有帮助，谢谢