Javascript – Enable/Disable SelectOneMenu of primefaces using Java Script

javascriptjsf-2primefaces

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

Best Answer

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

Related Topic