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:

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page standardController="Account">
18    <apex:pageBlock title="Hello {!$User.FirstName}!">
19        You are displaying contacts from the {!account.name} account. 
20        Mouse over a contact's name to view his or her details.
21    </apex:pageBlock>
22    <apex:pageBlock title="Contacts">
23        <apex:form>
24            <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4" 
25                               border="1">
26                  <apex:column>
27                      <apex:outputPanel>
28                          <apex:actionSupport event="onmouseover" rerender="detail"> 
29                              <apex:param name="cid" value="{!contact.id}"/>
30                          </apex:actionSupport> 
31                          {!contact.Name}
32                      </apex:outputPanel> 
33                  </apex:column>
34            </apex:dataTable>
35        </apex:form>
36    </apex:pageBlock>
37    <apex:outputPanel id="detail">
38        <apex:actionStatus startText="Requesting...">
39            <apex:facet name="stop">
40                <apex:detail subject="{!$CurrentPage.parameters.cid}" relatedList="false" 
41                                title="false"/>
42            </apex:facet>
43        </apex:actionStatus>
44    </apex:outputPanel>
45</apex:page>

After saving the page, move the mouse over any contact and notice that the detail area refreshes appropriately without clicking on it.

Visualforce Developer’s Guide

Applying Ajax Behavior to Events on Any Component

See Also: