CODEWITHSUNDEEP
ajaxjsfprimefacesmouse-cursorprogress-indicator
David
David

Reputation: 728

Change mouse cursor to busy mode when PrimeFaces ajax request is in progress

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.

Upvotes: 11

Views: 6533

Answers (3)

BalusC
BalusC

Reputation: 1108537

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

Upvotes: 15

Jasper de Vries
Jasper de Vries

Reputation: 20158

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?

Upvotes: 4

EdH
EdH

Reputation: 5003

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

Upvotes: 0

Related Questions