7

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

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Tiny
  • 27,221
  • 105
  • 339
  • 599
  • i have one problem like yours, basically exists one page with one button and this button have one link to page 2. How to lock the page 1 during the load time for page 2? i create this question http://stackoverflow.com/q/26304582/3703397 – Marin Oct 10 '14 at 17:24

1 Answers1

20

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"/>
VulfCompressor
  • 1,390
  • 1
  • 11
  • 26
  • 3
    Oh yes! I forgot to prefix `:` before the `id` in the target attribute of ``, indeed, sorry. It should have been `target=":body"`. Thanks. – Tiny Nov 28 '13 at 14:25
  • i have one problem like yours, basically exists one page with one button and this button have one link to page 2. How to lock the page 1 during the load time for page 2? – Marin Oct 10 '14 at 17:22