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.

The resulting markup is:

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

See Also