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页面中使用<h：form>？单一表格？多种形式？嵌套表格？
• p：commandbutton动作在p：dialog中不起作用