Partial Page Refresh

Any action component can refresh part of a page using the reRender attribute. This attribute contains a comma-separated list of identifiers (the id values) of Visualforce view components to be refreshed when the action is completed. The identifiers must be of Visualforce components, not raw HTML elements. If no reRender value is provided or the identifiers are invalid, the entire page is refreshed. This is the default behavior of an action component.

Listings 7.1 and 7.2 are a Visualforce page and controller that demonstrate partial page refresh. A commandButton is defined to increment an integer value in the controller when clicked, via the increment method. The amount to be incremented is passed from the page to controller during the click, using the param component. The increment method returns a null PageReference to remain on the current Visualforce page rather than navigating to a new page. This is a requirement for partial page refreshes.

An outputPanel displays the current value of the integer. The reRender attribute is set on the commandButton to refresh only the outputPanel rather than the entire page.

Listing 7.1 Visualforce Page Using Partial Page Refresh

Click here to view code image

<apex:page controller="MyPageController7_1">
  <apex:form>
    <apex:commandButton action="{!increment}" value="Increment"
      reRender="result">
      <apex:param assignTo="{!amount}" value="2" />
    </apex:commandButton>
    <apex:outputPanel id="result">The value is: {!value}
    </apex:outputPanel>
  </apex:form>
</apex:page>

Listing 7.2 Visualforce Controller Using Partial Page Refresh

Click here to view code image

public class MyPageController7_1 {
  public Integer value { get; private set; }
  public Integer amount { get; set; }
  public MyPageController7_1() {
    value = 0;
  }
  public PageReference increment() {
    value += amount;
    return null;
  }
}