In JavaServer Faces, using <f:ajax> normally loads the framework’s Ajax JavaScript automatically; you do not need to add a script tag just to use that tag. Loading the Ajax library and displaying a visible “loading” indicator are separate tasks: use onevent and onerror for a custom indicator, or a component-library status widget. The resource name depends on the Faces generation: older Java EE applications use jsf.js in javax.faces, while Jakarta Faces uses faces.js in jakarta.faces.
Does <f:ajax> load the JavaScript automatically?
Yes. When a Facelets page uses <f:ajax>, Faces delivers its Ajax JavaScript resource to the browser. Oracle’s Java EE 7 tutorial identifies the older resource as jsf.js in the javax.faces library and says it is delivered automatically when <f:ajax> is used: Oracle Java EE 7 tutorial: Loading JavaScript as a Resource.
For Jakarta Faces, the Jakarta EE tutorial identifies faces.js in the jakarta.faces library and likewise documents automatic delivery when the page uses <f:ajax>: Jakarta EE tutorial: Ajax with Faces. These names belong to different framework generations; use the one that matches the application’s actual Faces version rather than substituting one for the other.
If a component needs the Faces Ajax API directly without an <f:ajax> tag, the Java EE tutorial describes explicitly loading the resource with <h:outputScript> or declaring a ResourceDependency. Jakarta Faces also documents direct use of faces.ajax.request() and the <h:commandScript> component for invoking a server-side method through Ajax. Consult the documentation for the application’s version before copying namespace-specific code.
#1 Best Overall
How do I show a loading indicator during a Faces Ajax request?
The built-in Ajax resource handles the client-side request machinery; it does not supply an application-specific spinner or status message. For a custom indicator, connect a JavaScript callback to the Ajax behavior and show or hide your own page element as the request changes state.
- Add a status element. Create an element in the page, such as a message or spinner, and initially hide it. Give it an ID your JavaScript can target.
- Observe the request with
onevent. Point<f:ajax onevent>to a JavaScript function. The callback receives lifecycle stages: show the indicator whendata.statusisbegin, then hide it oncompleteorsuccess. - Handle failures with
onerror. Define an error callback that hides the indicator and, if appropriate, displays a failure message. Otherwise, an unsuccessful request can leave the progress UI visible.
The Jakarta EE tutorial documents the begin, complete, and success callback stages and the onerror hook: Jakarta EE tutorial: Ajax with Faces. The show-and-hide behavior is something your page implements using those callbacks, not a built-in Faces spinner.
Rank #2
Which components are processed and updated?
A status indicator reports that an Ajax request is active; it does not control what Faces processes or what the browser updates. Those are separate concerns configured on <f:ajax>:
eventselects the event that starts the Ajax action. If omitted, Faces uses a component-specific default.executeidentifies the components processed on the server.renderidentifies the components updated in the client after the response.
Common targeting keywords include @this, @form, @all, and @none. Their use depends on the request you want to make and the portion of the page that should be refreshed; the Jakarta Faces tutorial explains the attributes and keywords: Ajax with Faces.
Should I use a component-library status widget?
If the page needs a shared indicator for Ajax requests rather than a custom callback for one behavior, a component library may provide a global status component. The PrimeFaces Showcase describes AjaxStatus as a global indicator of ongoing Ajax requests. Check the documentation for the PrimeFaces version used by your application.
RichFaces historically offered <a4j:status> with in-progress and complete states, but the cited reference is for RichFaces 4.0 Alpha 2. Treat it as historical guidance, not a current recommendation, unless that is the version your project actually uses: RichFaces 4.0 Alpha 2 Component Reference.
Quick Recap
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
