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.

About the author:

Lincoln Baxter, III is a Senior Software Engineer at Red Hat, working on JBoss open-source projects; most notably as project lead for JBoss Forge. This blog represents his personal thoughts and perspectives, not necessarily those of his employer.

He is a founder of OCPsoft, the author of PrettyFaces and Rewrite, the leading URL-rewriting extensions for Servlet, Java EE, and Java web frameworks; he is also the author of PrettyTime, social-style date and timestamp formatting for Java. When he is not swimming, running, or playing Ultimate Frisbee, Lincoln is focused on promoting open-source software and making web-applications more accessible for small businesses, individuals.