Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Implement 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 updates 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. When a user clicks the button or link, only the identified component and all of its child components refresh.

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, you can change the behavior of the page so that only the area below the list refreshes.

Create or identify the portion of the page to rerender. 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 you can use elsewhere in the page to refer to this area. It must be unique in the page.
Next, indicate the point of invocation (the command link) to perform a partial page update of the area that you just defined. 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 is:

1<apex:page standardController="Account">
2    <apex:pageBlock title="Hello {!$User.FirstName}!">
3        You are displaying contacts from the {!account.name} account. 
4        Click a contact's name to view his or her details.
5    </apex:pageBlock>
6    <apex:pageBlock title="Contacts">
7        <apex:form>
8            <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4" 
9                               border="1">
10                  <apex:column>
11                      <apex:commandLink rerender="detail"> 
12                          {!contact.Name}
13                          <apex:param name="cid" value="{!contact.id}"/>
14                      </apex:commandLink>
15                  </apex:column>
16            </apex:dataTable>
17        </apex:form>
18    </apex:pageBlock>
19    <apex:outputPanel id="detail"> 
20        <apex:detail subject="{!$CurrentPage.parameters.cid}" relatedList="false" 
21                        title="false"/>
22    </apex:outputPanel> 
23</apex:page>

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

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

Note

Visualforce Developer Guide

Implement Partial Page Updates with Command Links and Buttons