Problemas com <p:dialog modal="true"> do primefaces [Resolvido]

Front-end
#1

Boa noite a todos, tenho a seguinte situação: defini um p:dialog em minha página xhtml, para edição de fornecedores porém quando o dialog abre a função do modal bloqueia toda a página, incluindo a popup do dialog, impossibilitando de realizar qualquer operação do meu sistema e o mesmo acontece com o modal para exibir um .gif de loading. Alguém já passou por isto e sabe como resolver este problema? Porque eu preciso de usar a função modal=true do componente porém da forma que está não vai ser possível.

Segue a parte relevante do código reduzido, já que removi alguns campos do form para diminuir o código e facilitar a leitura. O meu problema se encontra nas linhas 14 e 58, que são as lnhas aonde estão definidos os dialog.

[code]<?xml version='1.0' encoding='UTF-8' ?>

<ui:composition template="/paginas/principais/principal.xhtml">	
	<ui:define name="conteudo">
		<!-- INÍCIO DA TAB DE EDIÇÃO -->
		<h:form id="pesquisar">
			<p:panel id="painelBusca" header="Buscar por" toggleable="true">		
	  			<p:dialog id="dialogo" header="Aguarde..." modal="true" widgetVar="saveDialog" closable="false" height="100" width="60" 
					resizable="false">
					<p:ajaxStatus style="width:16px;height:16px; position: center;">
						<f:facet name="start">
							<h:graphicImage value="/imagens/loading.gif" style="position: center;"/>
						</f:facet>					
					</p:ajaxStatus>
				</p:dialog>				
				<p:messages id="mensagensBusca"/>
				<h:panelGrid columns="4" cellpadding="2">
					<h:outputLabel value="Nome: "/>
					<h:outputLabel value="CPF/CNPJ: "/>
					<h:outputLabel value="Atividade: "/>
					<h:outputLabel value=""/>
					<p:inputText id="editForNome" maxlength="50" size="35" value="#{fornecedorMB.nomeArg}"/>
					<p:inputText id="editForCpfCnpj" maxlength="20" size="20" value="#{fornecedorMB.cpfCnpjArg}" converterMessage="Informe somente números no campo CPF/CNPJ!"/>
				  	<h:selectOneMenu value="#{fornecedorMB.atividade}">
						<f:selectItems value="#{atividadeMB.listaAtividades}" var="atv" noSelectionValue="Selecione" itemLabel="#{atv.descricao}" itemValue="#{atividadeMB.atividade.idAtividade}"/>
						<f:converter converterId="cvtAtividade"/>
					</h:selectOneMenu>
					<p:commandButton value="Pesquisar" image="ui-icon ui-icon-search" id="btPesquisar" actionListener="#{fornecedorMB.pesquisar}" update="listar, mensagensBusca" 
						onclick="saveDialog.show()" oncomplete="saveDialog.hide()"/>
				</h:panelGrid>										
			</p:panel><!-- /painelBusca -->
		</h:form>	
		<h:form id="listar">
				<p:dataTable id="listaFornecedores" var="fornecedor" value="#{fornecedorMB.listaFornecedores}" rendered="#{fornecedorMB.acaoPesquisar eq true}" 
				paginator="true" rows="15" >
					<f:facet name="header">
						Lista de fornecedores cadastrados
					</f:facet>
					<p:column headerText="Nome" sortBy="#{fornecedor.pessoa.nome}" filterBy="#{fornecedor.pessoa.nome}">
						<h:outputText value="#{fornecedor.pessoa.nome}"/>
					</p:column>					
					<!-- DEMAIS CAMPOS -->
			        <p:column headerText="Editar" style="width:32px">
			            <p:commandButton image="ui-icon ui-icon-pencil" action="#{fornecedorMB.editar}" onclick="editarDialog.show()">
			                <f:setPropertyActionListener value="#{fornecedor}" target="#{fornecedorMB.fornecedorSelecionado}" />
			            </p:commandButton>
			        </p:column>				         
				</p:dataTable><!-- /listaFornecedores -->
		</h:form>
		
		<h:form id="formEditar">
			<p:dialog id="editarDialog" header="Editar fornecedor" modal="false" widgetVar="editarDialog" >
				<p:messages id="mensagens" />			
				<p:outputPanel id="panelEditar">
					<p:dialog id="dialogo" header="Aguarde..." modal="true" widgetVar="loadDialog" closable="false" height="100" width="60" 
						resizable="false">
						<p:ajaxStatus style="width:16px;height:16px; position: center;">
							<f:facet name="start">
								<h:graphicImage value="/imagens/loading.gif" style="position: center;"/>
							</f:facet>					
						</p:ajaxStatus>
					</p:dialog>
					<h:panelGrid columns="4" cellpadding="2" >
						<h:outputLabel value="Nome"/>
					<!-- DEMAIS CAMPOS DO FORM -->
				</p:outputPanel><!-- /panelEditar -->
			</p:dialog><!-- /dialogEditar -->
		</h:form><!-- /formEditar -->
	</ui:define>
</ui:composition>
[/code]
1 curtida
#2

Faz o seguinte, coloca o seu dialog dentro do form que chama a funcao, assim voce nao tera execucao duplicada e nem vai ter problema com a renderizacao do componente. Isso possivelmente ja vai te ajudar. Se o erro persistir poste o resultado.

#3

Fiz o que vc recomendou andre porém não resolveu o problema, tanto os dialogs de loading continuam escondidos atrás do efeito modal como o de edição do fornecedor!

#4

Continuo com este problema alguém tem alguma solução?

#5

Estou na mesma situação que você… Descobriu?

Abraço !!!

#6

Iii continua sendo um mistério, já tentei várias soluções mas não deu em nada por enquanto. Tirei o modal, depois vou tentar criar o dialog usando o jquery mesmo, é uma solução.

#7

Ola amigo tenta por no dialog a propriedade appendToBody=“true”

Abraços

#8

éé eu já fiz essa tentativa tbm, e em algumas ocasioes até achei ter resolvido o problema, mas de fato eu devo ter algo a mais pq continua com o bug. Deve ser algo relacionado ao facelets não sei ao certo ainda! obrigado pela ajuda de qualquer forma

#9

Isso funcionou…
Já estava achando estranho, vários posts antigos relatando o problema e não haver nenhuma solução. rs…

Obrigado pela colaboração!!!

#10

Eu uso o Facelets também, inclusive com <p:layout> no meu template e no meu caso funfou com a dica do nosso amigo.
quando diz que em algumas ocasiões funcionou, quis dizer que exatamente onde usa facelets que não rolou?

abraço

#11

De fato não me lembro em que caso tive problemas ao utilizar appendToBody=“true” porém considero esta uma situação válida até porquê ela está funcionando em alguns outros casos de uso que implementei.

#12

Amigos, no meu caso funcionou porém notei que os efeitos showEffect=“fade” hideEffect=“explode” não funcionam.

#13

Estou com um problema parecido…
Quando uso o appendToBody=true não consigo executar minha action.

#14

Eu estava com o mesmo problema… Utilizei o appendToBody e a action do commandButton também parou de ser executada. Alguém mais passou por isso?

#15

Alguém conseguiu resolver esse problema sem colocar a propriedade ‘appendToBody=“true”’?

#16

Eu usei appendTo="@(body)" e não teve nenhum bug

1 curtida
#17

Somente… Achei e resolveu o meu caso

appendTo="@(body)"
3 curtidas