Theme
afterdark
afternoon
afterwork
aristo
black-tie
blitzer
bluesky
bootstrap
casablanca
cruze
cupertino
dark-hive
delta
dot-luv
eggplant
excite-bike
flick
glass-x
home
hot-sneaks
humanity
le-frog
midnight
mint-choc
omega
overcast
pepper-grinder
redmond
rocket
sam
smoothness
south-street
start
sunny
swanky-purse
trontastic
ui-darkness
ui-lightness
vader
BlockUI
BlockUI component allows to block any piece(s) of page during various Ajax calls. Blocking is initiated by a "source" component which blocks one or more "target" components. BlockUI adds a layer and any custom content over target elements to be blocked and gives the appearance and behavior of blocking user interaction. It's very handy if you have e.g. a large datatable and sorting, filtering, pagination takes much time. You can block everything, even the entire page, but keep im mind that some HTML elements as table or span can not be blocked. The best approach is to wrap them in a div (h:panelGroup with layout="block").

There are two methods how to use BlockUI. The first one utilizes widget's JavaScript API. This method is shown in the first use case. The second one utilizes jQuery global ajax callbacks. This method hooks into ajax calls automatically, so that there are no needs to call block() / unblock() explicitly. This is so-called "autoShow" mode which is demonstrated in the second use case. Keep in mind please that some PrimeFaces components and p:ajax have the "global" attribute. Setting "global" to false will not trigger BlockUI in "autoShow" mode.

BlockUI is smart enough to recognize multiply blocking of the same element by different ajax calls. Only when all ajax calls finish their work, the blocked element gets unblocked.
Components and more
Use Cases
Documentation pe:blockUI
Attributes (move mouse over the names to see data types)
Name Description
idUnique identifier of the component in a namingContainer.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.
widgetVarName of the client side widget.
cssStyles for the message when blocking. Styles should be defined as JSON object, e.g. {backgroundColor: 'fff', width: 30%}.
cssOverlayStyles for the overlay. Styles should be defined as JSON object, e.g. {opacity: 0.4, backgroundColor: 'red'}
source Specifies component(s) which send(s) an ajax request and triggers blocking. If nothing specified, the parent component is used.
target Specifies component(s) or HTML element(s) to be blocked. If the target is null or not defined, the entire page is blocked.
content Id of the component in terms of findComponent to be used as content shown during blocking. If nothing specified, the content of blockUI component is used.
event Name(s) of one or several accepted events. Several events should be defined as space or comma separated list.
autoShow Flag whether the blocking is shown automatically without the need to use JavaScript widget. Default value is false.
timeout Time in millis to wait before auto-unblocking. Don't define it or set to 0 to disable auto-unblock. Default value is 0.
centerX Set this attribute to true to have the message automatically centered along the X axis. Note: it only effects element blocking (page blocking controlled by CSS via the css attribute). Default value is true.
centerY Set this attribute to true to have the message automatically centered along the Y axis. Default value is true.
PrimeFaces Extensions Showcase - © 2011-2017, PrimeFaces: 6.1, PrimeFaces Extensions: 6.1.0, JSF: mojarra 2.2.8, Server: jetty/9.4.2.v20170220, Build time: 2017-04-19 16:13
occured!
Message:
Timestamp:
StackTrace:
Developers
Thomas Andraschko andraschko.thomas@gmail.com
Oleg Varaksin ovaraksin@googlemail.com
Nilesh Namdeo Mali nileshmali86@gmail.com
Mauricio Fenoglio fenoglio.mauricio@gmail.com
Pavol Slaný pavol.slany@gmail.com
Sudheer Jonna sudheer.jonna@gmail.com