title: How to target entire JSF page to be blocked by p:blockUI / pe:blockUI?
body: <p>The example demonstrates blocking of <code>&lt;h:form&gt;</code> by <a href="http://fractalsoft.net/primeext-showcase-mojarra/sections/blockui/blockUIAjax.jsf" rel="noreferrer"><code>&lt;pe:blockUI&gt;</code></a>.</p>
  
  <pre><code>&lt;h:form id="form" prependId="true"&gt;
      &lt;pe:blockUI target="form" widgetVar="blockBodyUIWidget"&gt;
          &lt;h:panelGrid columns="2"&gt;
              &lt;h:graphicImage library="default" name="images/ajax-loader1.gif" class="block-ui-image"/&gt;
              &lt;h:outputText value="#{messages['blockui.panel.message']}" class="block-ui-text"/&gt;
          &lt;/h:panelGrid&gt;
      &lt;/pe:blockUI&gt;
  
  &lt;p:commandButton id="btnSubmit" 
                   onstart="PF('blockBodyUIWidget').block()" 
                   oncomplete="PF('blockBodyUIWidget').unblock();}" 
                   update=":form:dataGrid" actionListener="#{bean.listener}" 
                   icon="ui-icon-check" 
                   value="Save"&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p>This blocks <code>&lt;h:form&gt;</code> but <strong>there is a template</strong> with a header and a left side bar which are not blocked by doing so.</p>
  
  <p>I have tried to block <code>&lt;h:body id="body"&gt; &lt;pe:blockUI target="body"...</code> on the template page but that didn't work ending with an exception indicating, "<em>Cannot find component with the id body in the view.</em>"</p>
  
  <p>So, how to target the entire page? </p>
  
  <p><sub>Although I'm using <code>&lt;pe:blockUI&gt;</code> of <a href="http://primefaces-extensions.github.io/" rel="noreferrer">PrimeFaces extension</a>, the same thing can be demonstrated by <code>&lt;p:blockUI&gt;</code> of PrimeFaces</sub></p>