3

I have a PrimeFaces dialog, that has two command buttons that executes some code in the backing bean. I want to block the dialog within the action.

I managed to do it using blockUI, but when the blockUI is present, and I open the dialog, it appears at the bottom of the page.

If I remove the blockUI component, the dialog opens at the center of the page, as I want. But I want it to be centered and with the blockUI.

        <p:dialog header="Attention" id="dialog" position="center"
            widgetVar="dialog" modal="true" closable="false"
            dynamic="true" closeOnEscape="false">

        <div class="internal-margin-top">

                <h:outputText value="Location" styleClass="ui-outputtext" />
                <p:inputText value="#{activityBean.location}"
                    id="inputLocation" maxlength="15">
                </p:inputText>

            </div>
            <div class="internal-margin-bottom">
                <p:commandButton id="closureYes" value="Yes"
                    styleClass="btn-green"
                    onstart="PF('block').show();"
                    oncomplete="PF('dialog').hide(); PF('block').hide();"
                    action="#{activityBean.processItem()}" process="@all">
                </p:commandButton>
                <p:commandButton id="closureNo" value="No"
                    styleClass="btn-red"
                    onstart="PF('block').show();"
                    oncomplete="PF('dialog').hide(); PF('block').hide();"
                    action="#{activityBean.processActivity()}" process="@all" />
            </div>
        </p:dialog>

            <p:blockUI block="scrapDialog" widgetVar="block">
                <p:graphicImage library="images" name="loading_bar.gif" />
            </p:blockUI>

Thanks in advance.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
adutra
  • 360
  • 5
  • 15
  • `` [oh please no](http://stackoverflow.com/questions/11988415/what-is-the-jsf-resource-library-for-and-how-should-it-be-used). – BalusC Jul 07 '15 at 19:26
  • Thanks for the editing and the tip of graphicImage, I will take it into account. But I think my problem doesn´t reside there, thanks. – adutra Jul 07 '15 at 19:35
  • Nope. It was just a comment, not an answer. – BalusC Jul 07 '15 at 19:37
  • ok, thanks. do you have any clue on the problem itself? – adutra Jul 07 '15 at 19:40
  • Can't answer off top of head as I never really used p:blockUI and thus don't know its internal workings. So I'd basically have to copy'n'paste'n'run and debug/observe myself first. – BalusC Jul 07 '15 at 19:46
  • try using an appendTo="@body" on the dialog. Not sure it helps, just a try. I did use p:blockUI, just never in combination with a modal dialog – Kukeltje Jul 07 '15 at 20:57

1 Answers1

3

Example with a centered modal dialog:

    <p:dialog header="Header" position="center" widgetVar="wv_dialog" modal="true" closable="false" dynamic="true" closeOnEscape="false">
        <h:form id="dialogform">
            <p:panelGrid columns="1">
                <p:inputText value="test"/>
                <p:inputText value="test"/>
                <p:inputText value="test"/>
                <p:inputText value="test"/>
            </p:panelGrid>
            <p:commandButton id="closebutton" 
                value="Close"
                oncomplete="PF('wv_dialog').hide();"
                action="#{testBean.actionTest()}"
                process="@form"/>
            <p:blockUI block="dialogform" trigger="closebutton"/>
        </h:form>
    </p:dialog>
Tomek
  • 494
  • 2
  • 11
  • ok, I solved it, I was using the form outside the dialog, because there were more inputs than the one in the dialog. Thanks for the answer – adutra Jul 08 '15 at 19:47
  • 1
    You inverted dialog id with form id in the `block` attribute of ` – vortex.alex Sep 15 '17 at 11:58