How to target entire JSF page to be blocked by p:blockUI / pe:blockUI?

Tiny picture Tiny · Nov 25, 2013 · Viewed 12.1k times · Source

The example demonstrates blocking of <h:form> by <pe:blockUI>.

<h:form id="form" prependId="true">
    <pe:blockUI target="form" widgetVar="blockBodyUIWidget">
        <h:panelGrid columns="2">
            <h:graphicImage library="default" name="images/ajax-loader1.gif" class="block-ui-image"/>
            <h:outputText value="#{messages['blockui.panel.message']}" class="block-ui-text"/>
        </h:panelGrid>
    </pe:blockUI>

<p:commandButton id="btnSubmit" 
                 onstart="PF('blockBodyUIWidget').block()" 
                 oncomplete="PF('blockBodyUIWidget').unblock();}" 
                 update=":form:dataGrid" actionListener="#{bean.listener}" 
                 icon="ui-icon-check" 
                 value="Save">
</h:form>

This blocks <h:form> but there is a template with a header and a left side bar which are not blocked by doing so.

I have tried to block <h:body id="body"> <pe:blockUI target="body"... on the template page but that didn't work ending with an exception indicating, "Cannot find component with the id body in the view."

So, how to target the entire page?

Although I'm using <pe:blockUI> of PrimeFaces extension, the same thing can be demonstrated by <p:blockUI> of PrimeFaces

Answer

VulfCompressor picture VulfCompressor · Nov 28, 2013

Give an id to your body and then reference it on the block argument of the <p:blockUI> component.

Example:

<h:body id="entirePage"/>

and

<p:blockUI id="blockUI" widgetVar="blockBodyUIWidget" block=":entirePage"/>