In the first example, we will develop a counter that will be incremented in an action listener. The current counter value will be displayed in two output components h:outputText. A decision as to which h:outputText component is responsible for the output is provided by the p:selectBooleanCheckbox checkbox. The user can decide at runtime whether they would like to update the first or the second output component. Here's the code for the first example:

<p:selectBooleanCheckbox id="checkbox"
  itemLabel="Update first output"
  value="#{requestContextBean.firstOutput}"/>

<h:panelGrid columns="2" style="margin-top:10px;">
  <h:outputText value="First Output"/>
  <h:outputText id="firstOutput"
    value="#{requestContextBean.counter}"/>

  <h:outputText value="Second Output"/>
  <h:outputText id="secondOutput"
    value="#{requestContextBean.counter}"/>

  <f:facet name="footer">
    <p:commandButton value="Increment counter"
      actionListener="#{requestContextBean.incrementWithUpdate}"
      process="@form" style="margin:10px 0 10px 0;"/>
  </f:facet>
</h:panelGrid>

In the next example, we will take the same counter that is displayed by h:outputText and a very long text output so that the browser's scrollbars appear. At the end of the text output, we will place a command button that increments the counter and scrolls to the counter's output when the AJAX response comes back. The logic for scrolling is implemented inside the button's action listener. Here's the code for this example:

<h:panelGrid id="counter" columns="2"
  style="font-weight:bold;">
  <h:outputText value="Counter"/>
   <h:outputText value="#{requestContextBean.counter}"/>
</h:panelGrid>

<p>Some text</p>
...
<p>Some text</p>

<p:commandButton value="Increment counter"
  process="@form" update="counter"
  actionListener="#{requestContextBean.incrementWithScroll}"
  style="margin:10px;"/>

The ViewScoped bean, with the incrementWithUpdate() and incrementWithScroll() action listeners, mentioned in the preceding code snippets, looks as shown here:

@Named
@ViewScoped
public class RequestContextBean implements Serializable {

  private boolean firstOutput = true;
  private int counter = 0;

  public void incrementWithUpdate(ActionEvent ae) {
    counter++;

    RequestContext requestContext =
      RequestContext.getCurrentInstance();

    if (firstOutput) {
      requestContext.update("firstOutput");
    } else {
      requestContext.update("secondOutput");
    }
  }

  public void incrementWithScroll(ActionEvent ae) {
    counter++;

    RequestContext requestContext =
      RequestContext.getCurrentInstance();
    requestContext.scrollTo("counter");
  }

  // getters / setters
  ...
}

The following screenshot shows a snapshot result of the first example:

The RequestContext instance can be obtained as RequestContext.getCurrentInstance() in a manner similar to that for FacesContext. The update() method of the RequestContext instance expects the client IDs of the components to be updated. These components are firstOutput and secondOutput. Depending on the user's checkbox selection (Boolean variable firstOutput), either the first or the second h:outputText component will be updated.

Scrolling to a given component is done by the scrollTo() method. This method expects a client ID of the component that we want to scroll to. The requestContext.scrollTo("counter") call ensures that the user will see the counter value after clicking on the Increment counter button.

The client-side API for scrolling is also available to use directly in JavaScript, as shown here:

PrimeFaces.scrollTo("clientId")