Salesforce Docs Portal

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.

note: 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.

The resulting markup is:

<!-- otherprops: apex_page set_clipboard --> 
<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" 
                                              status="detailStatus"> 
                              <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..." id="detailStatus">
            <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, hover over any contact and notice that the detail area refreshes appropriately without clicking it.

See Also