Primefaces confirmDialog 未显示在内部 p:tabView

Question

我目前正在将 p:confirmDialog 集成到我们的自定义 primefaces / jsf ui 组件中。但是在这个层次结构中使用 p:confirmDialog 时失败了：

p:panel
    p:tabView
        p:tab
            h:form
                p:panel
                    h:panelGroup
                        h:panelGroup
                            p:commandButton
                            p:confirmDialog

在其他表格上它成功了：

h:form      
    p:panel
        h:panelGroup
            h:panelGroup
                p:commandButton
                p:confirmDialog                 
        p:panel
            p:tabView
                p:tab

请注意，最明显的区别之一是定义了 h:form，并且 confirmDialog 在 tabView 中（失败）。

这是我定义 confirmDialog 的方式：

<p:commandButton id="saveButtonWithMessage"
            rendered="#{cc.attrs.edit and !empty(cc.attrs.backingBean.objectId) and !empty(cc.attrs.updateConfirmationMessage)}"
            value="#{messages['action.save']}" icon="ui-icon-check"
            onclick="PF('saveButtonWithMessageDialog').show();">
</p:commandButton>

<p:confirmDialog message="#{cc.attrs.updateConfirmationMessage}"
    widgetVar="saveButtonWithMessageDialog" showEffect="fade"
    hideEffect="fade">
    <p:commandButton ajax="#{cc.attrs.ajaxSubmit}"
        value="#{messages['commons.yes']}" styleClass="ui-confirmdialog-yes"
        icon="ui-icon-check" oncomplete="saveButtonWithMessageDialog.hide()"
        action="#{cc.attrs.backingBean.saveOrUpdate(cc.attrs.killConversationOnSave)}">
        <f:param name="edit" value="#{cc.attrs.edit}" />
    </p:commandButton>
    <p:commandButton value="#{messages['commons.no']}" type="button"
        styleClass="ui-confirmdialog-no" icon="ui-icon-close"
        onclick="PF('saveButtonWithMessageDialog').hide()" />
</p:confirmDialog>

在第二个例子中，浏览器成功发送请求并得到响应，但是卡在灰色模态屏幕上。

这是我得到的部分回复：

<partial-response>
    <changes>
        <update id="tabView:j_idt625"><div id="tabView:j_idt625" class="ui-messages ui-widget" aria-live="polite"></div></update>
        <update id="tabView:j_idt680"><div id="tabView:j_idt680" class="ui-messages ui-widget" aria-live="polite"></div></update>
        <update id="tabView:j_idt732"><div id="tabView:j_idt732" class="ui-messages ui-widget" aria-live="polite"></div></update>
        <update id="tabView:j_idt788"><div id="tabView:j_idt788" class="ui-messages ui-widget" aria-live="polite"></div></update>
        <update id="javax.faces.ViewState">3685613370368244617:-6252032147041871407</update>
    </changes>
</partial-response>

有什么想法吗？

Answer 1

这就是我解决问题的方法，请注意所有按钮都是基于 ajax 的。要从 confirmDialog 导航到另一个页面，我需要创建一个触发 remoteCommand 的按钮，remoteCommand 调用一个 backingBean 操作，returns faces-config.xml.

中定义的字符串导航

<!-- Update with message -->
<p:remoteCommand id="remoteUpdateWithMessageButton"
    action="#{backingBean.action}"
    name="updateWithMessage" oncomplete="handleUpdateWithMessageComplete(xhr,status,args)" />
<p:commandButton id="saveButtonWithMessage"
    rendered="#{trueOrFalse}"
    value="Save" icon="ui-icon-check"
    oncomplete="PF('saveButtonWithMessageDialog').show()">
</p:commandButton>
<!-- Update the message handling when  -->
<p:confirmDialog id="confirmUpdateWithMessage" appendTo="@(body)"
    widgetVar="saveButtonWithMessageDialog" showEffect="fade"
    hideEffect="fade" severity="alert"
    message="#{(cc.attrs.updateConfirmationMessage eq '') ? messages['confirmationMessage.confirmUpdate'] : cc.attrs.updateConfirmationMessage}">
    <p:commandButton id="updateOk" value="yes"
        styleClass="ui-confirmdialog-yes" icon="ui-icon-check"
        oncomplete="updateWithMessage()"
        onclick="PF('saveButtonWithMessageDialog').hide()">
    </p:commandButton>
    <p:commandButton id="updateKO" value="#{messages['commons.no']}"
        type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"
        onclick="PF('saveButtonWithMessageDialog').hide()" />
</p:confirmDialog>
<!-- Update with message -->

<script type="text/javascript">
//<![CDATA[
    function handleUpdateWithMessageComplete(xhr, status, args) {
        var result = args.result;
        if(typeof(result)!="undefined" && !result){
            PF('confirmCannotUpdateWithMessageDialog').show();
        }
    }
//]]>
</script>

Primefaces confirmDialog 未显示在内部 p:tabView

Primefaces confirmDialog doesn't show inside p:tabView

xhtml

jsf

primefaces

jsf-2