Buscar endereço atraves do cep quando o campo perder o foco

6 respostas
Gleidson_Henrique

Olá pessoal, estou com uma duvida. Estou utilizando o Primefaces e estou tentando fazer o seguinte:

1º - O usuario digitará o cep.

2º - Quando ele apertar tab ou entao clicar fora do campo, será executado um metodo e jogará as informações do endereço na tela.

Porém, não consigo fazer isso, procurei na internet alguma coisa sobre isso, vi algo relacionado a ajax, porém tudo tentei foi sem exito.

Alguém poderia me dar um exemplo?

6 Respostas

mauriciot.silva
<h:panelGrid columns="2">
	
		<h:outputText value="CEP:" />
		<h:inputText value="#{managedBean.cep}">
			<f:ajax event="blur" listener="managedBean.buscarEnderecoPorCep()"
				render="panelEnderecoPorCep" />
		</h:inputText>

                            .....
	
	</h:panelGrid>
Gleidson_Henrique

Cara, foi erro meu. Eu estava tentando puxar do banco de dados, mas não estava vindo nada, achei que era o jeito que estava fazendo. Dai testei criando um objeto normal, deu certo… Obrigado pela ajuda.

Agora estou tentando dar o foco para o campo numero, caso alguém souber me fale por favor… Estarei pesquisando também, caso achar antes de alguém comentar aqui, eu informo também como solucionei.

Obrigado.

mauriciot.silva
<h:input onblur="document.getElementyById('idForm:idCampoNumero').focus();"/>

Mas tmbm existem outras alternativas, essa foi a primeira q veio em mente.

Gleidson_Henrique

Testei o seguinte

<p:panel style="border: 0px;" >
			    		<h:outputText value="CEP " /><br />
            			<h:inputText value="#{EnderecoService.cep}" >  
					        <f:ajax event="blur" listener="#{EnderecoService.encontraEndereco}" render="painelendereco"  />
					        
					    </h:inputText>
            			<p:focus for="numeroendereco" context="painelnumero" />
            			
			    	</p:panel>

Porém, antes disso, no começo da página, tinha um para outro componente, então ele foi ignorado e o foco para o campo numero. Clique no cep, preencheu o endereço corretamente e já foi para o campo número, porém, ele teve esse probleminha de pular o focus anteriormente.

Estou meio perdidão ainda, estou aprendendo a mexer com o jsf. Dê uma olhada no meu código, como ele está.

<p:accordionPanel >  
			    <p:tab title="Endereços">

			    <h:panelGrid columns="7" style="border: 0px;" id="painelendereco">
			    
			    	<p:panel style="border: 0px;">
			    		<h:outputText value="Tipo " /><br />
            			<p:selectOneMenu > 
				            <f:selectItems value="#{EnderecoTipoService.enderecosTipo}"   />   
				        </p:selectOneMenu>
			    	</p:panel>
			    	
			    	<p:panel style="border: 0px;" >
			    		<h:outputText value="CEP " /><br />
            			<h:inputText value="#{EnderecoService.cep}" >  
					        <f:ajax event="blur" listener="#{EnderecoService.encontraEndereco}" render="painelendereco"  />
					        
					    </h:inputText>
            			<p:focus for="numeroendereco" context="painelnumero" />
            			
			    	</p:panel>
			    	
			    	<p:panel style="border: 0px;">
			    		<h:outputText value="Logradouro" /><br />  
            			<p:inputText value="#{EnderecoService.logradouro}" />
			    	</p:panel>
			    	
			    	<p:panel style="border: 0px;" id="painelnumero">
			    		<h:outputText value="Número"  /><br />
            			<p:inputText id="numeroendereco" style="width: 40px;"/>
			    	</p:panel >
			    	
			    	<p:panel style="border: 0px;">
			    		<h:outputText value="Bairro" /><br />  
            			<p:inputText />
			    	</p:panel>
			    	
			    	<p:panel style="border: 0px;">
			    		<h:outputText value="Cidade" /><br />  
            			<p:inputText />
			    	</p:panel>
			    	
			    	<p:panel style="border: 0px;">
			    		<h:outputText value="Estado" /><br />  
            			<p:inputText />
            			<p:commandButton actionListener="#{TelefoneService.addTelefone(TelefoneService.telefone)}" id="iconOnly" icon="ui-icon-circle-plus" title="Adicionar novo Status" style="left: 10px; font-size: 12px !important; "/>
			    	</p:panel>
			    	
			    </h:panelGrid>
			    
			    </p:tab>
		    </p:accordionPanel>

Como ele ficaria, nesse exemplo que você fez? Tentei aqui de alguns jeitos, não consegui. Eu tenho que ir especificando por onde vai passando? Formulario, paineis, essas coisas?

Gleidson_Henrique

Agora fui testar pegando a informação que está na tela para tentar puxar no banco de dados.

Porém, quando o foco sai do campo e eu tento puxar o valor, a variavel que o ManagedBean está referenciando está como null.

É retornado a mensagem:

O código está assim:

<h:outputText value="CEP " /><br /> <h:inputText value="#{EnderecoService.cep}" > <f:ajax event="blur" listener="#{EnderecoService.encontraEndereco}" render="painelendereco" /> <p:focus for="numeroendereco" context="painelnumero" /> </h:inputText>

Quando perdesse o foco, não era para o EnderecoService.cep já possuir o valor do CEP ?

Gleidson_Henrique

Consegui enviar o cep para o managedbean. O que aconteceu é que precisava de um form para o ajax funcionar, agora está funcionando.

Também vi que o ajax do primefaces tem algumas opções a mais do que o nativo do jsf, então estou usando ele.

<p:accordionPanel id="accordionendereco">  
			    <p:tab title="Endereços" id="tabendereco" >

			    <h:panelGrid columns="7" style="border: 0px;" id="painelendereco">
			    
			    	<p:panel style="border: 0px;">
			    		<h:outputText value="Tipo " /><br />
            			<p:selectOneMenu > 
				            <f:selectItems value="#{EnderecoTipoService.enderecosTipo}"   />   
				        </p:selectOneMenu>
			    	</p:panel>
			    	
			    	<h:form id="formcep">
			    	<p:panel style="border: 0px;" id="painelcep">
			    		
			    			<h:outputText value="CEP " /><br />
	            			<h:inputText value="#{EnderecoService.cep}" >
	            			<p:ajax event="blur" listener="#{EnderecoService.encontraEndereco}" update=":accordionendereco:painelendereco" />
						        
						        <p:focus for="numeroendereco" context="painelnumero" />
						    </h:inputText>
	
			    	</p:panel>
			    	</h:form>
			    	
			    	<p:panel style="border: 0px;">
			    		<h:outputText value="Logradouro" /><br />  
            			<p:inputText value="#{EnderecoService.logradouro}" />
			    	</p:panel>
			    	
			    	<p:panel style="border: 0px;" id="painelnumero">
			    		<h:outputText value="Número"  /><br />
            			<p:inputText id="numeroendereco" style="width: 40px;"/>
			    	</p:panel >
			    	
			    	<p:panel style="border: 0px;">
			    		<h:outputText value="Bairro" /><br />  
            			<p:selectOneMenu > 
            				<f:selectItem itemLabel="Selecione" itemValue="" />  
				            <f:selectItems value="#{EnderecoService.bairros}"   />   
				        </p:selectOneMenu>
			    	</p:panel>
			    	
			    	<p:panel style="border: 0px;">
			    		<h:outputText value="Cidade" /><br />  
            			<p:inputText />
			    	</p:panel>
			    	
			    	<p:panel style="border: 0px;">
			    		<h:outputText value="Estado" /><br />  
            			<p:inputText />
            			<p:commandButton actionListener="#{TelefoneService.addTelefone(TelefoneService.telefone)}" id="iconOnly" icon="ui-icon-circle-plus" title="Adicionar novo Status" style="left: 10px; font-size: 12px !important; "/>
			    	</p:panel>
			    	
			    </h:panelGrid>
			    
			    </p:tab>
		    </p:accordionPanel>

Agora so falta a questão do foco mesmo.. Se alguém souber...

Criado 10 de fevereiro de 2013
Ultima resposta 11 de fev. de 2013
Respostas 6
Participantes 2