To activate Ajax functionality, the web application must create an Ajax request and send it to the server. The server then processes the request. The application uses the attributes of the `f:ajax` tag listed in link:jsf-ajax003.html#GKDER[Table 13-1] to create the Ajax request. The following sections explain the process of creating and sending an Ajax request using some of these attributes. [width="100%",cols="100%",] |======================================================================= a| *Note*: Behind the scenes, the `jsf.ajax.request()` method of the JavaScript resource library collects the data provided by the `f:ajax` tag and posts the request to the JavaServer Faces lifecycle. |======================================================================= The following topics are addressed here: * link:#GKHVT[Using the event Attribute] * link:#GKHUZ[Using the execute Attribute] * link:#GKHWM[Using the immediate Attribute] * link:#GKHZS[Using the listener Attribute] [[GKHVT]][[using-the-event-attribute]] Using the event Attribute ~~~~~~~~~~~~~~~~~~~~~~~~~ The `event` attribute defines the event that triggers the Ajax action. Some of the possible values for this attribute are `click`, `keyup`, `mouseover`, `focus`, and `blur`. If not specified, a default event based on the parent component will be applied. The default event is `action` for `javax.faces.component.ActionSource` components, such as a `commandButton`, and `valueChange` for `javax.faces.component.EditableValueHolder` components, such as `inputText`. In the following example, an Ajax tag is associated with the button component, and the event that triggers the Ajax action is a mouse click: [source,oac_no_warn] ---- <h:commandButton id="submit" value="Submit"> <f:ajax event="click" /> </h:commandButton> <h:outputText id="result" value="#{userNumberBean.response}" /> ---- [width="100%",cols="100%",] |======================================================================= a| Note: You may have noticed that the listed events are very similar to JavaScript events. In fact, they are based on JavaScript events, but do not have the `on` prefix. |======================================================================= For a command button, the default event is `click`, so you do not actually need to specify `event="click"` to obtain the desired behavior. [[GKHUZ]][[using-the-execute-attribute]] Using the execute Attribute ~~~~~~~~~~~~~~~~~~~~~~~~~~~ The `execute` attribute defines the component or components to be executed on the server. The component is identified by its `id` attribute. You can specify more than one executable component. If more than one component is to be executed, specify a space-delimited list of components. When a component is executed, it participates in all phases of the request-processing lifecycle except the Render Response phase. The `execute` attribute value can also be a keyword, such as `@all`, `@none`, `@this`, or `@form`. The default value is `@this`, which refers to the component within which the `f:ajax` tag is nested. The following code specifies that the `h:inputText` component with the `id` value of `userNo` should be executed when the button is clicked: [source,oac_no_warn] ---- <h:inputText id="userNo" title="Type a number from 0 to 10:" value="#{userNumberBean.userNumber}"> ... </h:inputText> <h:commandButton id="submit" value="Submit"> <f:ajax event="click" execute="userNo" /> </h:commandButton> ---- [[GKHWM]][[using-the-immediate-attribute]] Using the immediate Attribute ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The `immediate` attribute indicates whether user inputs are to be processed early in the application lifecycle or later. If the attribute is set to `true`, events generated from this component are broadcast during the Apply Request Values phase. Otherwise, the events will be broadcast during the Invoke Application phase. If not defined, the default value of this attribute is `false`. [[GKHZS]][[using-the-listener-attribute]] Using the listener Attribute ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The `listener` attribute refers to a method expression that is executed on the server side in response to an Ajax action on the client. The listener's `javax.faces.event.AjaxBehaviorListener.processAjaxBehavior` method is called once during the Invoke Application phase of the lifecycle. In the following code from the `reservation` example application (see link:jsf-facelets009.html#BABGGIAA[The reservation Example Application]), a `listener` attribute is defined by an `f:ajax` tag, which refers to a method from the bean: [source,oac_no_warn] ---- <f:ajax event="change" render="total" listener="#{reservationBean.calculateTotal}"/> ---- Whenever either the price or the number of tickets ordered changes, the `calculateTotal` method of `ReservationBean` recalculates the total cost of the tickets and displays it in the output component named `total`.