Ändern Sie den Mauszeiger in den Busy-Modus, wenn PrimeFaces Ajax Anfrage in Bearbeitung ist

Question

es ist möglich, die Form des Mauscursors in beschäftigt Modus (zum Beispiel: Sanduhr) bei der Verarbeitung Ajax-Taste in JSF (speziell Primzahlen)? Ich möchte die Form meines Cursors ändern, während meine p: dataTable Daten lädt, wenn ich zur nächsten Seite navigiere. Vielen Dank.

Answer 1

Sie können dies mit einer wenig Hilfe von CSS und jQuery erreichen. Mit CSS können Sie eine Klasse erstellen, die den Cursor auf das gesamte Dokument ändert. Mit jQuery können Sie diese CSS-Klasse hinzufügen/entfernen. Unter den Deckeln verwendet PrimeFaces jQuery für die Ajax Magie und Sie können für PrimeFaces < 4 Hook auf Standard-jQuery ajaxStart und ajaxStop Ereignisse und für PrimeFaces 4+ Hook PrimeFaces spezifischen pfAjaxSend und pfAjaxComplete Ereignisse, um das Hinzufügen/Entfernen von dieser CSS-Klasse durchzuführen.

CSS:

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

(die !important jede mögliche Art von style Attribute und stärker CSS-Selektoren für den Fall eingestellt überschreibt diese)

jQuery und PrimeFaces:

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

Für der Fall, dass Sie auch Standard JSF <f:ajax> woanders verwenden und w Ould mag, ist hier die gleiche Statusanzeige haben, wie Sie das tun können:

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

Dies auch von OmniFaces showcase application verwendet wird. Sie können es unter anderem sehen, wenn Sie die Umfrage unter this page ausführen.

Answer 2

Primefaces selbst sieht nicht so aus. Es hat einige Komponenten, mit denen Sie visualisieren können, wann es funktioniert (AjaxStatus, BlockUI), aber es sieht nicht so aus, als ob es irgendetwas mit dem Cursor macht.

Sie müssten Javascript direkt verwenden, um das zu tun. Das sieht nach einer netten Option aus.

change cursor to busy while page is loading