Welcome to tutel.me

[SOLVED] p:commandbutton action doesn't work inside p:dialog

By hellzone

2013-09-23 12:01:03 8 Comments

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 comments

@Reza Abazari 2019-12-05 06:39:33

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

@Kukeltje 2019-12-05 06:52:19

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

@BalusC 2013-09-23 12:09:43

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:

@hellzone 2013-09-23 12:29:55

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 2013-09-23 13:03:47

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).

@amphibient 2015-07-10 22:19:31

@Tim 2016-08-26 10:24:04

@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

@AshutoshDeora 2015-07-14 06:56:02

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

@Kukeltje 2019-12-05 08:19:20

Answer was enhanced

@DarwinFernandez 2014-01-14 15:34:31

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

@BalusC 2015-06-01 17:28:04

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

@hamza-don 2015-06-01 17:30:59

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

Related Questions

Sponsored Content

12 Answered Questions

1 Answered Questions

[SOLVED] p:commandButton doesn't dislpay p:dialog

  • 2019-05-23 12:52:45
  • K.Sorokin
  • 50 View
  • 1 Score
  • 1 Answer
  • Tags:   jsf primefaces

2 Answered Questions

[SOLVED] p:commandButton action not working in p:confirmDialog

1 Answered Questions

[SOLVED] p:selectOneMenu in p:panel no load correct after save

1 Answered Questions

[SOLVED] p:fileUpload doesn't work inside p:dialog

2 Answered Questions

2 Answered Questions

[SOLVED] p:commandButton inside p:dialog does not work

  • 2015-01-08 11:51:45
  • Eduardo Santos
  • 218 View
  • 0 Score
  • 2 Answer
  • Tags:   jsf primefaces

Sponsored Content