Implementing Partial Page Updates with Command Links and Buttons

One of the most widely used Ajax behaviors is a partial page update, in which only a specific portion of a page is updated following some user action, rather than a reload of the entire page.

The simplest way to implement a partial page update is to use the reRender attribute on an <apex:commandLink> or <apex:commandButton> tag to identify a component that should be refreshed. When a user clicks the button or link, only the identified component and all of its child components are refreshed.

For example, consider the contact list example shown in Getting and Setting Query String Parameters on a Single Page. In that example, when a user clicks the name of a contact in the list to view the details for that contact, the entire page is refreshed as a result of this action. With just two modifications to that markup, we can change the behavior of the page so that only the area below the list refreshes:
  1. First, create or identify the portion of the page that should be rerendered. To do this, wrap the <apex:detail> tag in an <apex:outputPanel> tag, and give the output panel an id parameter. The value of id is the name that we can use elsewhere in the page to refer to this area. It must be unique in the page.
  2. Next, indicate the point of invocation (the command link) that we want to use to perform a partial page update of the area that we just defined. To do this, add a reRender attribute to the <apex:commandLink> tag, and give it the same value that was assigned to the output panel's id.

The final markup looks like this:

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are displaying contacts from the {!account.name} account. 
        Click a contact's name to view his or her details.
    </apex:pageBlock>
    <apex:pageBlock title="Contacts">
        <apex:form>
            <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4" 
                               border="1">
                  <apex:column>
                      <apex:commandLink rerender="detail"> 
                          {!contact.Name}
                          <apex:param name="cid" value="{!contact.id}"/>
                      </apex:commandLink>
                  </apex:column>
            </apex:dataTable>
        </apex:form>
    </apex:pageBlock>
    <apex:outputPanel id="detail"> 
        <apex:detail subject="{!$CurrentPage.parameters.cid}" relatedList="false" 
                        title="false"/>
    </apex:outputPanel> 
</apex:page>

After saving the page, click any contact and notice how the detail component displays without a complete page refresh.

Note

Note

You cannot use the reRender attribute to update content in a table.

Previous
Next