Search code examples
jsfprimefacesdialogblockui

How to Block UI based on method value


I need your help in blocking the form based on the returned value from the method UpdateDatatable that will return "Yes", if commandButton "Print" is fired. If it is fired, I need to block the UI on the close of the dialog, otherwise not to block it. Currently my code is and it is blocking each time, I am closing the Dialog:

<p:dialog id="ss" header="SSS" widgetVar="ss" modal="true" showEffect="fade"
        hideEffect="fade" resizable="false" >
    <p:ajax event="close" listener="#{hrd.UpdateDatatable}"/>
    <p:blockUI trigger="ss" block=":Requests">
        <p:graphicImage width="50" value="/resources/images/ajax.gif">
        </p:graphicImage>
    </p:blockUI>
<<p:commandButton value="Print" id="Print" actionListener="#{hrd.updatePrint}"/>
</p:dialog>

Solution

  • Remove the trigger and add widgetVar to the p:blockUI component to be able to trigger it directly.

    <p:blockUI block=":Requests" widgetVar="blockUIVar">
    

    Have your print button set a global js variable.

    <p:commandButton value="Print" id="Print" actionListener="#{hrd.updatePrint}"
        onclick="window.printClicked = true;"/>
    

    Check the variable state and trigger UI block if necessary at the start of the close request. Reset variable state in case the dialog could be reopened.

    <p:ajax event="close" listener="#{hrd.UpdateDatatable}"
        onstart="if (window.printClicked) { PF('blockUIVar').show(); window.printClicked = false; }"/>