Question

有没有选项可以将标志设置为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>

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

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

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

和online Demo。

希望这有助于。

Answer 2

JSF /服务器端解决方案：

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

<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标识符。

Answer 3

您可以在bean中使用ajax和boolean值（如flag）来执行此操作

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

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

此致

使用JQuery隐藏/显示<p：inputtext> </p：inputtext>

3 个答案: