javascript 使用 Java Script 启用/禁用 Primefaces 的 SelectOneMenu

Enable/Disable SelectOneMenu of primefaces using Java Script

提问by Abhay

I am new to JSF and Primefaces. I am building a xhtml page in which i have two selectonemenu of primefaces.I wanted to enable or disable second selectonemenu depending on the value selected by user in first selectonemenu. For enable/disable i wrote Java Script in the page as i wanted to do it at client side, but i dont know how to call java script function in the primefaces component.

我是 JSF 和 Primefaces 的新手。我正在构建一个 xhtml 页面，其中我有两个 Primefaces 的 selectonemenu。我想根据用户在第一个 selectonemenu 中选择的值启用或禁用第二个 selectonemenu。对于启用/禁用，我在页面中编写了 Java 脚本，因为我想在客户端执行此操作，但我不知道如何在 primefaces 组件中调用 Java 脚本函数。

Code Sample

代码示例

        <h:head>
        <style type="text/css">
    .ui-widget,.ui-widget .ui-widget {
        font-size: 12px !important;
    }
    </style>
        <script>
            function disableOneMenu() {
                alert("In Disable One Menu Function...");
                var clickedGroup = document.getElementById('groupOneMenu').value;
                alert("Selected Value " + clickedGroup);
                if (clickedGroup == "Designation") {
                    document.getElementById('designation').disabled = true;
                    alert("Location One Menu Disabled...");
                } 
            }
        </script>
        <link type="text/css" rel="stylesheet"
            href="#{request.contextPath}/themes/redmond/skin.css" />
    </h:head>
    <h:body>
        <h:form>
            <p:layout fullPage="true">
                <p:layoutUnit position="north" size="30"
                    header="HCV : Peer Group Analysis" resizable="true">
                </p:layoutUnit>
                <p:layoutUnit id="contentLayout" position="west" size="200">
                    <h:panelGrid columns="2">
                        <h:outputText value="Analyse for values of attribute: " />
                        <p:selectOneMenu id="groupOneMenu" value="#{userInput.groupAttr}"
                            style="font-size:18;font-weight:bold;color:blue;width:100">
                            <f:selectItem itemLabel="Select One" itemValue="" />
                            <f:selectItems value="#{userInput.groupAttrList}" />
                            <p:ajax event="valueChange" actionListener="disableOneMenu" />
                        </p:selectOneMenu>
                        <h:outputText value="Designation: " />
                        <p:selectOneMenu id="designatinoOneMenu"
                            value="#{userInput.designation}"
                            style="font-size:18;font-weight:bold;color:blue;width:100">
                            <f:selectItem itemLabel="Select One" itemValue="" />
                            <f:selectItems value="#{userInput.designationList}" />
                        </p:selectOneMenu>
                       </h:panelGrid>
            </p:layoutUnit>
        </p:layout>
    </h:form>
</h:body>
</html>

Please help, hw can i use java script in xhtml page..

请帮忙，我可以在 xhtml 页面中使用 java 脚本吗..

Thanks..

谢谢..

回答by Danubian Sailor

JavaScript API for PrimeFaces component is mostly documented. There are disable()and enable()methods on DOM variable.

PrimeFaces 组件的 JavaScript API 主要有文档记录。DOM 变量有disable()和enable()方法。

You need to give the name to this variable using widgetVarattribute:

您需要使用widgetVar属性为该变量命名：

<p:selectOneMenu id="myMenu" widgetVar="myMenuWidget" ... />

You can than call in JavaScript:

你可以在 JavaScript 中调用：

myMenuWidget.disable();

widgetVarmust be different than ID! IE is using the same namespace for ids and global JS variables (as opposed to FireFox).

widgetVar必须与ID不同！IE 对 ids 和全局 JS 变量使用相同的命名空间（与 FireFox 相对）。

回答by NDeveloper

You can use the disabledattributes of <h:selectOneMenu>to do the same. you don't need to use java script.

您可以使用 的disabled属性<h:selectOneMenu>来做同样的事情。你不需要使用java脚本。

<h:body>
    <h:form>
        <h:outputText value="#{test.visible}"/>
        <h:selectOneMenu valueChangeListener="#{test.valuChangeHandler}" onchange="submit()" immediate="true">
            <f:selectItems value="#{test.opList}"/>
        </h:selectOneMenu>
       <h:selectOneMenu disabled="#{!test.visible}">
            <f:selectItems value="#{test.testList}"/>
       </h:selectOneMenu>
    </h:form>
</h:body>

and the Bean can be written as:

Bean可以写成：

private boolean visible = false;
public boolean isVisible() {
    return visible;
}
public void setVisible(boolean visible) {
    this.visible = visible;

}
//Other Codes
public void valuChangeHandler(ValueChangeEvent changeEvent){

    if(changeEvent.getNewValue().toString().trim().equalsIgnoreCase("test1"))
        setVisible(true);
}

See if this helps!

看看这是否有帮助！

回答by Gustavo Amaro

try it!

试试看！

<script>
  function disableOneMenu() {

    PF('designatinoOneMenuWV').disabled();
  }
</script>

<p:selectOneMenu id="groupOneMenu" value="#{userInput.groupAttr}" 
      style="font-size:18;font-weight:bold;color:blue;width:100" onchange="disableOneMenu()">
  <f:selectItem itemLabel="Select One" itemValue="" />
  <f:selectItems value="#{userInput.groupAttrList}" />
</p:selectOneMenu>

<p:selectOneMenu id="designatinoOneMenu" widgetVar="designatinoOneMenuWV"
      value="#{userInput.designation}" style="font-size:18;font-weight:bold;color:blue;width:100">
  <f:selectItem itemLabel="Select One" itemValue="" />
  <f:selectItems value="#{userInput.designationList}" />
</p:selectOneMenu>