Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

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.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

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.

  1. 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.
  2. Observe the request with onevent. Point <f:ajax onevent> to a JavaScript function. The callback receives lifecycle stages: show the indicator when data.status is begin, then hide it on complete or success.
  3. 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.

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>:

  • event selects the event that starts the Ajax action. If omitted, Faces uses a component-specific default.
  • execute identifies the components processed on the server.
  • render identifies 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.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

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.

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.