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:

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, Inc., working on JBoss open-source projects. This blog represents his personal thoughts and perspectives, not necessarily those of his employer. He is a founder of OcpSoft, the author of PrettyFaces: bookmarking, SEO extensions for JSF, and an individual member of the JavaServer™ Faces Expert Group. 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. His latest project is ScrumShark, an open-source, agile project management tool.