Time for action – updating UI components using jQuery Selectors

Let us see how to use the jQuery Selector API to update JSF UI components.

1. Create a form with some mandatory input fields and commandButtons. When buttons are clicked, update the form or fields using jQuery Selector expressions as follows:

   <h:form id="loginForm" styleClass="myform" style="width: 500px;">
     <p:panel header="Login Form">
     <p:messages/>
     <h:panelGrid columns="2">
       <h:outputText value="EmailId:" />
       <p:inputText value="#{jQuerySelectorController.user.emailId}" required="true" label="EmailId"/>
       
       <h:outputText value="Password:" />
       <p:password value="#{jQuerySelectorController.user.password}" required="true" label="Password"/>
       
       <p:commandButton value="Update Form" actionListener="#{jQuerySelectorController.doLogin}" update="@(#loginForm)"/>
       <p:commandButton value="Update Fields" actionListener="#{jQuerySelectorController.doLogin...