Действие p:commandbutton не работает внутри диалога p:

У меня есть a p: диалог, и внутри него есть панель. Проблема в том, что метод действия кнопки "Сохранить" не работает. Он даже не вызывает метод. Я могу добраться до метода def. ctrl+lm, поэтому нет проблем с именем метода.

<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>
Источник

3 ответа

Решение

Диалог, когда используется с appendToBody/appendTo="@Body" должен иметь свою собственную форму.

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

Потому что, когда диалог генерируется в выводе HTML, он с помощью JavaScript перемещается в конец HTML <body> что заставляет его больше не сидеть в какой-либо форме. Сгенерированное дерево HTML DOM в конечном итоге выглядит так (используйте инструменты разработчика webbrowser, чтобы увидеть его):

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

appendToBody="true" играет роль здесь. Конец тела обеспечивает простую и лучшую совместимость между браузерами при отображении модального диалога с помощью JavaScript.

То же самое относится и к p:overlayPanel с appendTo...

Но также убедитесь, что есть, прежде чем "переместить" p:dialog нет там вложенного h:form, Так предотвратить

<h:form>
   ...

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

   ...
</h:form>

Так как, хотя это заканчивается как

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

это изначально недействительный HTML

Смотрите также:

Источник

Добавление (process="@this") в commandButton сработало для меня.

Источник

Попробуйте это p: remoteCommand

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

это мой пример

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

<p:remoteCommand name="irAConf"
action="#{configuracionBean.irAConfiguracion}"/>
Источник

The appendToBody="true" играет здесь роль. Этот атрибут был удален из последней версии. Пожалуйста, ищите другую альтернативу

Источник
Другие вопросы по тегам