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);