Fechar p:dialog após submit

Viciado · Outubro 19, 2013, 12:43pm

Olá, eu criei um p:dialog para incluir dados no banco. Após confirmar a inclusão como eu posso fechar a popup e atualizar o meu dataTable?

<h:form id="form">
			<h:panelGrid columns="1" cellpadding="5" >
				<p:commandButton id="modalDialogButton" value="Adicionar Cliente" onclick="dlg2.show();" type="button" 
						style="margin-left:155px; font-size:15px;"/>
			</h:panelGrid>
			<div style="margin-left: 200px" />
			<p:dataTable var="cliente" value="#{clienteMB.carregarCliente()}" rowKey="#{clienteMB.cliente.id}"
						paginator="true" rows="10" selection="#{clienteMB.clienteSelecionado}" 
						filteredValue="#{clienteMB.clientesFiltrados}" id="clientesTable"
						emptyMessage="Nenhum registro encontrado" 
						style="margin-left:155px; margin-right:155px; font-size:15px;">
						
				<p:ajax event="rowSelect" update=":form:display" oncomplete="PF('clienteDialog').show()" />
				
				<f:facet name="header">Lista de Clientes</f:facet>
				
				<p:column headerText="Id" sortBy="#{cliente.id}" filterBy="#{cliente.id}">
					#{cliente.id}				
				</p:column>
				<p:column headerText="Nome" sortBy="#{cliente.nome}" filterBy="#{cliente.nome}">
					#{cliente.nome}				
				</p:column>
				<p:column headerText="Fone" sortBy="#{cliente.fone}" filterBy="#{cliente.fone}">
					#{cliente.fone}				
				</p:column>
				<p:column headerText="Email" sortBy="#{cliente.email}" filterBy="#{cliente.email}">
					#{cliente.email}				
				</p:column>
			</p:dataTable>
			
			<p:dialog header="Cliente Detalhes" widgetVar="clienteDialog" resizable="false"
					  width="200" showEffect="explode" hideEffect="explode">
				<h:panelGrid id="display" columns="2" cellpadding="4">
					<h:outputText value="Id:" />
					<h:outputText value="#{clienteMB.clienteSelecionado.id}" id="id" />
					
					<h:outputText value="Nome" />
					<h:outputText value="#{clienteMB.clienteSelecionado.nome}" id="nome" />
					
					<h:outputText value="Fone" />
					<h:outputText value="#{clienteMB.clienteSelecionado.fone}" id="fone" />
					
					<h:outputText value="Email:" />
					<h:outputText value="#{clienteMB.clienteSelecionado.email}" id="email" />
				</h:panelGrid>
			</p:dialog>
			
			<p:dialog id="modalDialog" header="Modal Dialog" widgetVar="dlg2" modal="true" 
						resizable="false" showEffect="clip" hideEffect="clip"
						style="font-size:15px;">
				<h:panelGrid columns="2" cellpadding="5">
					<h:outputLabel for="cadNome" value="Nome:" />
					<p:inputText value="#{clienteMB.cliente.nome}"
								id="cadNome" required="true" label="nome" /> 
								
					<h:outputLabel for="cadFone" value="Fone:" />
					<p:inputText value="#{clienteMB.cliente.fone}"
								id="cadFone" required="true" label="fone" />
								
					<h:outputLabel for="cadEmail" value="Email:" />
					<p:inputText value="#{clienteMB.cliente.email}"
								id="cadEmail" required="true" label="email" />
								
					<p:commandButton value="Submit" 
						actionListener="#{clienteMB.incluirCliente()}" />
				</h:panelGrid>
			</p:dialog>	
		</h:form>

leonhard32 · Outubro 19, 2013, 2:37pm

[quote=Viciado]Olá, eu criei um p:dialog para incluir dados no banco. Após confirmar a inclusão como eu posso fechar a popup e atualizar o meu dataTable?

[code]
<h:form id=“form”>
<h:panelGrid columns=“1” cellpadding=“5” >
<p:commandButton id=“modalDialogButton” value=“Adicionar Cliente” onclick=“dlg2.show();” type=“button"
style=“margin-left:155px; font-size:15px;”/>
</h:panelGrid>

<p:dataTable var=“cliente” value=”#{clienteMB.carregarCliente()}" rowKey="#{clienteMB.cliente.id}“
paginator=“true” rows=“10” selection=”#{clienteMB.clienteSelecionado}“
filteredValue=”#{clienteMB.clientesFiltrados}" id="clientesTable"
emptyMessage="Nenhum registro encontrado"
style=“margin-left:155px; margin-right:155px; font-size:15px;”>

			<p:ajax event="rowSelect" update=":form:display" oncomplete="PF('clienteDialog').show()" />
			
			<f:facet name="header">Lista de Clientes</f:facet>
			
			<p:column headerText="Id" sortBy="#{cliente.id}" filterBy="#{cliente.id}">
				#{cliente.id}				
			</p:column>
			<p:column headerText="Nome" sortBy="#{cliente.nome}" filterBy="#{cliente.nome}">
				#{cliente.nome}				
			</p:column>
			<p:column headerText="Fone" sortBy="#{cliente.fone}" filterBy="#{cliente.fone}">
				#{cliente.fone}				
			</p:column>
			<p:column headerText="Email" sortBy="#{cliente.email}" filterBy="#{cliente.email}">
				#{cliente.email}				
			</p:column>
		</p:dataTable>
		
		<p:dialog header="Cliente Detalhes" widgetVar="clienteDialog" resizable="false"
				  width="200" showEffect="explode" hideEffect="explode">
			<h:panelGrid id="display" columns="2" cellpadding="4">
				<h:outputText value="Id:" />
				<h:outputText value="#{clienteMB.clienteSelecionado.id}" id="id" />
				
				<h:outputText value="Nome" />
				<h:outputText value="#{clienteMB.clienteSelecionado.nome}" id="nome" />
				
				<h:outputText value="Fone" />
				<h:outputText value="#{clienteMB.clienteSelecionado.fone}" id="fone" />
				
				<h:outputText value="Email:" />
				<h:outputText value="#{clienteMB.clienteSelecionado.email}" id="email" />
			</h:panelGrid>
		</p:dialog>
		
		<p:dialog id="modalDialog" header="Modal Dialog" widgetVar="dlg2" modal="true" 
					resizable="false" showEffect="clip" hideEffect="clip"
					style="font-size:15px;">
			<h:panelGrid columns="2" cellpadding="5">
				<h:outputLabel for="cadNome" value="Nome:" />
				<p:inputText value="#{clienteMB.cliente.nome}"
							id="cadNome" required="true" label="nome" /> 
							
				<h:outputLabel for="cadFone" value="Fone:" />
				<p:inputText value="#{clienteMB.cliente.fone}"
							id="cadFone" required="true" label="fone" />
							
				<h:outputLabel for="cadEmail" value="Email:" />
				<p:inputText value="#{clienteMB.cliente.email}"
							id="cadEmail" required="true" label="email" />
							
				<p:commandButton value="Submit" 
					actionListener="#{clienteMB.incluirCliente()}" />
			</h:panelGrid>
		</p:dialog>	
	</h:form>

[/code][/quote]

Tenta:

<p:commandButton value="Submit"   
                        actionListener="#{clienteMB.incluirCliente()}" oncomplete="dlg2.hide();" update="clientesTable"/>

[]'s

Viciado · Outubro 19, 2013, 2:50pm

[quote=leonhard32][quote=Viciado]Olá, eu criei um p:dialog para incluir dados no banco. Após confirmar a inclusão como eu posso fechar a popup e atualizar o meu dataTable?

[code]
<h:form id=“form”>
<h:panelGrid columns=“1” cellpadding=“5” >
<p:commandButton id=“modalDialogButton” value=“Adicionar Cliente” onclick=“dlg2.show();” type=“button"
style=“margin-left:155px; font-size:15px;”/>
</h:panelGrid>

<p:dataTable var=“cliente” value=”#{clienteMB.carregarCliente()}" rowKey="#{clienteMB.cliente.id}“
paginator=“true” rows=“10” selection=”#{clienteMB.clienteSelecionado}“
filteredValue=”#{clienteMB.clientesFiltrados}" id="clientesTable"
emptyMessage="Nenhum registro encontrado"
style=“margin-left:155px; margin-right:155px; font-size:15px;”>

			<p:ajax event="rowSelect" update=":form:display" oncomplete="PF('clienteDialog').show()" />
			
			<f:facet name="header">Lista de Clientes</f:facet>
			
			<p:column headerText="Id" sortBy="#{cliente.id}" filterBy="#{cliente.id}">
				#{cliente.id}				
			</p:column>
			<p:column headerText="Nome" sortBy="#{cliente.nome}" filterBy="#{cliente.nome}">
				#{cliente.nome}				
			</p:column>
			<p:column headerText="Fone" sortBy="#{cliente.fone}" filterBy="#{cliente.fone}">
				#{cliente.fone}				
			</p:column>
			<p:column headerText="Email" sortBy="#{cliente.email}" filterBy="#{cliente.email}">
				#{cliente.email}				
			</p:column>
		</p:dataTable>
		
		<p:dialog header="Cliente Detalhes" widgetVar="clienteDialog" resizable="false"
				  width="200" showEffect="explode" hideEffect="explode">
			<h:panelGrid id="display" columns="2" cellpadding="4">
				<h:outputText value="Id:" />
				<h:outputText value="#{clienteMB.clienteSelecionado.id}" id="id" />
				
				<h:outputText value="Nome" />
				<h:outputText value="#{clienteMB.clienteSelecionado.nome}" id="nome" />
				
				<h:outputText value="Fone" />
				<h:outputText value="#{clienteMB.clienteSelecionado.fone}" id="fone" />
				
				<h:outputText value="Email:" />
				<h:outputText value="#{clienteMB.clienteSelecionado.email}" id="email" />
			</h:panelGrid>
		</p:dialog>
		
		<p:dialog id="modalDialog" header="Modal Dialog" widgetVar="dlg2" modal="true" 
					resizable="false" showEffect="clip" hideEffect="clip"
					style="font-size:15px;">
			<h:panelGrid columns="2" cellpadding="5">
				<h:outputLabel for="cadNome" value="Nome:" />
				<p:inputText value="#{clienteMB.cliente.nome}"
							id="cadNome" required="true" label="nome" /> 
							
				<h:outputLabel for="cadFone" value="Fone:" />
				<p:inputText value="#{clienteMB.cliente.fone}"
							id="cadFone" required="true" label="fone" />
							
				<h:outputLabel for="cadEmail" value="Email:" />
				<p:inputText value="#{clienteMB.cliente.email}"
							id="cadEmail" required="true" label="email" />
							
				<p:commandButton value="Submit" 
					actionListener="#{clienteMB.incluirCliente()}" />
			</h:panelGrid>
		</p:dialog>	
	</h:form>

[/code][/quote]

Tenta:

<p:commandButton value="Submit"   
                        actionListener="#{clienteMB.incluirCliente()}" oncomplete="dlg2.hide();" update="clientesTable"/>

[]'s[/quote]

Simples e muito útil.
Obrigado

Viciado · Outubro 19, 2013, 8:04pm

No meu dialog eu coloquei um campo obrigatório, mas fecha a popup e não mostra a mensagem de erro.

<h:body>
		<ui:include src="/pages/menu/Menu.xhtml" />
		<div class="space" />
		<h:form id="form">
			<h:panelGrid columns="1" cellpadding="5" >
				<p:commandButton id="modalDialogButton" value="Adicionar Cliente" onclick="dlg2.show();" type="button" 
						style="margin-left:155px; font-size:15px;"/>
			</h:panelGrid>
			<div style="margin-left: 200px" />
			<p:dataTable var="cliente" value="#{clienteMB.carregarCliente()}" rowKey="#{clienteMB.cliente.id}"
						paginator="true" rows="10" selection="#{clienteMB.clienteSelecionado}" 
						filteredValue="#{clienteMB.clientesFiltrados}" id="clientesTable"
						emptyMessage="Nenhum registro encontrado" 
						style="margin-left:155px; margin-right:155px; font-size:15px;">
						
				<p:ajax event="rowSelect" update=":form:display" oncomplete="PF('clienteDialog').show()" />
				
				<f:facet name="header">Lista de Clientes</f:facet>
				
				<p:column headerText="Id" sortBy="#{cliente.id}" filterBy="#{cliente.id}">
					#{cliente.id}				
				</p:column>
				<p:column headerText="Nome" sortBy="#{cliente.nome}" filterBy="#{cliente.nome}">
					#{cliente.nome}				
				</p:column>
				<p:column headerText="Fone" sortBy="#{cliente.fone}" filterBy="#{cliente.fone}">
					#{cliente.fone}				
				</p:column>
				<p:column headerText="Email" sortBy="#{cliente.email}" filterBy="#{cliente.email}">
					#{cliente.email}				
				</p:column>
			</p:dataTable>
			
			<p:dialog header="Cliente Detalhes" widgetVar="clienteDialog" resizable="false"
					  width="200" showEffect="explode" hideEffect="explode">
				<h:panelGrid id="display" columns="2" cellpadding="4">
					<h:outputText value="Id:" />
					<h:outputText value="#{clienteMB.clienteSelecionado.id}" id="id" />
					
					<h:outputText value="Nome" />
					<h:outputText value="#{clienteMB.clienteSelecionado.nome}" id="nome" />
					
					<h:outputText value="Fone" />
					<h:outputText value="#{clienteMB.clienteSelecionado.fone}" id="fone" />
					
					<h:outputText value="Email:" />
					<h:outputText value="#{clienteMB.clienteSelecionado.email}" id="email" />
				</h:panelGrid>
			</p:dialog>
			
			<p:dialog id="modalDialog" header="Modal Dialog" widgetVar="dlg2" modal="true" 
						resizable="false" showEffect="clip" hideEffect="clip"
						style="font-size:15px;">
				<h:panelGrid columns="2" cellpadding="5">
					<h:outputLabel for="cadNome" value="Nome:" />
					<p:inputText value="#{clienteMB.cliente.nome}"
								id="cadNome" required="true" label="nome" /> 
					<p:message for="cadNome" display="icon"/> 
								
					<h:outputLabel for="cadFone" value="Fone:" />
					<p:inputText value="#{clienteMB.cliente.fone}"
								id="cadFone" required="true" label="fone" />
								
					<h:outputLabel for="cadEmail" value="Email:" />
					<p:inputText value="#{clienteMB.cliente.email}"
								id="cadEmail" required="true" label="email" />
								
					<p:commandButton value="Submit" 
						actionListener="#{clienteMB.incluirCliente()}"
						oncomplete="dlg2.hide();" update="clientesTable" />
				</h:panelGrid>
			</p:dialog>	
		</h:form>

O que eu estou fazendo errado?

system · Dezembro 30, 2015, 2:57pm

Fechar p:dialog após submit

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI