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.

1. 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.
2. 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:

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