Question

i have a form in JSF2.0 like this

    <h:form id="validationFrom" >

        <div id="mandotary" >

            <h:panelGrid columns="4"
                         border="1"
                         width="50%"
                         style=""
                         columnClasses="asteriskColumns, nameColumns" >

                <h:outputLabel value="*" style="color: red;" />
                <h:outputLabel value="Heading: " />
                <h:inputText id="heading" value="#{validation.heading}" />
                <h:message id="headingMessage" for="heading" style="color: red" />

                <h:outputLabel value="*" />
                <h:outputLabel value="Select Category Type :" />
                <h:selectOneRadio id="selectCategoryRadioButton"
                                  rendered=""
                                  value="#{validation.selectedRadioButton}"
                                  layout="layoutDirection">

                    <f:selectItems value="#{validation.radioButtonItems}"/>

                </h:selectOneRadio>
                <h:panelGroup />

                <h:outputLabel value="*"
                               rendered=""/>

                <h:outputLabel value="Broad Category :"
                               rendered=""/>
                <h:selectOneMenu id="broadCategory"
                                 rendered=""
                                 value="#{validation.selectedBroadCategory}" >

                    <f:selectItems value="#{validation.broadCategoryItemsList}"/>

                </h:selectOneMenu>
                <h:message id="broadCategoryMessage" for="broadCategory" style="color: red" />

                <h:outputLabel value="*" />
                <h:outputLabel value="Sub Category :" />
                <h:selectOneMenu id="subCategory"
                                 value="#{validation.selectedSubCategory}"
                                 style="width: 250px;">

                    <f:selectItem itemLabel="---Select---" noSelectionOption="true" />
                    <f:selectItems value="#{validation.subCategoryItemsMap}"/>

                </h:selectOneMenu>
                <h:message id="subCategoryMessage" for="subCategory" style="color: red" />

                <h:outputLabel value="*" style="color: red;" />
                <h:outputLabel value="Description: " />
                <h:inputText id="description" value="#{validation.description}" />
                <h:message id="descriptionMessage" for="description" style="color: red" />

            </h:panelGrid>

        </div>

        <h:commandButton id="saveButton"
                         value="Save"
                         action ="null"/>


        <h:commandButton id="cancelButton"
                         value="Cancel"
                         action="null" />

    </h:form>

</h:body>

Now i want to select form and div with class mandoroty, so i can check all the elements inside div. I am trying this, but it isn’t working

(function($){

    var mandotoryFieldsArray = $("#validationFrom div.mandotary")
    var test;

})(jQuery); //end of (function($){}

The line is giving me null array. Why? What i am doing wrong in selecting the form element?

Answer 1

try to use

$("[@id=validationFrom :mandotary]");

refer blog http://rockycode.com/blog/ids-jsf-used-jquery/