p:commandButton 不显示 p:dialog答案

【问题标题】：p:commandButton doesn't dislpay p:dialogp:commandButton 不显示 p:dialog
【发布时间】：2019-05-23 12:52:45
【问题描述】：

我在单击时显示对话框有问题。这是一个明显的问题，但我无法发现错误。我已经被困在这几天了，这太疯狂了。你能帮帮我吗？

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

【问题讨论】：

有点自相矛盾...这是显而易见的，但您无法发现它...分析您的代码的作用。您在表单中有一个对话框，该对话框最初是隐藏的。您单击显示对话框的按钮，但同时将表单更新为...正确的状态，对话框最初是隐藏的。你知道这里保持对话状态服务器端。所以客户端对它的操作会丢失。
感谢两位的回答。有用：-）。感谢您的精彩解释。

标签： jsf primefaces

【解决方案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> 又被隐藏了。

有几种解决方案：

不要让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>

将onclick 替换为oncomplete，因为它在update 之后运行。

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

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

将<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。

另见：

【讨论】：

感谢两位的回答。有用：-）。感谢您的精彩解释。