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

jsf primefaces dialog commandbutton

19,516

Solution 1

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

Solution 2

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

Solution 3

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

19,516

Author by

hellzone

********************----------------------------***************************

Updated on June 14, 2022

Comments

hellzone almost 2 years

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>

hellzone over 10 years

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?
BalusC over 10 years

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 almost 9 years

@don-kaotic: It's not a solution. It's a workaround. The underlying problem still exists.
hamza-don almost 9 years

@BalusC you're right, but there is no obligation to not use a workaround if there is no issues with that.
amphibient almost 9 years

the saga continues: stackoverflow.com/questions/31350850/…
Tim over 7 years

@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
Kukeltje over 4 years

That would have been the generic #9 in stackoverflow.com/questions/2118656/… 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 minimal reproducible example
Kukeltje over 4 years

Answer was enhanced