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.

Sequestration

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

Pillbox

I do no believe that the second link given at the bottom is still working correctly. Has it been moved? – Bagdad

Yes, it has moved into standard JSF in flavor of <h:commandScript>. I'll clean up the links. – Pillbox

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?

Ambrogino

Answer 3

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

Measures

I see.. Hope it will be added to its components soon.. Thanks for your reply anyway :) – Sequestration