Show loading progress when making JSF Ajax request
If you're not already using a 3rd party component library which could already have a ready-made component for that, such as PrimeFaces with <p:ajaxStatus>
, then you can use the JSF-provided JavaScript jsf.ajax.addOnEvent()
function (and eventually also jsf.ajax.addOnError()
) to hook a function on ajax events.
Here's a basic kickoff example:
<script> jsf.ajax.addOnEvent(function(data) { var ajaxstatus = data.status; // Can be "begin", "complete" and "success" var ajaxloader = document.getElementById("ajaxloader"); switch (ajaxstatus) { case "begin": // This is called right before ajax request is been sent. ajaxloader.style.display = 'block'; break; case "complete": // This is called right after ajax response is received. ajaxloader.style.display = 'none'; break; case "success": // This is called when ajax response is successfully processed. // NOOP. break; } });</script><img id="ajaxloader" src="ajaxloader.gif" style="display: none;" />
See also chapter 13.3.5.2 of the JSF 2.0 specification:
13.3.5.2 Monitoring Events For All Ajax Requests
The JavaScript API provides the
jsf.ajax.addOnEvent
function that can be used to register a JavaScript function that will be notified when any Ajax request/response event occurs. Refer to Section 14.4 “Registering Callback Functions” for more details. Thejsf.ajax.addOnEvent
function accepts a JavaScript function argument that will be notified when events occur during any Ajax request/response event cycle. The implementation must ensure the JavaScript function that is registered must be called in accordance with the events outlined in Section TABLE 14-3 “Events”.
You can grab some cool ajax loader gifs for free from http://www.ajaxload.info, by the way.
richfaces has a very easy to use component that I use like this:
<a4j:status startText="" stopText="" onstart="showAjaxActive();" onstop="hideAjaxActive();"/>