Dialog over other dialog in primefaces

Question

Initially, sorry for my English. Well, I have dialogs in my application that work individually very well each of them, but when I need one dialog to call another, I have problems closing this second dialog opened on top of the first one. I am creating them by the java API from the primefaces. What would solve this problem?

EDIT: Right, I call my first dialog here:

<h:outputLabel value="#{bundle.CreateProfissionalLabel_idRegraComissao}" />
<h:panelGroup>
      <h:inputText readonly="true" value="#{profissionalController.selected.idRegraComissao.descricao}" id="nomeRegraComissao"/>
      <p:commandButton value="#{bundle.Pesquisar}" action="#{searchRegraComissaoController.abrirDialogo()}" process="@this" update="@none">
            <p:ajax event="dialogReturn" listener="#{profissionalController.regraComissaoSelecionada}" process="@this" update="nomeRegraComissao"/>
      </p:commandButton>
</h:panelGroup>

My openDialog method (searchRegraComissaoController.abrirDialogo()) for the first dialog is:

public void abrirDialogo() {
    Map<String, Object> opcoes = new HashMap<>();
    opcoes.put("modal", true);
    opcoes.put("resizable", false);
    opcoes.put("contentHeight", 470);               
    RequestContext.getCurrentInstance().openDialog("/webapp/lovs/SearchRegraComissao", opcoes, null);
}

Now I have an xhtml file (/webapp/lovs/SearchRegraComissao.xhtml) that is rendered in this first dialog and is responsible for opening the second. Here's how it does it:

<p:outputLabel value="#{bundle.CreateRegraComissaoLabel_idClinica}" />
 <p:panel>
     <h:inputText readonly="true" value="#{searchRegraComissaoController.filtro.clinica.nome}" id="nomeClinica"/>
     <p:commandButton value="#{bundle.Pesquisar}" actionListener="#{searchClinicaController.abrirDialogo()}" process="@this" update="@none">
          <p:ajax event="dialogReturn" listener="#{searchRegraComissaoController.clinicaSelecionada}" process="@this" update="nomeClinica"/>
     </p:commandButton> 
 </p:panel>

Right Here, it also has the method that opens this second dialog:

public void abrirDialogo() {
    Map<String, Object> opcoes = new HashMap<>();
    opcoes.put("modal", true);
    opcoes.put("resizable", false);
    opcoes.put("contentHeight", 450);        
    RequestContext.getCurrentInstance().openDialog("/webapp/lovs/SearchClinica", opcoes, null);
}

Well, So far, everything works fine, the problem is in the next step. Now I have the method that should close the second dialog. This method is called after the user select one row into dataTable in the second dialog:

<p:column headerText="#{bundle.Acao}">
     <p:commandButton value="#{bundle.Escolher}" process="@this" action="#{searchClinicaController.selecionar(clinica)}"/>
</p:column>

And the final method is:

public void selecionar(Clinica clinica) {
    clinicas = new ArrayList<>();
    //todasClinicas = false;
   // isCPF = "CPF";
    //nome = "";
    RequestContext.getCurrentInstance().closeDialog(clinica);
}

The end of this method is reached without errors but the second dialog isn't closed. Anyone can help?

SOLUTION: I was reading the guide of primefaces 6 and using primefaces 5. In primefaces 5 nested dialogs aren't supported. I just updated my version to 6 and now is working fine.

[Please add a minimal, complete, and verifiable example](https://stackoverflow.com/help/mcve) — Scary Wombat, Mar 22 '17 at 02:12
What is this clinica parameter you try to close? That don't look right to me — Jaqen H'ghar, Mar 22 '17 at 07:43
It's an object that is passed by parameter when the user select a row into datatable. I think that closeDialog(clinica) will return clinica to ajax event "dialog return" in the third code shown above. — Matheus Andrade, Mar 22 '17 at 11:33

score 0 · Answer 1 · answered Nov 22 '17 at 15:17

I had the same problem today with primefaces 5.2. I solved by adding a form and config modal="true" and appendTo="@(body)" in the second dialog. Follows example:

main.xhtml

<h:body>
    <h:form id="frmMain">
        <p:commandButton value="Open" 
                         process="@this" update="frmMain:dialog1"
                         oncomplete="PF('wdgDialog1').show()">
        </p:commandButton>
        <p:dialog id="dialog1" header="Dialog 1"
                  dynamic="true" modal="true"
                  widgetVar="wdgDialog1" >
            <ui:include src="/dialog/dialog2.xhtml" />
        </p:dialog>
    </h:form>   
</h:body>

dialog2.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">
    <p:dialog id="dialog2" header="Dialog 2"
              modal="true" appendTo="@(body)"
              widgetVar="wdgDialog" >
        <h:form id="frmDialog">
            <p:panel>                
                <p:commandButton value="Test"/>
            </p:panel>
        </h:form>
    </p:dialog>             
</ui:composition>

Not working for me (PF 5.3). More here: https://stackoverflow.com/questions/56548771/overlay-modal-pdialog-with-another-modal-pdialog — JackTheKnife, Jun 11 '19 at 20:41

Dialog over other dialog in primefaces

1 Answers1