September 10th, 2009 by Lincoln Baxter III

JSF2: How to Create a Global Ajax Status Indicator

So, one of the best ways I know of to tell a user that they should be waiting for something to finish, is by setting the cursor to ‘wait’. It’s how desktop applications do it. It’s how the operating system does it… it’s how ajax should probably do it (if you want to solve the user wait interaction globally.) With JSF2, it’s easy to accomplish! This blog is based on Jim Driscoll’s blog, “Busy status indicator with JSF 2.” — for attaching a status to an individual event.

In your XHTML page, make sure that you output the JSF2 ajax libraries:

<h:outputScript library="javax.faces" name="jsf.js" />

Now, in Javascript:

Make sure this javascript is only executed once per page, or you might get conflicting updates.
/**
 * ***************************************
 * Busy Status
 */
if (!window["busystatus"]) {
	var busystatus = {};
}
 
busystatus.onStatusChange = function onStatusChange(data) {
	var status = data.status;
 
	alert("ajax event triggered")
	if (status === "begin") { // turn on busy indicator
		document.body.style.cursor = 'wait';
	} else { // turn off busy indicator, on either "complete" or "success"
		document.body.style.cursor = 'auto';
	}
};
 
jsf.ajax.addOnEvent(busystatus.onStatusChange);
And that’s all there is to it! Your mouse cursor will now change to the hourglass when a user triggers any JSF2 ajax event.

Posted in JSF

5 Comments

  1. Ed Burns says:

    Very good idea!

  2. Thanks for the tip, very useful!

  3. Paulo Vitor says:

    Thanks! You save my day.

  4. Apurv says:

    Can’t believe it could be so simple. Thanks for sharing.

  5. Jose says:

    Thanks!!!!!

Leave a Comment




Please note: In order to submit code or special characters, wrap it in

[code lang="xml"][/code]
(for your language) - or your tags will be eaten.

Please note: Comment moderation is enabled and may delay your comment from appearing. There is no need to resubmit your comment.