Using command links and buttons to implement a partial page update is relatively simple, but suppose you want to have the same page update occur just by hovering the mouse over a contact's name?
The resulting markup looks like this:
<apex:page standardController="Account"> <apex:pageBlock title="Hello {!$User.FirstName}!"> You are displaying contacts from the {!account.name} account. Mouse over 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:outputPanel> <apex:actionSupport event="onmouseover" rerender="detail"> <apex:param name="cid" value="{!contact.id}"/> </apex:actionSupport> {!contact.Name} </apex:outputPanel> </apex:column> </apex:dataTable> </apex:form> </apex:pageBlock> <apex:outputPanel id="detail"> <apex:actionStatus startText="Requesting..."> <apex:facet name="stop"> <apex:detail subject="{!$CurrentPage.parameters.cid}" relatedList="false" title="false"/> </apex:facet> </apex:actionStatus> </apex:outputPanel> </apex:page>
After saving the page, move the mouse over any contact and notice that the detail area refreshes appropriately without clicking on it.