---
schema_version: "1"
id: 4db9ad6d738bd252aee2a1ff2304e4c4a6223edc6edd02af0e5905bce369b09a
title: Apply Ajax Behavior to Events on Any Component
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/quick-start/pages-quick-start-ajax-partial-page-update-any-component.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-quick-start-ajax-partial-page-update-any-component.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: b2ce45deb0c6038775d622fe6d792b083ce22bc537406c565e4ff7e63d8aabcb
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# 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](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-quick-start-ajax-async-status.md). 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 -->
```markup
<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**  


-   [Using JavaScript in Visualforce Pages](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/javascript/pages-javascript-intro.md)