Bom dia
Estou com um p:dialog, e quando coloco o modal=true, a pagina inteira fica travada.
Vi algumas postagens aqui mais não funcionou.
Alguem pode ajudar?
J.Edilson
Modal = true em p:dialog em composition
16 Respostas
Posta o código?
Qual a versão do JSF e do PrimeFaces?
Segue:
<?xml version="1.0" encoding="UTF-8" ?><ui:composition
xmlns=“http://www.w3.org/1999/xhtml"
xmlns:ui=“http://java.sun.com/jsf/facelets"
template=”/templates/modelo01.xhtml”>
<ui:define name="menu1">
<ui:include src="/includes/menuSecundario.xhtml" />
</ui:define>
<ui:define name="conteudo1">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MAPA - Empresas</title>
</h:head>
<h:body>
<p:growl id="mensagem" />
<h:form id="formlistagem" >
<p:panel header="Cadastro de Empresas">
<p:dataTable id="tabela" emptyMessage="Nenhum registro encontrado."
paginator="true" value="#{empresaBean.empresasLst}" var="grpEmpresa">
<f:facet name="header">
<p:commandButton value="Novo" oncomplete="PF('dlgGravEmpresa').show();"
actionListener="#{empresaBean.novo()}" />
<p:commandButton value="Voltar" actionListener="#{empresaBean.vaiParaInicio}" ajax="false"/>
</f:facet>
<!-- Campos de tabela - todos com possibilidae de filtro -->
<p:column headerText="Filial" sortBy="#{grpEmpresa.filial}"
filterBy="#{grpEmpresa.filial}">
<h:outputText value="#{grpEmpresa.filial}" />
</p:column>
<p:column headerText="Descrição" sortBy="#{grpEmpresa.descricao}"
filterBy="#{grpEmpresa.descricao}">
<h:outputText value="#{grpEmpresa.descricao}" />
</p:column>
<p:column headerText="C.E.I." sortBy="#{grpEmpresa.cei}"
filterBy="#{grpEmpresa.cei}">
<h:outputText value="#{grpEmpresa.cei}" />
</p:column>
<p:column headerText="C.N.P.J." sortBy="#{grpEmpresa.cnpj}"
filterBy="#{grpEmpresa.cnpj}">
<h:outputText value="#{grpEmpresa.cnpj}" />
</p:column>
<p:column headerText="Opções">
<p:commandButton icon="ui-icon-trash" actionListener="#{empresaBean.excluir}"
update=":mensagem :formlistagem:tabela">
<p:confirm header="Confirmação" message="Deseja Excluir a Empresa?"
icon="ui-icon-alert" />
<f:attribute name="empresaSelecionada" value="#{grpEmpresa}" />
</p:commandButton>
<p:commandButton icon="ui-icon-newwin"
actionListener="#{empresaBean.editar}"
update=":formDialogo:painelGrupo"
oncomplete="PF('dlgGravEmpresa').show();" >
<f:attribute name="empresaSelecionadaedt" value="#{grpEmpresa}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:confirmDialog global="true">
<p:commandButton value="Sim" type="button"
styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Não" type="button"
styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</p:panel>
</h:form>
<p:dialog header="Empresas - Cadastro" widgetVar="dlgGravEmpresa"
appendToBody="true">
<h:form id="formDialogo">
<h:panelGrid id="painelGrupo" columns="2">
<p:outputLabel value="Filial.:"/>
<p:inputText maxlength="02" size="02" value="#{empresaBean.empresaEt.filial}" />
<p:outputLabel value="Descrição.:"/>
<p:inputText maxlength="40" size="40" value="#{empresaBean.empresaEt.descricao}"/>
<p:outputLabel value="C.E.I.:"/>
<p:inputText maxlength="15" size="17" value="#{empresaBean.empresaEt.cei}"/>
<p:outputLabel value="C.N.P.J.:"/>
<p:inputText maxlength="40" size="40" value="#{empresaBean.empresaEt.cnpj}"/>
<p:outputLabel value="Ativo:" />
<p:selectBooleanCheckbox value="#{empresaBean.empresaEt.ativo}" />
</h:panelGrid>
<h:panelGrid columns="2">
<p:commandButton value="Salvar"
actionListener="#{empresaBean.salvar}"
update=":mensagem :formDialogo:painelGrupo :formlistagem:tabela "
oncomplete="PF('dlgGravEmpresa').hide();" />
<p:commandButton value="Fechar"
actionListener="#{empresaBean.limpar}"
oncomplete="PF('dlgGravEmpresa').hide();"
update=":mensagem :formDialogo:painelGrupo" />
</h:panelGrid>
</h:form>
</p:dialog>
</h:body>
</html>
</ui:define>
<ui:define name="rodape">
<ui:include src="/includes/rodape.xhtml" />
</ui:define>
</ui:composition>
Como você esta usando composition, remove o h:body, h:head e html, pq não faz sentido você “Injeta-los” no meio da página, testa ai e me diz se deu certo 
EDIT:
Exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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" >
<ui:composition template="/template/template.xhtml">
<ui:define name="...">
</ui:define>
</ui:composition>
Ficou assim:
Mesmo erro…
<ui:define name="menu1">
<ui:include src="/includes/menuSecundario.xhtml" />
</ui:define>
<ui:define name="conteudo1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MAPA - Empresas</title>
<p:growl id="mensagem" />
<h:form id="formlistagem" >
<p:panel header="Cadastro de Empresas">
<p:dataTable id="tabela" emptyMessage="Nenhum registro encontrado."
paginator="true" value="#{empresaBean.empresasLst}" var="grpEmpresa">
<f:facet name="header">
<p:commandButton value="Novo" oncomplete="PF('dlgGravEmpresa').show();"
actionListener="#{empresaBean.novo()}" />
<p:commandButton value="Voltar" actionListener="#{empresaBean.vaiParaInicio}" ajax="false"/>
</f:facet>
<!-- Campos de tabela - todos com possibilidae de filtro -->
<p:column headerText="Filial" sortBy="#{grpEmpresa.filial}"
filterBy="#{grpEmpresa.filial}">
<h:outputText value="#{grpEmpresa.filial}" />
</p:column>
<p:column headerText="Descrição" sortBy="#{grpEmpresa.descricao}"
filterBy="#{grpEmpresa.descricao}">
<h:outputText value="#{grpEmpresa.descricao}" />
</p:column>
<p:column headerText="C.E.I." sortBy="#{grpEmpresa.cei}"
filterBy="#{grpEmpresa.cei}">
<h:outputText value="#{grpEmpresa.cei}" />
</p:column>
<p:column headerText="C.N.P.J." sortBy="#{grpEmpresa.cnpj}"
filterBy="#{grpEmpresa.cnpj}">
<h:outputText value="#{grpEmpresa.cnpj}" />
</p:column>
<p:column headerText="Opções">
<p:commandButton icon="ui-icon-trash" actionListener="#{empresaBean.excluir}"
update=":mensagem :formlistagem:tabela">
<p:confirm header="Confirmação" message="Deseja Excluir a Empresa?"
icon="ui-icon-alert" />
<f:attribute name="empresaSelecionada" value="#{grpEmpresa}" />
</p:commandButton>
<p:commandButton icon="ui-icon-newwin"
actionListener="#{empresaBean.editar}"
update=":formDialogo:painelGrupo"
oncomplete="PF('dlgGravEmpresa').show();" >
<f:attribute name="empresaSelecionadaedt" value="#{grpEmpresa}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:confirmDialog global="true">
<p:commandButton value="Sim" type="button"
styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Não" type="button"
styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</p:panel>
</h:form>
<p:dialog header="Empresas - Cadastro" widgetVar="dlgGravEmpresa"
modal="true">
<h:form id="formDialogo">
<h:panelGrid id="painelGrupo" columns="2">
<p:outputLabel value="Filial.:"/>
<p:inputText maxlength="02" size="02" value="#{empresaBean.empresaEt.filial}" />
<p:outputLabel value="Descrição.:"/>
<p:inputText maxlength="40" size="40" value="#{empresaBean.empresaEt.descricao}"/>
<p:outputLabel value="C.E.I.:"/>
<p:inputText maxlength="15" size="17" value="#{empresaBean.empresaEt.cei}"/>
<p:outputLabel value="C.N.P.J.:"/>
<p:inputText maxlength="40" size="40" value="#{empresaBean.empresaEt.cnpj}"/>
<p:outputLabel value="Ativo:" />
<p:selectBooleanCheckbox value="#{empresaBean.empresaEt.ativo}" />
</h:panelGrid>
<h:panelGrid columns="2">
<p:commandButton value="Salvar"
actionListener="#{empresaBean.salvar}"
update=":mensagem :formDialogo:painelGrupo :formlistagem:tabela "
oncomplete="PF('dlgGravEmpresa').hide();" />
<p:commandButton value="Fechar"
actionListener="#{empresaBean.limpar}"
oncomplete="PF('dlgGravEmpresa').hide();"
update=":mensagem :formDialogo:painelGrupo" />
</h:panelGrid>
</h:form>
</p:dialog>
</ui:define>
<ui:define name="rodape">
<ui:include src="/includes/rodape.xhtml" />
</ui:define>
</ui:composition>
Usando o seu com exemplo… ficou assim:
Mais continua o erro…
<ui:composition template="/templates/modelo01.xhtml">
<ui:define name="menu1">
<ui:include src="/includes/menuSecundario.xhtml" />
</ui:define>
<ui:define name="conteudo1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MAPA - Empresas</title>
<p:growl id="mensagem" />
<h:form id="formlistagem" >
<p:panel header="Cadastro de Empresas">
<p:dataTable id="tabela" emptyMessage="Nenhum registro encontrado."
paginator="true" value="#{empresaBean.empresasLst}" var="grpEmpresa">
<f:facet name="header">
<p:commandButton value="Novo" oncomplete="PF('dlgGravEmpresa').show();"
actionListener="#{empresaBean.novo()}" />
<p:commandButton value="Voltar" actionListener="#{empresaBean.vaiParaInicio}" ajax="false"/>
</f:facet>
<!-- Campos de tabela - todos com possibilidae de filtro -->
<p:column headerText="Filial" sortBy="#{grpEmpresa.filial}"
filterBy="#{grpEmpresa.filial}">
<h:outputText value="#{grpEmpresa.filial}" />
</p:column>
<p:column headerText="Descrição" sortBy="#{grpEmpresa.descricao}"
filterBy="#{grpEmpresa.descricao}">
<h:outputText value="#{grpEmpresa.descricao}" />
</p:column>
<p:column headerText="C.E.I." sortBy="#{grpEmpresa.cei}"
filterBy="#{grpEmpresa.cei}">
<h:outputText value="#{grpEmpresa.cei}" />
</p:column>
<p:column headerText="C.N.P.J." sortBy="#{grpEmpresa.cnpj}"
filterBy="#{grpEmpresa.cnpj}">
<h:outputText value="#{grpEmpresa.cnpj}" />
</p:column>
<p:column headerText="Opções">
<p:commandButton icon="ui-icon-trash" actionListener="#{empresaBean.excluir}"
update=":mensagem :formlistagem:tabela">
<p:confirm header="Confirmação" message="Deseja Excluir a Empresa?"
icon="ui-icon-alert" />
<f:attribute name="empresaSelecionada" value="#{grpEmpresa}" />
</p:commandButton>
<p:commandButton icon="ui-icon-newwin"
actionListener="#{empresaBean.editar}"
update=":formDialogo:painelGrupo"
oncomplete="PF('dlgGravEmpresa').show();" >
<f:attribute name="empresaSelecionadaedt" value="#{grpEmpresa}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:confirmDialog global="true">
<p:commandButton value="Sim" type="button"
styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Não" type="button"
styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</p:panel>
</h:form>
<p:dialog header="Empresas - Cadastro" widgetVar="dlgGravEmpresa"
modal="true">
<h:form id="formDialogo">
<h:panelGrid id="painelGrupo" columns="2">
<p:outputLabel value="Filial.:"/>
<p:inputText maxlength="02" size="02" value="#{empresaBean.empresaEt.filial}" />
<p:outputLabel value="Descrição.:"/>
<p:inputText maxlength="40" size="40" value="#{empresaBean.empresaEt.descricao}"/>
<p:outputLabel value="C.E.I.:"/>
<p:inputText maxlength="15" size="17" value="#{empresaBean.empresaEt.cei}"/>
<p:outputLabel value="C.N.P.J.:"/>
<p:inputText maxlength="40" size="40" value="#{empresaBean.empresaEt.cnpj}"/>
<p:outputLabel value="Ativo:" />
<p:selectBooleanCheckbox value="#{empresaBean.empresaEt.ativo}" />
</h:panelGrid>
<h:panelGrid columns="2">
<p:commandButton value="Salvar"
actionListener="#{empresaBean.salvar}"
update=":mensagem :formDialogo:painelGrupo :formlistagem:tabela "
oncomplete="PF('dlgGravEmpresa').hide();" />
<p:commandButton value="Fechar"
actionListener="#{empresaBean.limpar}"
oncomplete="PF('dlgGravEmpresa').hide();"
update=":mensagem :formDialogo:painelGrupo" />
</h:panelGrid>
</h:form>
</p:dialog>
</ui:define>
<ui:define name="rodape">
<ui:include src="/includes/rodape.xhtml" />
</ui:define>
</ui:composition>
Quando você fecha o dialog, o fundo “modal” continua? é isso?
troca de oncomplete para onsuccess e faz o teste
O oncomplete executa depois do update e o onsuccess executa antes, ai dependendo da sua lógica isso pode estar afetando
Não…
-
Quando eu aciono o botão para chamar a DIALOG, toda a tela da página fica “escurecida”, e eu não tenho acessoa a "licar em nda. Como se estivesse inibido(apenas visualização).
-
Mudei para: onsuccess, como vc sugeriu, mais continua da mesma forma…
-
vc tem algum que esteja funcionando?
por favor, poste, que comparo com o meu.
Tenta o seguinte:
Se o seu botão não tem que processar nada na página além dele mesmo, então coloca process="@this", isso vai fazer com que apenas este botão seja processado pelo servidor.
Quando uma requisição ocorre, toda a página é processada, inclusive os botões, fazendo com que o processo seja mais demorado
<p:commandButton value="Novo" oncomplete="PF('dlgGravEmpresa').show();"
actionListener="#{empresaBean.novo()}" process="@this" />
Mesmo jeito…
Mike, mesma coisa!
Você pode postar a classe de template e o método novo?
Mas continua colocando o process="@this" que é importante
Template:
<?xml version="1.0" encoding="ISO-8859-1" ?> MAPA</h:head>
<h:body>
<p:growl id="msgGlobal" life="3000" />
<p:layout fullPage="true">
<p:layoutUnit position="north">
<ui:insert name="menu1" />
</p:layoutUnit>
<p:layoutUnit position="south">
<ui:insert name="rodape" />
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="conteudo1" />
</p:layoutUnit>
</p:layout>
</h:body>
Novo:
public void novo() {
empresaEt = new EmpresaEt();
listar();
}
Depois de orgenizar a pagina com as suas orientações…
Coloquei:
appendTo="@(body)
FUNCIONOU…
Obrigado mesmo…
Qual versão do PF você esta usando?
6
Criado 11 de dezembro de 2018
Ultima resposta 11 de dez. de 2018
Respostas 16
Participantes 2
Alura POO: o que é programação orientada a objetos? Aprenda os conceitos básicos da programação orientada a objetos, como classes, objetos, herança, encapsulamento e polimorfismo, com exemplos.
Casa do Codigo Desbravando SOLID: Praticas avancadas para codigos de... Por Alexandre Aquiles — Casa do Codigo