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.
3 Answers
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");
});
-
I do no believe that the second link given at the bottom is still working correctly. Has it been moved? Jul 13, 2022 at 14:57
-
1Yes, it has moved into standard JSF in flavor of
<h:commandScript>
. I'll clean up the links.– BalusCJul 13, 2022 at 18:49
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?
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.
-
I see.. Hope it will be added to its components soon.. Thanks for your reply anyway :)– DavidApr 2, 2013 at 9:24