Enable/Disable SelectOneMenu of primefaces using Java Script

Question

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.

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

Thanks..

Solution 1

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

You need to give the name to this variable using widgetVar attribute:

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

You can than call in JavaScript:

myMenuWidget.disable();

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

Solution 2

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

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

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!