Change mouse cursor to busy mode when PrimeFaces ajax request is in progress
ajax, jsf, mouse-cursor, primefaces, progress-indicator
Solution
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");
});
Problem
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.