0

I have a form that contains intensive work. I want to blockUI the form from the time its rendering (initialize) to the time its done, and everything inside of it is rendered. Any idea how can I do that??. I tried different things with blockUI(p and pe) but I couldn't find a way to trigger blockUI when a form finishes its intensive work. Thanks for your help in advance.

Note: this process will happen without requiring a submit of the form. Am using the latest of Primefaces snapshot

 <ui:define name="content">
    <form id="stuff">
        <!--a lot of stuff here-->
    </form>
 </ui:define>
J S
  • 175
  • 1
  • 4
  • 14
  • If the form takes a lot of time to render it will result in bad user experience. Try using tabs or similar component to enable lazy-loading of it. – Aritz Feb 13 '13 at 21:34
  • Xtreme, the form contains a tabview and other tabs, but still I want to have the blockUI. It changes the user experience even when it flickers for a second saying "please wait". – J S Feb 13 '13 at 21:39
  • Have you tried calling block ui on page load? Just similar to that http://stackoverflow.com/a/7715381/1199132 – Aritz Feb 13 '13 at 21:57
  • Thanks Xtreme, a modified version of that worked well. – J S Feb 14 '13 at 13:58
  • So you can publish the answer here below and mark it as answered. Other users with the same problem will be able to view it. You're welcome! – Aritz Feb 14 '13 at 14:08

1 Answers1

2

This blocks the UI during form rendering.

<ui:define name="content">

    <p:blockUI block="stuff" widgetVar="blockUIWidget">
        <h:outputText value="Please wait..."/>
    </p:blockUI>

    <script type="text/javascript">
        $(document).ready(function() {
            blockUIWidget.show();
        });

        $(window).load(function() {
            blockUIWidget.hide();
        });
    </script>
    <form id="stuff">
        <!--a lot of stuff here-->
    </form>
</ui:define>
J S
  • 175
  • 1
  • 4
  • 14