9

I have a p:dialog and there is a panel inside it. The problem is "Save" button's action method is not working. It doesn't even calls the method. I can reach the method def. with ctrl+lm so there is no problem with method name.

<h:body>
    <h:form id="createAppUserForm" prependId="false">
      ....
      <p:dialog id="newRoleDialogId"
                  header="Add New Role"
                  resizable="true"
                  draggable="true"
                  widgetVar="newRoleDetailsDialog"  
                  appendToBody="true"
                  >
            <p:panel id="newRoleDialogPanel">
                <p:panelGrid id="newRoleDialogPanelGrid" columns="2" style="width: 100%" styleClass="panelGridWithoutBorder">
                    <h:outputText value="Role Name :"/>
                    <p:inputText value="#{createAppUserController.selectedRole.name}"/>
                    <h:outputText value="Role Desc :"/>
                    <p:inputText value="#{createAppUserController.selectedRole.description}"/>
                </p:panelGrid>
                <center>
                    <p:commandButton value="Save"
                                     update="roleListDataTable newRoleDialogPanelGrid growlCreateAppUser"
                                     oncomplete="if (!args.validationFailed) newRoleDetailsDialog.hide()"                                     
                                     action="#{createAppUserController.saveNewRole()}"/>
                    <p:commandButton value="Cancel"                                         
                                     immediate="true"
                                     onclick="newRoleDetailsDialog.hide()" />
                </center>
            </p:panel>
        </p:dialog>
       </h:form>
    </h:body>
4
  • Where's the form? How did you intend to submit something without a form?
    – BalusC
    Sep 23, 2013 at 12:03
  • 1
    I think you should wrap the <p:commandButton /> tags by <p:form> tag.
    – Omar
    Sep 23, 2013 at 12:03
  • @BalusC I edited. I still don't get what is the problem. Do I need to add "process" attribute?
    – hellzone
    Sep 23, 2013 at 12:07
  • In case the appendToBody attribute is not used. Having the dialog within the form should be ok, isn't ? Jul 20, 2018 at 9:11

4 Answers 4

17

The dialog, when used with an appendToBody/appendTo="@Body" must have its own form.

<p:dialog>
    <h:form>
        ...
    </h:form>
</p:dialog>

Because, when the dialog is generated into HTML output, it's by JavaScript relocated to the end of HTML <body> which causes it to not be sitting in any form anymore. The generated HTML DOM tree ends up to look like this (use webbrowser's dev tools to see it):

<body>
    ...
    <form id="createAppUserForm">
        ...
    </form>
    ...
    <div id="newRoleDialogId" class="ui-dialog ...">
        ...
    </div>
</body>

The appendToBody="true" plays a role in here. The end of body ensures easy and best cross browser compatibility of displaying a modal dialog by JavaScript.

The same is true by the way for a p:overlayPanel with an appendTo...

But also make sure there is, before 'moving' the p:dialog, there is not a nested h:form. So prevent

<h:form>
   ...

    <p:dialog>
        <h:form>
            ...
        </h:form>
    </p:dialog>

   ...
</h:form>

Since although it ends up like

 <body>
    ...
    <form id="createAppUserForm">
        ...
    </form>
    ...
    <div id="newRoleDialogId" class="ui-dialog ...">
        <form>
           ...
        </form>
    </div>
</body>

it is initially invalid html

See also:

4
  • I removed outside form and added forms inside dialog boxes but now it gives says "UI Layout Initialization Error.The center-pane element does not exist.The center-pane is a required element". I removed <center> element but it still gives same error. Any idea?
    – hellzone
    Sep 23, 2013 at 12:29
  • That's a different problem completely unrelated to the question being asked. Just press "Ask Question" on right top to ask a question about that. Hint: it isn't talking about <center> (which is by the way deprecated since HTML 4.01 in 1998, you should never use <center> nowadays).
    – BalusC
    Sep 23, 2013 at 13:03
  • the saga continues: stackoverflow.com/questions/31350850/…
    – amphibient
    Jul 10, 2015 at 22:19
  • @BalusC is this still a problem with Primefaces 6 ? I have dialogs that don't have their own forms, but everything works as expected. I will update my code then
    – Tim
    Aug 26, 2016 at 10:24
3

Adding (process="@this") to commandButton worked for me.

1
2

try this p:remoteCommand

http://www.primefaces.org/showcase/ui/ajax/remoteCommand.xhtml

this is my example

<h:commandButton value="Aceptar" type="button" onclick="irAConf()" class="art-button">
</h:commandButton>

<p:remoteCommand name="irAConf"
action="#{configuracionBean.irAConfiguracion}"/>                
2
  • @don-kaotic: It's not a solution. It's a workaround. The underlying problem still exists.
    – BalusC
    Jun 1, 2015 at 17:28
  • 1
    @BalusC you're right, but there is no obligation to not use a workaround if there is no issues with that.
    – hamza-don
    Jun 1, 2015 at 17:30
0

The appendToBody="true" plays a role in here. This attribute have been removed from in latest version. Please look for other alternative

1
  • Answer was enhanced
    – Kukeltje
    Dec 5, 2019 at 8:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.