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.