Add Dynamic Re-Rendering - Visualforce

Now you need to add elements to the page that set the page parameter and dynamically render the region you’ve named detail:

1. Modify your page by adding a new page block beneath your current one:

   <apex:pageBlock title="Contacts">
       <apex:form>
           <apex:dataList value="{! account.Contacts}" var="contact">
               {! contact.Name}
           </apex:dataList>
       </apex:form>
   </apex:pageBlock>

   This iterates over the list of contacts associated with the account, creating a list that has the name of each contact.
2. Click Save.
   If you access your page, you’ll see the list of contacts. Now you need to make each contact name clickable.
3. Modify the {! contact.Name} expression by wrapping it in an <apex:commandLink> component:

   <apex:commandLink rerender="contactDetails"> {! contact.Name} <apex:param name="cid" value="{! contact.id}"/> </apex:commandLink>

There are two important things about this component. First, it uses a rerender="contactDetails" attribute to reference the output panel you created earlier. This tellsVisualforce to do a partial page update of that region when the name of the contact is clicked. Second, it uses the <apex:param> component to pass a parameter, in this case the id of the contact.

If you click any of the contacts, the page dynamically updates that contact, displaying its details, without refreshing the entire page.

Visualforce provides native support for Ajax partial page updates. The key is to identify a region, and then use the rerender attribute to ensure that the region is dynamically updated.

Learning More

There’s a lot more to the Ajax and JavaScript support:

• <apex:actionStatus> lets you display the status of an Ajax request—displaying different values depending on whether it’s in-progress or completed.
• <apex:actionSupport> lets you specify the user behavior that triggers an Ajax action for a component. Instead of waiting for an <apex:commandLink> component to be clicked, for example, the Ajax action can be triggered by a simple mouse rollover of a label.
• <apex:actionPoller> specifies a timer that sends an Ajax update request to Force.com according to a time interval that you specify.
• <apex:actionFunction> provides support for invoking controller action methods directly from JavaScript code using an Ajax request.
• <apex:actionRegion> demarcates the components processed by Force.com when generating an Ajax request.