Visualforce Developer’s Guide
jNewer Version Available
Applying Ajax Behavior to Events on Any Component
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?
To do this with the contact list example, remove the <apex:commandLink> tag from the
data table and wrap the contact name in an <apex:outputPanel> tag instead.
Within this output panel, add an <apex:actionSupport> element as a sibling of the contact's name:
- The <apex:outputPanel> tag defines the area over in which we want the specialized behavior.
- The <apex:actionSupport> tag defines the partial page update behavior that was implemented
previously by the command link.
- The event attribute specifies the DOM event that should trigger the update. Whereas <apex:commandLink> only executes during the “onclick” event, <apex:actionSupport> can execute on any valid event such as “onclick”, “ondblclick”, or, for this example, “onmouseover”.
- The reRender attribute specifies which part of the page should refresh.
- The <apex:param> tag sets the value of the cid query string parameter when the specified event occurs.
The resulting markup looks like this:
1<apex:page standardController="Account">
2 <apex:pageBlock title="Hello {!$User.FirstName}!">
3 You are displaying contacts from the {!account.name} account.
4 Mouse over 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:outputPanel>
12 <apex:actionSupport event="onmouseover" rerender="detail">
13 <apex:param name="cid" value="{!contact.id}"/>
14 </apex:actionSupport>
15 {!contact.Name}
16 </apex:outputPanel>
17 </apex:column>
18 </apex:dataTable>
19 </apex:form>
20 </apex:pageBlock>
21 <apex:outputPanel id="detail">
22 <apex:actionStatus startText="Requesting...">
23 <apex:facet name="stop">
24 <apex:detail subject="{!$CurrentPage.parameters.cid}" relatedList="false"
25 title="false"/>
26 </apex:facet>
27 </apex:actionStatus>
28 </apex:outputPanel>
29</apex:page>After saving the page, move the mouse over any contact and notice that the detail area refreshes appropriately without clicking on it.