Change mouse cursor to busy mode when ajax request from PrimeFaces is executed

Question

can I change the shape of the mouse cursor to busy mode (for example: hourglass) when processing the ajax button in JSF (in particular, in the form of prides)? I want to change my cursor shape while my p: dataTable loads data when I go to the next page. Thanks.

Answer 1

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

CSS

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

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

jQuery and PrimeFaces:

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

In this case, you also use the standard JSF <f:ajax> elsewhere and would like to have the same progress indicator as you can do this:

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

It is also used by the OmniFaces app . You can see this among others when you run a survey on this page .

Answer 2

The surface itself is not like what it does. It has some components that allow you to visualize when it is working (AjaxStatus, BlockUI), but it does not look like it is doing something with the cursor.

You will need to use Javascript to do this. It looks like a good option.

change cursor to busy while loading page