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?
<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>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.
<h:input onblur="document.getElementyById('idForm:idCampoNumero').focus();"/>Mas tmbm existem outras alternativas, essa foi a primeira q veio em mente.
Testei o seguinte
[code]<p:panel style=“border: 0px;” >
<h:outputText value=“CEP " />
<h:inputText value=”#{EnderecoService.cep}" >
<f:ajax event=“blur” listener="#{EnderecoService.encontraEndereco}" render=“painelendereco” />
</h:inputText>
<p:focus for="numeroendereco" context="painelnumero" />
</p:panel>[/code]
Porém, antes disso, no começo da página, tinha um <p:focus> 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á.
[code]<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>[/code]
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?
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 ?
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.
[code]<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>[/code]
Agora so falta a questão do foco mesmo… Se alguém souber…