Action as JavaScript Event

To invoke an action on the controller as a result of a JavaScript event, use the actionSupport component. This component fires an action whenever the event is detected on the enclosing Visualforce component.

The actionSupport component is placed within the body of a Visualforce component that fires the JavaScript event of interest. For example, an inputField component renders an HTML input element, so it fires standard JavaScript events such as onfocus, onblur, onclick, and so forth. Placing an actionSupport component within the inputField component allows it to listen for one of these events and invoke a controller method in response.

To use actionSupport, specify the name of the controller method to invoke in its action attribute, and a single JavaScript event to listen for in the event attribute. By default, actionSupport overrides the default browser-level handlers for the selected event. To disable this behavior, include a disableDefault attribute with the value of false. The onsubmit and oncomplete attributes are also supported to allow pre- or postprocessing of the request using your own JavaScript function.

Reusing the controller code from Listing 7.4, the Visualforce page in Listing 7.6 fires the timesTwo action when the text field receives focus. Try it by clicking somewhere else on the page, and then into the text field.

Listing 7.6 Visualforce Page Using actionSupport

Click here to view code image

<apex:page controller="MyPageController7_3">
  <apex:outputPanel id="result">
    <apex:pageMessages />
  </apex:outputPanel>
  <apex:form>
    <apex:inputText>
      <apex:actionSupport action="{!timesTwo}"
        event="onfocus" reRender="result" />
    </apex:inputText>
  </apex:form>
</apex:page>