Dialog não atualiza dentro do tabview + template

cesarpir · Julho 19, 2011, 3:35pm

Boa tarde, há dias estou tentando desenvolver um projeto onde tenho um template.xhtml, listaProfissionais, cadProfissionais este contendo um TabView, em uma das tabs listarei todos os seus empregos, até ai tudo bem.
Neste emprego tenho um botão para incluir, alterar, excluir (<p:commandButton) ai que começou o problema, quando chama o dialog ele não atualiza os dados, só um comentário fiz esta parte de listar os empregos + dialog em páginas separadas sem usar o template tudo funciona, o que acham? segue abaixo meus códigos.

Template.xhtml

<!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:p="http://primefaces.prime.com.tr/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<title><ui:insert name="title">Sistema de recrutamento</ui:insert>
	</title>
	<link
		href="#{facesContext.externalContext.requestContextPath}/default.css"
		rel="stylesheet" type="text/css" />
</h:head>
<h:body>
	<p:layout fullPage="true">
		<p:layoutUnit position="top" height="70">
			<ui:insert name="cabecalho">

			</ui:insert>
		</p:layoutUnit>

		<p:layoutUnit position="left" width="170" header="Menu">
			<ui:insert name="menu">
				<ui:include src="paginaMenu.xhtml" />
			</ui:insert>
		</p:layoutUnit>

		<p:layoutUnit position="center">
			<ui:insert name="centro">

			</ui:insert>
		</p:layoutUnit>

	</p:layout>
</h:body>
</html>

cadProfissionais.xhtml

<!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:p="http://primefaces.prime.com.tr/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html">
<ui:composition template="template.xhtml">
	<ui:define name="centro">
		<h:form prependId="false">
			<p:tabView style="display: inline-block; width: 99%">
				<p:tab title="Cadastro">
					<p:growl id="growl" showDetail="false" />
					<h:panelGrid id="tabela" columns="2" cellpadding="0">
						<h:outputLabel id="lblData" value="Atualização" for="txtData" />
						<h:outputText id="txtData"
							value="#{profissionalMB.profissional.dataCadastro}">
							<f:convertDateTime dateStyle="short" />
						</h:outputText>

						<h:outputText value="Ativo" />
						<h:selectOneMenu value="#{profissionalMB.profissional.situacao}">
							<f:selectItem itemValue="0" itemLabel="Inativo" />
							<f:selectItem itemValue="1" itemLabel="Ativo" />
						</h:selectOneMenu>

						<h:outputLabel id="lblCodigo" value="Código" for="txtCodigo" />
						<h:outputFormat id="txtCodigo" disabled="true"
							value="#{profissionalMB.profissional.id}" />
						<h:outputLabel id="lblNome" value="Nome" for="txtNome" />
						<p:inputText id="txtNome"
							value="#{profissionalMB.profissional.nome}" style="width:350px" />

						<h:outputLabel id="lblPeso" value="Peso" for="txtPeso" />
						<p:inputText id="txtPeso"
							value="#{profissionalMB.profissional.peso}" style="width:50px" />
						<h:outputLabel id="lblAltura" value="Altura" for="txtAltura" />
						<p:inputText id="txtAltura"
							value="#{profissionalMB.profissional.altura}" style="width:50px" />
						<h:outputLabel id="lblCpf" value="CPF" for="txtCPF" />
						<p:inputText id="txtCPF" disabled="true"
							value="#{profissionalMB.profissional.cpf}" style="width:150px" />

						<h:outputText value="Sexo" />
						<h:selectOneMenu value="#{profissionalMB.profissional.sexo}">
							<f:selectItem itemValue="M" itemLabel="Masculino" />
							<f:selectItem itemValue="F" itemLabel="Feminino" />
						</h:selectOneMenu>

					</h:panelGrid>

					<h:panelGrid id="tabela2" columns="5" cellpadding="0">
						<h:outputLabel id="lblIdade" value="Idade" for="txtIdade" />
						<p:inputText id="txtIdade"
							value="#{profissionalMB.profissional.idade}" style="width:25px" />
						<h:outputLabel id="lblCep" value="Cep" for="txtCep" />
						<p:inputMask id="txtCep"
							value="#{profissionalMB.profissional.cep}" style="width:80px"
							mask="99999-999" />
						<p:commandButton value="Busca CEP" update="infoCep" type="push"
							oncomplete="dialogBuscaCep.show();" image="ui-icon-search" />
					</h:panelGrid>

					<h:panelGrid id="tabela3" columns="2" cellpadding="0">
						<h:outputLabel id="lblEndereco" value="Endereco" for="txtEndereco" />
						<p:inputText id="txtEndereco"
							value="#{profissionalMB.profissional.endereco}"
							style="width:350px" />
						<h:outputLabel id="lblComplemento" value="Complemento"
							for="txtComplemento" />
						<p:inputText id="txtComplemento"
							value="#{profissionalMB.profissional.complemento}"
							style="width:200px" />
						<h:outputLabel id="lblBairro" value="Bairro" for="txtBairro" />
						<p:inputText id="txtBairro"
							value="#{profissionalMB.profissional.bairro}" style="width:250px" />
						<h:outputLabel id="lblCidade" value="Cidade" for="txtCidade" />
						<p:inputText id="txtCidade"
							value="#{profissionalMB.profissional.cidade}" style="width:250px" />

						<h:outputLabel id="lblEstado" value="Estado" for="txtEstado" />
						<p:inputText id="txtEstado"
							value="#{profissionalMB.profissional.estado}" style="width:50px" />

						<h:outputLabel id="lblRegiao" value="Região" for="txtRegiao" />
						<p:inputText id="txtRegiao"
							value="#{profissionalMB.profissional.regiao}" style="width:150px" />

						<f:facet name="footer">
							<h:panelGroup style="display:block; text-align:left">
								<p:commandButton value="Gravar"
									action="#{profissionalMB.salvar}" ajax="false" update="growl"
									image="ui-icon-disk" />
								<p:commandButton value="Fechar" ajax="false" immediate="true"
									action="listaProfissionais.xhtml?faces-redirect=true" image="ui-icon ui-icon-close" />
							</h:panelGroup>
						</f:facet>
					</h:panelGrid>
				</p:tab>

				<p:tab title="Cadastro II">

				</p:tab>

				<p:tab title="Cursos">

				</p:tab>

				<p:tab title="Empregos">
					<ui:include src="listaProfEmpregos.xhtml" />
				</p:tab>

				<p:tab title="Habilidades">

				</p:tab>

				<p:tab title="Comp/Vagas">

				</p:tab>

				<p:tab title="Observações">

				</p:tab>

				<p:tab title="Internet">

				</p:tab>

				<p:tab title="Internas">

				</p:tab>

				<p:tab title="Parecer Psicológico">

				</p:tab>

			</p:tabView>
		</h:form>

		<p:dialog header="Localizar CEP" widgetVar="dialogBuscaCep"
			appendToBody="true" resizable="false" modal="true" showEffect="slide"
			width="500">
			<h:form prependId="false">
				<p:focus />
				<h:panelGrid id="infoCep" columns="4" style="margin-bottom:10px">
					<h:outputLabel for="txtCepBusca" value="Cep:" />
					<p:inputMask id="txtCepBusca" value="#{profissionalMB.numeroCep}"
						style="width:100px" mask="99999-999" />
					<p:commandButton update="resultCep"
						action="#{profissionalMB.buscaCep}" value="Pesquisar" />
					<p:commandButton update="tabela"
						oncomplete="dialogBuscaCep.hide();" value="Fechar" />
				</h:panelGrid>
				<h:panelGrid id="resultCep" columns="2" style="margin-bottom:10px">
					<h:outputLabel id="lblEnderecoX" value="Endereco"
						for="txtEnderecoX" />
					<p:inputText id="txtEnderecoX" value="#{profissionalMB.enderecoX}"
						style="width:350px" />
					<h:outputLabel id="lblBairroX" value="Bairro" for="txtBairroX" />
					<p:inputText id="txtBairroX" value="#{profissionalMB.bairroX}"
						style="width:250px" />
					<h:outputLabel id="lblCidadeX" value="Cidade" for="txtCidadeX" />
					<p:inputText id="txtCidadeX" value="#{profissionalMB.cidadeX}"
						style="width:200px" />
					<h:outputLabel id="lblEstadoX" value="Estado" for="txtEstadoX" />
					<p:inputText id="txtEstadoX" value="#{profissionalMB.estadoX}"
						style="width:50px" />
				</h:panelGrid>
			</h:form>
		</p:dialog>

	</ui:define>
</ui:composition>
</html>

Aqui onde começam os problemas
listaProfEmpregos.xhtml

<!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:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui">

<h:form id="formLista">
	<p:growl id="alerta" />
	<p:dataTable id="tabProfEmpre"
		value="#{profissionalEmpregoMB.empregos}" var="emp"
		paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
		rowsPerPageTemplate="5,10,15"
		emptyMessage="Nenhum registro encontrado">
		<f:facet name="header">
			<h:outputText value="Lista de Empregos" />
		</f:facet>
		<p:column>
			<f:facet name="header">
				<h:outputText value="id" />
			</f:facet>
			<h:outputText value="#{emp.id}" />
		</p:column>
		<p:column>
			<f:facet name="header">
				<h:outputText value="Empresa" />
			</f:facet>
			<h:outputText value="#{emp.empresa}" />
		</p:column>
		<p:column>
			<f:facet name="header">
				<h:outputText value="Data Inicio" />
			</f:facet>
			<h:outputText value="#{emp.dataEntrada}">
				<f:convertDateTime pattern="dd/MM/yyyy" />
			</h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				<h:outputText value="Data Término" />
			</f:facet>
			<h:outputText value="#{emp.dataSaida}">
				<f:convertDateTime pattern="dd/MM/yyyy" />
			</h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				<h:outputText value="Cargo" />
			</f:facet>
			<h:outputText value="#{emp.cargo.nome}" />
		</p:column>
		<p:column>
			<f:facet name="header">
				<h:outputText value="Salário" />
			</f:facet>
			<h:outputText value="#{emp.salario}" align="right">
				<f:convertNumber minFractionDigits="2" />
			</h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				<h:outputText value="Alterar" />
			</f:facet>
			<p:commandButton value="editar" oncomplete="dialogEmpregos.show();"
				immediate="false" update="formEmprego:infoEmpregos" ajax="true"
				action="#{profissionalEmpregoMB.editar}"
				image="ui-icon ui-icon-pencil">
			</p:commandButton>
		</p:column>
		<f:facet name="footer">
			<p:commandButton value="Adicionar novo emprego"
				onclick="dialogEmpregos.show();" immediate="false"
				action="#{profissionalEmpregoMB.novoEmprego}"
				update="formEmprego:infoEmpregos" ajax="true"
				image="ui-icon ui-icon-circle-plus" />
		</f:facet>
	</p:dataTable>
</h:form>

<p:dialog header="Cadastro de Empregos" widgetVar="dialogEmpregos"
	onCloseUpdate="formLista:tabProfEmpre" position="center"
	appendToBody="true" resizable="false" modal="true" showEffect="slide"
	width="630" height="280">
	<h:form id="formEmprego">
		<h:panelGrid id="infoEmpregos" columns="2">
			<h:outputLabel for="txtEmpresa" value="Empresa:" />
			<p:inputText id="txtEmpresa"
				value="#{profissionalEmpregoMB.emprego.empresa}" style="width:350px" />
			<h:outputLabel for="txtDatainicio" value="Data ínicio:" />
			<p:inputMask id="txtDatainicio"
				value="#{profissionalEmpregoMB.emprego.dataEntrada}"
				style="width:100px" mask="99/99/9999">
				<f:convertDateTime pattern="dd/MM/yyyy" />
			</p:inputMask>
			<h:outputLabel for="txtDatatermino" value="Data Término" />
			<p:inputMask id="txtDatatermino"
				value="#{profissionalEmpregoMB.emprego.dataSaida}"
				style="width:100px" mask="99/99/9999">
				<f:convertDateTime pattern="dd/MM/yyyy" />
			</p:inputMask>
			<h:outputLabel for="txtSalario" value="Salário:" />
			<p:inputText id="txtSalario"
				value="#{profissionalEmpregoMB.emprego.salario}" style="width:100px">
				<f:convertNumber minFractionDigits="2" />
			</p:inputText>
			<h:outputLabel for="txtCargo" value="Cargo:" />
			<h:selectOneMenu id="txtCargo"
				value="#{profissionalEmpregoMB.emprego.cargo.id}"
				style=" width : 502px;">
				<f:selectItems value="#{profissionalEmpregoMB.cargos}" />
			</h:selectOneMenu>
			<f:facet name="footer">
				<p:commandButton update="formLista:alerta, formLista:tabProfEmpre"
					image="ui-icon-save" onclick="dialogEmpregos.hide();"
					immediate="false" ajax="true"
					action="#{profissionalEmpregoMB.salvar}" value="Gravar" />
				<p:commandButton onclick="dialogEmpregos.hide();" immediate="false"
					ajax="true" update="tabProfEmpre" image="ui-icon-close"
					value="Fechar" />
			</f:facet>
		</h:panelGrid>
	</h:form>
</p:dialog>

<h:messages />
</html>

Já fiz com commandLink, já coloquei o dialog em um xhtml a parte, enfim nada, um detalhe importante somente funciona com ajax=“true”, pois estou usando o primefaces-3.0.M1 - JSF2, pois nestas duas semanas de buscas, erros e tentativas com dicas e sugestões nada, ai resolvi postar pedindo ajuda.
Entendam que estou iniciando este projeto, rsrrs, agradeço as dicas.

Abraços

César

edudebom · Julho 20, 2011, 10:16am

Estou com o mesmo problema e utilizo o 3.0M2. Só resolvi colocando o dialog fora da tag layout. Mas não uso template e vou começar a adaptar hoje para isso.

No seu caso tente colocar os dialogs fora do <ui:define name=“centro”>

cesarpir · Julho 20, 2011, 11:18am

Em primeiro lugar obrigado pela ajuda e atenção edudebom .

Mas eu não sei se estou fazendo correto, veja se você notar eu tenho o cadProfissionais.jsf este usa o template ok, as tags UI vamos dizer assim, esta página tem o tabview que em uma das tabs chama o listaProfempregos.jsf nesta aqui que será chamada o dialog não tem uso do template, ele se encaixa dentro da tab, até onde eu sei e tentei ok, sou leigo em layout, jsf, rsrsr. to aprendendo ainda, blz.
O que fiz como disse foi deixar o dialg fora do <h:form>, também tentei com o dialog em outro jsf chamando adiciona_emprego.jsf e nada!
Ou pode me orientar se eu não estiver vendo algo, não sabendo como faz isto.

Obrigado novamente.

César

edudebom · Julho 20, 2011, 1:15pm

Não sei se é a melhor maneira, mas no meu template eu adicionei após os layoutUnit:

<ui:insert name="dialogo"></ui:insert>

E nos xhtml eu jogo os dialogos dentro desse “ui”. Funciona normal.

cesarpir · Julho 20, 2011, 2:18pm

Ok entendi boa idéia, porém no meu caso tá um pouco confuso devido a eu ter o tabview, como disse antes não consigo imaginar isto veja

será chamado o cadProfissionais.jsf que possue o tabview e já possue as tags:

<ui:composition template=“template.xhtml”>
<ui:define name=“centro”>

terá que ser executado a listaProfEmpregos.jsf que está na tabview empregos, eis a minha dúvida aqui, onde não sei o que fazer não posso por as tags

<ui:composition template=“template.xhtml”>
<ui:define name=“centro”>

O dialog fica na listaProfEmpregos.jsf como usar o <ui:define name=“dialogo”> agora?

Pode me dar um exemplo, to perdido aqui, rsrsrs, mas acho que tem solução, espero, rs.

Abraços

César

system · Dezembro 30, 2015, 8:22am

Dialog não atualiza dentro do tabview + template

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