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

Answer 2

As always, BalusC provided a great answer. If you happen to be using the PrimeFaces p:ajaxStatus component, you can simply incorporate the JavaScript to add and remove the progress class like:

<p:ajaxStatus ...
              onstart="$('html').addClass('progress')"
              oncomplete="$('html').removeClass('progress')">
    ...
</p:ajaxStatus>

This does require you to add the following CSS:

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

If you don't know where to put the CSS (or JavaScript), please see How to reference CSS / JS / image resource in Facelets template?