Change mouse cursor to busy mode when PrimeFaces ajax request is in progress

Question

it is possible to change the mouse cursor's form into busy mode (for example: hourglass) when processing ajax button in JSF (specifically primefaces)? I want to change my cursor's form while my p:dataTable is loading data when i navigate it to the next page. Thanks.

Answer 1

You can achieve this with a little help of CSS and jQuery. With CSS, you can create a class which changes the cursor on the entire document. With jQuery, you can add/remove that CSS class. Under the covers, PrimeFaces uses jQuery for the ajax magic and you can for PrimeFaces <4 hook on standard jQuery ajaxStart and ajaxStop events and for PrimeFaces 4+ hook on PrimeFaces specific pfAjaxSend and pfAjaxComplete events to perform the add/remove of that CSS class.

CSS:

html.progress, html.progress * {
    cursor: progress !important;
}

(the !important overrides any style set by style attribute and stronger CSS selectors for the case that)

jQuery and PrimeFaces:

$(document).on("ajaxStart pfAjaxSend", function() {
    $("html").addClass("progress");
}).on("ajaxStop pfAjaxComplete", function() {
    $("html").removeClass("progress");
});

For the case you're also using standard JSF <f:ajax> elsewhere and would like to have the same progress indicator, here's how you can do that:

jsf.ajax.addOnEvent(function(data) {
    $("html").toggleClass("progress", data.status == "begin");
});

This is also used by OmniFaces showcase application. You can see it among others when you run the poll at this page.

Answer 2

Primefaces by itself doesn't look like it does that. It has some components that allow you to visualize when its working (AjaxStatus, BlockUI), but it doesn't look like it does anything with the cursor.

You'd have to directly use Javascript to do that. This looks like a nice option.

change cursor to busy while page is loading