Time for action – updating UI components using RequestContext.update()

In this section, we will demonstrate how to update client-side view components from the server side using the following steps:

  1. Create a form with an input field and a submit button as follows: 
    <h:form id="form1">
  <h:panelGrid columns="2">
    <h:outputLabel value="EmailId" />
    <p:inputText id="emailId" value="#{requestContextController.emailId}"/>
    
    <p:commandButton id="submitBtn" value="Submit" actionListener="#{requestContextController.handleSubmit}" />
  </h:panelGrid>
  <h:outputText value="You have Entered : #{requestContextController.emailId}" />
</h:form>
  2. In the action handler method, update the form component using the RequestContext.update() method as follows: 
    public void handleSubmit(ActionEvent ae)
{
  RequestContext.getCurrentInstance().update("form1");
}

What just happened?

We got a RequestContext instance using RequestContext.getCurrentInstance() and used the update() method to update the form component with id="form1". So, if you enter admin@gmail.com in the e-mail input field and click on the Submit button, you will see the updated text as You have Entered: admin@gmail.com.

Executing JavaScript from server-side code

You can execute JavaScript code using the RequestContext.execute() method.

Suppose you want to display a dialog box once the form submission request is completed successfully.

上一章目录下一章