Primefaces: If closing Dialog, background is deactivated with modal=true

Question

I am using modal= true and appendToBody=true in my Dialog, it works fine in Chrome and Firefox but not in IE8. The Dialog shows up, but if I close the Dialog the background is still blue, because of modal=true, but I have to use this.

This is my code:

  <ui:composition template="../templates/site.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:sec="http://www.springframework.org/security/tags">

    <ui:define name="content">

        <h:form id="form">

            <p:commandButton value="Button" type="button" id="myButton"
                onclick="form:testDialog.show()" />



        <p:dialog id="testDialog" widgetVar="testDialog"
            header="My Test Dialog" modal="true" appendToBody="true">
            <h:form>

                <p:fieldset legend="Dialog">
                    <p:spacer height="30" />


                </p:fieldset>
            </h:form>
        </p:dialog>
        </h:form>
    </ui:define>
</ui:composition>

EDIT:

The problem was the naming of the dialog. The ID and widgetVar can not have the same name. Related to this post

score 3 · Answer 1 · answered Feb 05 '13 at 10:05

Are you using <p:layout> in your template file?

I always get issues when I mix layouts and modal dialogs.

In my parent template, I usually define a space to put my modal dialogs using <ui:insert>:

mainTemplate:xhtml:

<h:body>
    <p:layout>
        <p:layoutUnit position="cemter">
            <ui:insert name="content"/>
        </p:layoutUnit>
    <p:layout>

    <ui:insert name="dialogs"/>
</h:body>

someXhtml.xhtml

<ui:composition template="mainTemplate.xhtml">
    <ui:define name="content">
        bla bla bla
    </ui:define>

    <ui:define name="dialogs">
        <p:dialog modal="true" appendToBody="false">
            ....
        </p:dialog>
    </ui:define>
</ui:composition>

Using that you are "manually appending" the form to the body and therefore dont need to set the append to body to true. That allows me to insert form in any xhtml pages and not worry about modal form in layouts.

And as partlov said, you need to be careful with nested forms and drop the `form:` when using a widget var — phoenix7360, Feb 05 '13 at 10:10

score 1 · Answer 2 · answered Feb 05 '13 at 09:52

1

You have nested forms here, which is not allowed in HTML. Try to close first firm immediately after button, and before dialog:

<h:form id="form">
  <p:commandButton value="Button" type="button" id="myButton"
      onclick="testDialog.show()"/>
</h:form>

<p:dialog id="testDialog" widgetVar="testDialog"
    header="My Test Dialog" modal="true" appendToBody="true">
  <h:form>
    <p:fieldset legend="Dialog">
      <p:spacer height="30" />
    </p:fieldset>
  </h:form>
</p:dialog>

I also changed form:testDialog.show() to testDialog.show(), your formulation doesn't seem to work.

answered Feb 05 '13 at 09:52

partlov

13,789
6
63
82

Now the Dialog does not show up in Google Chrome, it does work perfectly in Firefox, in IE it shows up, but there is still the problem, that onClose, the background is not clickable – Johnny2012 Feb 05 '13 at 09:57
Are you sore that you don't have any more `form` tags outside of this composition? Maybe in file where you insert this part of code? – partlov Feb 05 '13 at 10:00

Primefaces: If closing Dialog, background is deactivated with modal=true

2 Answers2

mainTemplate:xhtml:

someXhtml.xhtml