HTML and CSS Reference
In-Depth Information
Ajaxifying JSF Applications
Prior to JSF 2.0 you had to implement your own support for Ajax or use third-party libraries such as RichFaces.
Since JSF 2.0, Ajax has been supported out of the box using the <f:ajax> tag or the JavaScript API.
Using the <f:ajax> tag
<f:ajax> is a tag that registers Ajax behavior on UIComponents. Either the tag can be nested as a child inside a
UIComponent, or it can embrace multiple UIComponents if the same Ajax behavior should be applied to all the
The tag offers a small but powerful selection of attributes for configuring the Ajax behavior. Table 11-1 outlines
the available attributes.
Table 11-1. Attributes for the <f:ajax/> Tag
Determine if the Ajax behavior should not be rendered. Default is false.
Number of milliseconds to delay the Ajax request. If multiple requests get in during the delay
only the last request will be executed.
String specifying the DOM event that the Ajax behavior should respond to. It is important to note
that it is just the event name (e.g., “click” and not “onclick”). The event must be emitted from the
UIComponent using the tag; otherwise the Ajax behavior will never be triggered.
Space-delimited list of components that should be executed when the Ajax behavior is triggered.
Determine if the Ajax behavior is triggered in the Apply Request Value phase (true) or the Invoke
Application phase (false). Default is false.
Reference to a listener that should process the AjaxBehaviorEvent triggered by the Ajax behavior.
Name of JavaScript function that should handle events emitted from executing the Ajax request.
Name of JavaScript function that should handle errors emitted from executing the Ajax request.
Space-delimited list of components that should be (re)rendered upon success of the Ajax request.
Listing 11-4 shows an example of using the <f:ajax> tag to update an output panel based on what is entered in
an input text component. The Ajax behavior is hooked up to the keyup DOM event (typing a single key). When the
event is received, the input text component will be executed and the value entered is stored in the outputMessage
property of the ajaxDemo managed bean. When the request returns successful, the output-message panel is
re-rendered and the message entered in the input text is displayed in the panel. The example also demonstrates the
usefulness of the onevent attribute by passing all Ajax events to a JavaScript function called processInput , which
toggles the visibility of an Ajax spinner when the requests begin and when it completes successfully.
Listing 11-4. Example of Using the <f:ajax/> Tag to Register Ajax Behavior When Updating a Text Field
<h:form id="my-message">
<h:outputLabel value="Your message" for="input-message" />
<h:inputText id="input-message" value="#{ajaxDemo.outputMessage}">
<f:ajax event="keyup"
Search WWH ::

Custom Search