Search code examples
jsf-2primefacesprimefaces-extensions

BlockUI on Form render with intensive work


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>

Solution

  • 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>