Apply Ajax Behavior to Events on Any Component

Implement a partial page update without using command links or buttons. For example, a user can hover over a component to trigger the update.

Refer to the contact list example in Provide Status for Asynchronous Operations. 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 that contains the specialized behavior.
The <apex:actionSupport> tag defines the partial page update that the command link previously implemented.
- The event attribute specifies the DOM event that triggers the update. Whereas <apex:commandLink> only executes during the “onclick” event, <apex:actionSupport> can execute on any valid event, such as “onclick”, “ondblclick”, and “onmouseover.”
- The reRender attribute specifies which part of the page refreshes.
- The <apex:param> tag sets the value of the cid query string parameter when the specified event occurs.

The reRender attribute isn’t required. If you don’t set it, the page doesn’t refresh upon the specified event, but <apex:param> still sets the name and value of cid.

Note

The resulting markup is:

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                                              status="detailStatus"> 
14                              <apex:param name="cid" value="{!contact.id}"/>
15                          </apex:actionSupport> 
16                          {!contact.Name}
17                      </apex:outputPanel> 
18                  </apex:column>
19            </apex:dataTable>
20        </apex:form>
21    </apex:pageBlock>
22    <apex:outputPanel id="detail">
23        <apex:actionStatus startText="Requesting..." id="detailStatus">
24            <apex:facet name="stop">
25                <apex:detail subject="{!$CurrentPage.parameters.cid}"
26                                        relatedList="false" 
27                                        title="false"/>
28            </apex:facet>
29        </apex:actionStatus>
30    </apex:outputPanel>
31</apex:page>

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

See Also

Using JavaScript in Visualforce Pages