Primefaces confirmDialog doesn't show inside p:tabView

Question

I'm currently integrating p:confirmDialog in our custom primefaces / jsf ui components. But when using the p:confirmDialog in this hierarchy it failed:

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

On other forms it succeeded:

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

Notice one of the most obvious difference is where h:form is defined, and the confirmDialog being inside the tabView (failed).

Here's how I defined the 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>

On the second example, the browser successfully sent the request and got the response, but it got stuck with the gray modal screen.

Here's the partial response I got:

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

Any idea?

score 0 · Accepted Answer · answered Jul 18 '15 at 05:38

This is how I resolved my problem, notice that all buttons are ajax based. To navigate from the confirmDialog to another page, I need to create a button that triggers a remoteCommand, the remoteCommand calls a backingBean action that returns a string navigation defined in 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 doesn't show inside p:tabView

1 Answers1