p:commandbutton action doesn't work inside p:dialog

Question

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>

Where's the form? How did you intend to submit something without a form? — BalusC, Sep 23 '13 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 '13 at 12:07
In case the appendToBody attribute is not used. Having the dialog within the form should be ok, isn't ? — Hassam Abdelillah, Jul 20 '18 at 09:11

score 16 · Accepted Answer · edited Jun 20 '20 at 09:12

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

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 element but it still gives same error. Any idea? — hellzone, Sep 23 '13 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 `` (which is by the way deprecated since HTML 4.01 in 1998, you should never use `` nowadays). — BalusC, Sep 23 '13 at 13:03
the saga continues: http://stackoverflow.com/questions/31350850/pdialog-form-submission-doesnt-invoke-action-method — amphibient, Jul 10 '15 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 '16 at 10:24

score 2 · Answer 2 · edited Jun 01 '15 at 13:53

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}"/>

edited Jun 01 '15 at 13:53

Alice Purcell

11,478
6
42
55

answered Jan 14 '14 at 15:34

DarwinFernandez

304
2
5

@don-kaotic: It's not a solution. It's a workaround. The underlying problem still exists. – BalusC Jun 01 '15 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 01 '15 at 17:30

score 2 · Answer 3 · answered Dec 05 '19 at 06:39

2

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

answered Dec 05 '19 at 06:39

Reza Abazari

21
2

That would have been the generic #9 in https://stackoverflow.com/questions/2118656/commandbutton-commandlink-ajax-action-listener-method-not-invoked-or-input-value and not related to a dialog at all (it might have been in a dialog but that would still have been a problem if you would have removed the surrounding dialog in the process of creating a [mcve] – Kukeltje Dec 05 '19 at 06:52

score 0 · Answer 4 · answered Jul 14 '15 at 06:56

0

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

answered Jul 14 '15 at 06:56

AshutoshDeora

1

Answer was enhanced – Kukeltje Dec 05 '19 at 08:19

p:commandbutton action doesn't work inside p:dialog

4 Answers4

See also:

Linked

Related