ajax4jsf - Tentei fazer o comando usando ajax,porem, nao esta funcionando, ele da o reflhes complet

9 de maio de 2008 9 respostas

Krusst 9 de maio de 2008

ola pessoal
eu quero fazer o seguinte, ao preencher os campos de busca, quero que ele liste logo abaixo, porem, sem dar o reflhes na tele, quero que ele atualize apenas a “tabela” com os registros.
vejam o meu codigo

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<f:view>	
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
			<link href="css/css_azul.css" rel="stylesheet" type="text/css">
			<link href="css/css_azul_form.css" rel="stylesheet" type="text/css">
			<link href="css/css_azul_tbl.css" rel="stylesheet" type="text/css">	
	<title>Busca de Pessoa</title>
	</head>
	<body>
		<div class="ContainerForm">
		
			<span class="TituloBarraEsq">&nbsp;</span>
			<span class="TituloBarra"><h1>Busca de Pessoa</h1></span>
			<span class="TituloBarraDir">&nbsp;</span>		
			<a4j:form id="form">
				<fieldset>
					<span style="width:210px">	<h:outputLabel value="Nome: " for="nome"></h:outputLabel><h:inputText value="#{pessoaFisicaMB.pessoaFisicaDB.pessoaFisica.nome}" id="nome" maxlength="30" size="30" styleClass="FormCampo" ></h:inputText></span>
          			
			            <span style="width:185px">	<h:outputLabel value="CPF/CNPJ: " for="docCPF"></h:outputLabel> <h:inputText id="docCPF" value="#{pessoaFisicaMB.pessoaFisicaDB.pessoaFisica.documento}" maxlength="20" size="21" styleClass="FormCampo"></h:inputText> </span>
			        	<span style="width:200px">	<h:outputLabel value="Status: " for="statusId"></h:outputLabel>
							<h:selectOneMenu id="statusId" styleClass="FormCampo" value="#{pessoaFisicaMB.pessoaFisicaDB.pessoaFisica.status}" disabled="#{pessoaFisicaMB.pessoaStatusId!=0}">
								<f:selectItems value="#{pessoaFisicaMB.pessoaFisica.statusLista}"/>
							</h:selectOneMenu>
		        			<a4j:commandLink action="#{pessoaFisicaMB.busca}" reRender="tabela">
		        				<f:param name="pessoaStatusId" value="#{pessoaFisicaMB.pessoaStatusId}" />
		        				<h:graphicImage value="img/icon/icon_pesq.gif"></h:graphicImage>
		        			</a4j:commandLink>
		        			
		        	</span> 	
		        	<span style="width: 720px">
		        		|Param.pessoaStatusId<h:outputText value="#{pessoaFisicaMB.pessoaStatusId}"></h:outputText>|
		        		|Param.pessoaId<h:outputText value="#{pessoaFisicaMB.pessoaId}"></h:outputText>|

		        	</span>			
				</fieldset>	
	
					<rich:messages  layout="list" errorLabelClass="rich-messages-label-error" infoLabelClass="rich-messages-label-info"  ajaxRendered="true" tooltip="true" showDetail="true" showSummary="true" passedLabel="No Errors">
					</rich:messages>				

					<rich:dataTable value="#{pessoaFisicaMB.pessoaFisicaDB.listaPorParametro}"  id="tabela" var="pessoa" border="0"  rowClasses="TbltrTrue,TbltrFalse" width="750">
					
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Código" /> 
							</f:facet>
							<h:outputText value="#{pessoa.id}"/>
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Nome" /> 
							</f:facet>
							<h:outputText value="#{pessoa.nome}"/>
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="CPF/CNPJ" /> 
							</f:facet>
							<h:outputText value="#{pessoa.documento}"/>
						</rich:column>	
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Status" /> 
							</f:facet>
							<h:outputText value="#{pessoa.status.descr}"/>
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Atualizar" /> 
							</f:facet>
							<a4j:commandLink action="#{pessoaFisicaMB.acaoEditar}">
								<f:param name="id" value="#{pessoa.id}" />
								<f:param name="paginaEstadoId" value="6" />
								<img src="img/icon/icon_edit.png" width="16" height="16" alt="Atualizar" border="0">								
							</a4j:commandLink>
						</rich:column>
						
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Revisar" />
							</f:facet>
							<a4j:commandLink action="#{pessoaFisicaMB.acaoEditar}">
								<f:param name="id" value="#{pessoa.id}" />
								<f:param name="paginaEstadoId" value="4" />
								<img src="img/icon/icon_revisar.png" width="16" height="16" alt="Revisar" border="0">								
							</a4j:commandLink>
						</rich:column>
						
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Recadastrar" />
							</f:facet>
							<a4j:commandLink action="#{pessoaFisicaMB.acaoEditar}">
								<f:param name="id" value="#{pessoa.id}" />
								<f:param name="paginaEstadoId" value="5" />
								<img src="img/icon/icon_recadastrar.png" width="16" height="16" alt="Recadastrar" border="0">								
							</a4j:commandLink>
						</rich:column>						

					</rich:dataTable>

			</a4j:form>
		</div>

	</body>
	</html>
</f:view>

porem, nao funciona do jeito que fiz?
o que eu fiz de errado?qual foi a caquinha?

abs
T+

9 Respostas

rponte 9 de mai. de 2008

Levando em consideração que seu método no managed bean e todas as configurações estejam devidamente funcionando, aconselho você utilizar um a4j:outputPanel ao redor da sua tabela e mandar que ele seja reRenderizado no lugar da tabela.

Krusst 10 de mai. de 2008

como eu sei se esta devidamente configurado?
tem algum tutorial?
alguma implementacao a mais?

como ficou minha pagina

&lt;a4j:outputPanel id="tabela" &gt;
					&lt;rich:dataTable value="#{pessoaFisicaMB.pessoaFisicaDB.listaPorParametro}"   var="pessoa" border="0"  rowClasses="TbltrTrue,TbltrFalse" width="750"&gt;
					
						&lt;rich:column&gt;
							&lt;f:facet name="header"&gt;
								&lt;h:outputText value="Código" /&gt; 
							&lt;/f:facet&gt;
							&lt;h:outputText value="#{pessoa.id}"/&gt;
						&lt;/rich:column&gt;
						&lt;rich:column&gt;
							&lt;f:facet name="header"&gt;
								&lt;h:outputText value="Nome" /&gt; 
							&lt;/f:facet&gt;
							&lt;h:outputText value="#{pessoa.nome}"/&gt;
						&lt;/rich:column&gt;
						&lt;rich:column&gt;
							&lt;f:facet name="header"&gt;
								&lt;h:outputText value="CPF/CNPJ" /&gt; 
							&lt;/f:facet&gt;
							&lt;h:outputText value="#{pessoa.documento}"/&gt;
						&lt;/rich:column&gt;	
						&lt;rich:column&gt;
							&lt;f:facet name="header"&gt;
								&lt;h:outputText value="Status" /&gt; 
							&lt;/f:facet&gt;
							&lt;h:outputText value="#{pessoa.status.descr}"/&gt;
						&lt;/rich:column&gt;
						&lt;rich:column&gt;
							&lt;f:facet name="header"&gt;
								&lt;h:outputText value="Atualizar" /&gt; 
							&lt;/f:facet&gt;
							&lt;a4j:commandLink action="#{pessoaFisicaMB.acaoEditar}"&gt;
								&lt;f:param name="id" value="#{pessoa.id}" /&gt;
								&lt;f:param name="paginaEstadoId" value="6" /&gt;
								<img     >								
							&lt;/a4j:commandLink&gt;
						&lt;/rich:column&gt;
						
						&lt;rich:column&gt;
							&lt;f:facet name="header"&gt;
								&lt;h:outputText value="Revisar" /&gt;
							&lt;/f:facet&gt;
							&lt;a4j:commandLink action="#{pessoaFisicaMB.acaoEditar}"&gt;
								&lt;f:param name="id" value="#{pessoa.id}" /&gt;
								&lt;f:param name="paginaEstadoId" value="4" /&gt;
								<img     >								
							&lt;/a4j:commandLink&gt;
						&lt;/rich:column&gt;
						
						&lt;rich:column&gt;
							&lt;f:facet name="header"&gt;
								&lt;h:outputText value="Recadastrar" /&gt;
							&lt;/f:facet&gt;
							&lt;a4j:commandLink action="#{pessoaFisicaMB.acaoEditar}"&gt;
								&lt;f:param name="id" value="#{pessoa.id}" /&gt;
								&lt;f:param name="paginaEstadoId" value="5" /&gt;
								<img     >								
							&lt;/a4j:commandLink&gt;
						&lt;/rich:column&gt;						

					&lt;/rich:dataTable&gt;
					&lt;/a4j:outputPanel&gt;

porem, nao funcionou mesmo assim, e ele esta mostrando apenas o cabecalho, provavelmente este “outputPanel” nao esta aumentando o tamanho automativo, pois os dados esta no HTML.

meu MB, caso estaja fazendo algo de errado

package br.com.krusst.precadastro.managedbean;
import java.util.ArrayList;
import java.util.List;

import javax.faces.context.FacesContext;

import br.com.krusst.precadastro.bean.Email;
import br.com.krusst.precadastro.bean.PaginaEstado;
import br.com.krusst.precadastro.bean.Status;
import br.com.krusst.precadastro.bean.PessoaFisica;
import br.com.krusst.precadastro.bean.Telefone;
import br.com.krusst.precadastro.dao.EmailDB;
import br.com.krusst.precadastro.dao.LogradouroDB;
import br.com.krusst.precadastro.dao.PessoaFisicaDB;
import br.com.krusst.precadastro.dao.TelefoneDB;
import br.com.krusst.precadastro.util.FacesUtils;
import br.com.krusst.precadastro.util.KrusstException;
import br.com.krusst.precadastro.dao.PessoaFisicaDB;
import br.com.krusst.precadastro.database.RetornoProcedure;

public class PessoaFisicaMB {
	
	
	private PaginaEstado paginaEstadoAtual = PaginaEstado.ESTADO_DE_CADASTRO;
	private String pessoaId;
	private String pessoaNome;
	private String pessoaDocumento;
	private String pessoaStatusId;
	private PessoaFisicaDB pessoaFisicaDB = new PessoaFisicaDB();
	private PessoaFisica pessoaFisica = new PessoaFisica();
	private LogradouroDB logradouroDB = new LogradouroDB();
	private TelefoneDB telefoneDB = new TelefoneDB();
	private EmailDB emailDB = new EmailDB();
	private List&lt;PessoaFisica&gt; pessoaFisicaLista = new ArrayList&lt;PessoaFisica&gt;();
	
	public PessoaFisicaMB() {
		super();
	}

	public String getPessoaNome() {
		return pessoaNome;
	}

	public String getPessoaDocumento() {
		return pessoaDocumento;
	}

	public void setPessoaNome(String pessoaNome) {
		this.pessoaNome = pessoaNome;
	}

	public void setPessoaDocumento(String pessoaDocumento) {
		this.pessoaDocumento = pessoaDocumento;
	}

	public List&lt;PessoaFisica&gt; getPessoaFisicaLista() {
		return pessoaFisicaLista;
	}

	public void setPessoaFisicaLista(List&lt;PessoaFisica&gt; pessoaFisicaLista) {
		this.pessoaFisicaLista = pessoaFisicaLista;
	}

	public PaginaEstado getEstadoAtual() {
		return paginaEstadoAtual;
	}

	public String getPessoaStatusId() {
		if (pessoaStatusId == null){
			pessoaStatusId = "0";
		}
		return pessoaStatusId;
	}

	public String getPessoaId() {
		return pessoaId;
	}

	public PessoaFisicaDB getPessoaFisicaDB() {
		return pessoaFisicaDB;
	}


	public PessoaFisica getPessoaFisica() {
		return pessoaFisica;
	}


	public LogradouroDB getLogradouroDB() {
		return logradouroDB;
	}

	public TelefoneDB getTelefoneDB() {
		return telefoneDB;
	}

	public EmailDB getEmailDB() {
		return emailDB;
	}

	public void setEstadoAtual(PaginaEstado estadoAtual) {
		this.paginaEstadoAtual = estadoAtual;
	}

	public void setPessoaStatusId(String pessoaStatusId) {
		this.pessoaStatusId = pessoaStatusId;
	}

	public void setPessoaId(String pessoaId) {
		this.pessoaId = pessoaId;
	}

	public void setPessoaFisicaDB(PessoaFisicaDB pessoaFisicaDB) {
		this.pessoaFisicaDB = pessoaFisicaDB;
	}

	public void setPessoaFisica(PessoaFisica pessoaFisica) {
		this.pessoaFisica = pessoaFisica;
	}

	public void setLogradouroDB(LogradouroDB logradouroDB) {
		this.logradouroDB = logradouroDB;
	}

	public void setTelefoneDB(TelefoneDB telefoneDB) {
		this.telefoneDB = telefoneDB;
	}

	public void setEmailDB(EmailDB emailDB) {
		this.emailDB = emailDB;
	}


	public int getPessoaFisicaListaQtd(){
		return this.getPessoaFisicaLista().size();
	}

	public String busca() throws Exception{
		if (getPessoaStatusId()!="0"){
			this.pessoaFisicaDB.getPessoaFisica().setStatus(Status.getStatusPorId(getPessoaStatusId()));
		}
		/*Por causa do BUG de quando utilizar datable como ComandLink, teve-se que fazer acesso direto a classe
		 * e o comando
		//this.setPessoaFisicaLista(this.pessoaFisicaDB.getListaPorParametro(this.pessoaFisica));
		 * parou de ser usado
		 * */
		//this.pessoaFisicaDB.getPessoaFisica().setStatus()
		//this.pessoaFisicaDB.getListaPorParametro();

		/*
		if(this.getPessoaFisicaLista().size()==0){
			FacesUtils.addErrorMessage("A Busca não obteve resultados");
		}
		*/
		return "lista";
	}

	public String acaoEditar(){
	    String value = "0";
	    value = (String) FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("id");

	    String paginaEstadoId = "0";
	    paginaEstadoId = (String) FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("paginaEstadoId");
	    
	    this.setPessoaFisicaCarrega(Integer.parseInt(value));
 	    
	    this.setEstadoAtual(PaginaEstado.getPaginaEstadoPorId(paginaEstadoId));

		return "form";
	}

	public String acaoRevisar(){
		String retorno = null;
		RetornoProcedure retornoProcedure = new RetornoProcedure();
		try {
			this.pessoaFisicaDB.revisar(this.pessoaFisica, retornoProcedure);
		} catch (KrusstException e) {
			e.printStackTrace();
		}
		
		if(retornoProcedure.getErroId()==0){
			FacesUtils.addInfoMessage("Dados do cadastro OK.");
			retorno = "cadastrar";
		}else{
			FacesUtils.addErrorMessage(retornoProcedure.getErroMensagem());
			this.paginaEstadoAtual = PaginaEstado.ESTADO_DE_REVISAO;
		}
			

		//this.pessoaFisicaDB.getPessoaFisica().setPessoaFisicaLimpa();



		return retorno;

	}

	public String acaoCadastrar(){
		try {
			this.pessoaFisicaDB.insert(this.pessoaFisica);
			this.logradouroDB.insert(pessoaFisica.getId(),this.pessoaFisica.getLogradouro());

			this.telefoneDB.insert(pessoaFisica.getId(),this.getPessoaFisica().getTelefone1());
			this.telefoneDB.insert(pessoaFisica.getId(),this.getPessoaFisica().getTelefone2());			

			this.emailDB.insert(pessoaFisica.getId(),this.getPessoaFisica().getEmail1());
			this.emailDB.insert(pessoaFisica.getId(),this.getPessoaFisica().getEmail2());			
	
		} catch (KrusstException e) {
			e.printStackTrace();
		}
		FacesUtils.addInfoMessage("Cadastro de Pessoa realizado com sucesso, código do cadastro: " + this.pessoaFisica.getId());		
		this.pessoaFisicaDB.getPessoaFisica().setPessoaFisicaLimpa();
		return "cadastrar";
	}

	public void setPessoaFisicaCarrega(int pessoaId){
		
		List&lt;Telefone&gt; listaTelefone = new ArrayList&lt;Telefone&gt;();
		List&lt;Email&gt; listaEmail = new ArrayList&lt;Email&gt;();		

		try {
			this.setPessoaFisica(this.pessoaFisicaDB.getPorId(pessoaId));
			
			this.pessoaFisica.setLogradouro(this.logradouroDB.getLogradouroPorParametro(pessoaId, 0));

			listaTelefone = this.telefoneDB.getTelefonePorParametro(pessoaId, 0);
			
				
			if (listaTelefone.size()&gt;=1){this.pessoaFisica.setTelefone1(listaTelefone.get(0));}				
			if (listaTelefone.size()==2){this.pessoaFisica.setTelefone2(listaTelefone.get(1));}
			
			listaEmail = this.emailDB.getEmailPorParametro(pessoaId, 0);
			
			if (listaEmail.size()&gt;=1){this.pessoaFisica.setEmail1(listaEmail.get(0));}			
			if (listaEmail.size()==2){this.pessoaFisica.setEmail2(listaEmail.get(1));}

		} catch (Exception e) {
			e.printStackTrace();
		}		
	}	
	
}

obrigado
T+

rponte 10 de mai. de 2008

Está ocorrendo algum erro no console?

Você verificou se a lista está vindo realmente populada?

Krusst 10 de mai. de 2008

rponte:
Está ocorrendo algum erro no console?

porem, nao funcionou mesmo assim, e ele esta mostrando apenas o cabecalho,

Você verificou se a lista está vindo realmente populada?

como assim?
como eu virificaria isso?

bem, o resultado vem diferente de acordo com os campos que preencho.
era isso?

obrigado
T+

rponte 11 de mai. de 2008

como assim?
como eu virificaria isso?

Se está ecoando algum erro no console da IDE ou do Tomcat

bem, o resultado vem diferente de acordo com os campos que preencho.
era isso?

Você havia dito acima qua mesmo depois do reRender a datatable continua vazia, por isso queria saber se os dados estão chegando corretamente do banco no managed bean.

Krusst 11 de mai. de 2008

erro no console nao te tendo…isso é fato

bem, o datatable ta vindo populado, porem, ele nao “aparece” por uma questao de designer, sabe qdo um div fica encima do outro, é isso o que acontece quando eu coloco o outputPanel(quando eu olho o fonte da pagina gerada, a informacao esta la)

porem, mesmo assim, ele ta renderizando a pagina toda, nao apenas a parte do datatable

agora, saber qual a caquinho que eu to fazendo…ai te complicando

obrigado pela atencao e ajuda
T+

rponte 11 de mai. de 2008

porem, mesmo assim, ele ta renderizando a pagina toda, nao apenas a parte do datatable

agora, saber qual a caquinho que eu to fazendo…ai te complicando

Bem, pelo que vi, teu método busca() está retornando uma regra de navegação, logo ele está navegando entre páginas, mesmo que seja para a mesma página. Para que o JSF entenda que você quer continuar na mesma página você precisa retornar null ou ter seu método sem retorno (void).

Abraços.

Javabuntu 11 de mai. de 2008

você pode usar o <a4j:outputPanel ajaxRendered=“true”> sua table</a4j:outputPanel>
ou da um reRender no id da table…

Krusst 12 de mai. de 2008

rponte fiz as alteracoes e funcionou com o que vc me disse

agora, poderia me ajudar com outra coisa

eu tenho um botao, e de acordo com o estado da pagina, ele tem que mostrar alguns campos.

tenha esta parte da pagina

<a4j:outputPanel id="recadastroRerender" rendered="#{pessoaFisicaMB.estadoAtual.id==5}">
	<span style="width:720px">	
                 <h:outputLabel value="Motido de Recadastro" for="recadastro" ></h:outputLabel>
		<h:inputText value="#{pessoaFisicaMB.pessoaFisica.recadastro.motivo}" maxlength="100" size="100"  styleClass="FormCampo"></h:inputText>
	</span>			
</a4j:outputPanel>
....
<a4j:commandButton value="Revisar" action="#{pessoaFisicaMB.acaoRevisar}" reRender="recadastroRerender"></a4j:commandButton>

desta forma nao funcionou

entao, tentei desta forma

<a4j:outputPanel id="recadastroRerender" rendered="#{pessoaFisicaMB.estadoAtual.id==5}">
						<span style="width:720px">	<h:outputLabel value="Motido de Recadastro" for="recadastro" ></h:outputLabel>
													<h:inputText value="#{pessoaFisicaMB.pessoaFisica.recadastro.motivo}" maxlength="100" size="100"  styleClass="FormCampo"></h:inputText>
						</span>			
					</a4j:outputPanel>

e tambem nao funcionou

o que eu fiz de errado neste caso?

meu MB

...
	public String acaoRevisar(){
		RetornoProcedure retornoProcedure = new RetornoProcedure();
		try {
			this.pessoaFisicaDB.revisar(this.pessoaFisica, retornoProcedure);
		} catch (KrusstException e) {
			e.printStackTrace();
		}
		
		if(retornoProcedure.getErroId()==0){
			FacesUtils.addInfoMessage("Dados do cadastro OK.");
		}else{
			FacesUtils.addErrorMessage(retornoProcedure.getErroMensagem());
			this.paginaEstadoAtual = PaginaEstado.ESTADO_DE_RECADASTRO;
		}
			
		return null;

	}
...
	public void acaoRecadastrar(){
		if(this.pessoaFisica.getRecadastro().getMotivo().length()<=5){
			FacesUtils.addErrorMessage("campo motivo de recadastro");
		}
		this.paginaEstadoAtual = PaginaEstado.ESTADO_DE_RECADASTRO;		

	}

o que devo alterar pra funcionar neste caso!

abs

obrigado

JavaBuntu, estou aplicando o que vc me disse nesta parte nova do meu problema, porem, nao estou conseguindo, eu tentei das 2 formas.

abs
obrigado

Criado 9 de maio de 2008

Ultima resposta 12 de mai. de 2008

Respostas 9

Participantes 3

9 Respostas

Topicos relacionados