Blocking page pieces during long-running AJAX calls

The BlockUI component allows us to block any piece(s) of a page during AJAX calls. Blocking is initiated by one or more trigger components. BlockUI adds a layer and any custom content over the target elements to be blocked and gives the appearance and behavior of blocking user interaction. It's very handy if you have, for example, a large data table, and sorting, filtering, pagination takes much time. You can block almost everything, even the entire page.

In this recipe, we will implement blockable p:panel and p:dataTable in order to learn all the features of p:blockUI.

How to do it...

The panel component in the following code snippet gets blocked when the command button is clicked and unblocked when the AJAX response is received. We will see a semi-transparent layer over the panel, which blocks user interactions within it. The action listener on the command button simulates a long-running task.

<p:panel id="panel" header="Blockable Panel...