p: commandButton не отключает диалог p:

Question

У меня проблема с отображением диалогового окна при нажатии. Это очевидно, но я не могу обнаружить ошибку. Я застрял на этом в течение нескольких дней, это безумие. Можете ли вы помочь мне, пожалуйста.

<h:form id="form">

<p:commandButton
    rendered="#{characterBean.characterSession.characterName ne null}"
    value="#{characterBean.characterSession.title.titleName}"
    icon="fa fa-fw fa-edit" onclick="PF('dlg').show();"
    update="@form"/>

<p:dialog id="titleDetail" header="#{i18n['title.yourTitles']}"
    widgetVar="dlg" dynamic="true" closable="false" resizable="false"
    showEffect="fade" hideEffect="fade">
    <h:panelGroup>
        <p:messages autoUpdate="true" />
        <h:selectOneMenu id="titleSelect" converter="#{titleConverter}"
            value="#{characterBean.characterSession.title}">
            <f:selectItems value="#{characterBean.titleUnlocked}" var="t"
                itemValue="#{t}" itemLabel="#{t.titleName}" />
        </h:selectOneMenu>
        <hr />
        <h:panelGrid columns="2" style="width: 100%; text-align:center">
            <p:commandButton value="#{i18n['general.submit']}"
                icon="fa fa-check"
                actionListener="#{characterBean.updateCharacterTitle}"
                oncomplete="PF('dlg').hide();" update="@form" />

            <p:commandButton value="#{i18n['general.cancel']}"
                icon="fa fa-close" action="#{characterBean.submitCancel}"
                oncomplete="PF('dlg').hide();" update="@form" process="@this" />
        </h:panelGrid>
        <p:remoteCommand name="updateForm()" process="@this" update="@form" />
    </h:panelGroup>
</p:dialog>

</h:form>

Answer 1

Основная проблема заключается в следующем:

<h:form>
    <p:commandButton onclick="PF('dlg').show();" update="@form"/>

    <p:dialog widgetVar="dlg">
        ...
    </p:dialog>
</h:form>

• Состояние по умолчанию <p:dialog> скрыто.
• onclick показывает диалоговое окно.
• update обновляет все содержимое <h:form>.
• <p:dialog> также включен в обновление.
• Итак, <p:dialog> снова скрывается.

Существует несколько решений:

1. Не позволяйте update включать <p:dialog>.

   <h:form>
       <h:panelGroup id="outsideDialog">
           <p:commandButton onclick="PF('dlg').show();" update="outsideDialog"/>
       </h:panelGroup>
   
       <p:dialog widgetVar="dlg">
           ...
       </p:dialog>
   </h:form>
   

2. Заменить onclick на oncomplete, так как он работает после update.

   <h:form>
       <p:commandButton update="@form" oncomplete="PF('dlg').show();" />
   
       <p:dialog widgetVar="dlg">
           ...
       </p:dialog>
   </h:form>
   

3. Переместите <p:dialog> за пределы <h:form> и задайте ему <h:form>.

   <h:form>
       <p:commandButton update="@form :dlg" oncomplete="PF('dlg').show();" />
   </h:form>
   
   <p:dialog id="dlg" widgetVar="dlg">
       <h:form>
           ...
       </h:form>
   </p:dialog>
   

   или, в зависимости от того, нужно ли вам обновить содержимое диалога или нет

   <h:form>
       <p:commandButton onclick="PF('dlg').show();" update="@form" />
   </h:form>
   
   <p:dialog widgetVar="dlg">
       <h:form>
           ...
       </h:form>
   </p:dialog>
   

Рекомендуемое решение: 3.

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

• Порядок выполнения событий при нажатии PrimeFaces p: commandButton
• Как использовать на странице JSF? Одиночная форма? Несколько форм? Вложенные формы?
• p: действие командной кнопки не работает внутри p: диалоговое окно