Mudar o Foco do Controle Primefaces [RESOLVIDO]

11 de agosto de 2011 4 respostas

jrfercar 11 de agosto de 2011

Boa tarde a todos!

Agora estou com a seguinte situação.

Tenho um componente <p:inputMask> que permite a digitação de um CEP. Após digitar um CEP válido, cadastrado no BD, o sistema verifica no MB a existência do logradouro, traz os dados do logradouro, exibe os campos referentes ao País, Estado, Cidade, Bairro, Nome do Logradouro, Complemento e Número da Residência. Após isto ele deveria enviar o foco (cursor) do campo CEP (<p:inputMask) para o campo número (><p:inputText). Porém, isto não está acontecendo, e até agora eu não sei por que?

O interessante é que eu setei os parâmetros tabindex dos componentes para que eles seguissem uma sequencia e, além disso, estou utilizando o componente ><p:focus>, mas não está adiantando.

Preciso muito da ajuda de vocês, para resolver isto.

Desde já deixo meus agradecimentos a todos.

Segue abaixo o código referente a este problema:

&lt;p:panel id="pnlEndereco" header="Endereço" &gt;
                &lt;h:panelGrid columns="3" cellpadding="3"&gt;
                    &lt;h:outputLabel value="Código Postal " for="txtCep"/&gt;
                    &lt;p:inputMask id="txtCep" value="#{cadastroDePessoaBean.cep}" mask="99999-999" size="10" tabindex="5"&gt;
                        &lt;p:ajax event="blur" listener="#{cadastroDePessoaBean.atualizaLogradouro}" update="pnlEndereco" /&gt;
                        &lt;p:focus for="txtNumero" /&gt;
                    &lt;/p:inputMask&gt;
                    &lt;p:message for="txtCep" /&gt;
                    &lt;h:outputLabel value="Logradouro" for="txtLogradouro" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:outputText id="txtLogradouro" value="#{cadastroDePessoaBean.logradouro.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}" /&gt;
                    &lt;h:message for="txtLogradouro" /&gt;
                    &lt;h:outputLabel value="Número" for="txtNumero" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;p:inputText id="txtNumero" value="#{cadastroDePessoaBean.endereco.numero}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}" tabindex="5"&gt;
                        &lt;p:focus /&gt;
                    &lt;/p:inputText&gt;
                    &lt;p:message for="txtNumero" /&gt;
                    &lt;h:outputLabel value="Complemento" for="txtComplemento" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;p:inputTextarea id="txtComplemento" value="#{cadastroDePessoaBean.endereco.complemento}" cols="80" rows="5" rendered="#{cadastroDePessoaBean.renderizarLogradouro}" tabindex="6"/&gt;
                    &lt;p:message for="txtComplemento" /&gt;
                    &lt;h:outputLabel value="Bairro" for="txtBairro" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:outputText id="txtBairro" value="#{cadastroDePessoaBean.logradouro.bairro.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:message for="txtBairro" /&gt;
                    &lt;h:outputLabel value="Cidade" for="txtCidade" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:outputText id="txtCidade" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:message for="txtCidade" /&gt;
                    &lt;h:outputLabel value="Unidade Federativa" for="txtUF" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:outputText id="txtUF" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.unidadeFederativa.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:message for="txtUF" /&gt;
                    &lt;h:outputLabel value="País" for="txtPais" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:outputText id="txtPais" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.unidadeFederativa.pais.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:message for="txtPais" /&gt;
                &lt;/h:panelGrid&gt;
            &lt;/p:panel&gt;

4 Respostas

ayslanms 11 de ago. de 2011

Olá jrfercar,

Não sei o <p:focus> funciona dessa maneira.

O que você poderia fazer é diretamente com javascript (jQuery no caso, já que ele vem embutido no primefaces):

<p:inputMask id="txtCep" value="#{cadastroDePessoaBean.cep}" mask="99999-999" size="10" tabindex="5">  
            <p:ajax event="blur" listener="#{cadastroDePessoaBean.atualizaLogradouro}" update="pnlEndereco" oncomplete="jQuery('#txtNumero').focus()"  />    
</p:inputMask>

Se preferir não usar jQuery usa mesmo: document.getElementById(‘txtNumero’).focus()

jrfercar 12 de ago. de 2011

Bom dia,

obrigado pela dica, ayslanms.

A dica funcionou legal, o foco vai para o campo em questão, porém constatei que após o foco ir para ele, ele é perdido.

O código ficou assim após a alteração.

&lt;p:panel id="pnlEndereco" header="Endereço" &gt;
                &lt;h:panelGrid columns="3" cellpadding="3"&gt;
                    &lt;h:outputLabel value="Código Postal " for="txtCep"/&gt;
                    &lt;p:inputMask id="txtCep" value="#{cadastroDePessoaBean.cep}" mask="99999-999" size="10" tabindex="5"&gt;
                        &lt;p:ajax event="blur" listener="#{cadastroDePessoaBean.atualizaLogradouro}" update="pnlEndereco" oncomplete="document.getElementById('txtNumero').focus()" /&gt;
                    &lt;/p:inputMask&gt;
                    &lt;p:message for="txtCep" /&gt;
                    &lt;h:outputLabel value="Logradouro" for="txtLogradouro" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:outputText id="txtLogradouro" value="#{cadastroDePessoaBean.logradouro.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}" /&gt;
                    &lt;h:message for="txtLogradouro" /&gt;
                    &lt;h:outputLabel value="Número" for="txtNumero"/&gt;
                    &lt;p:inputText id="txtNumero" value="#{cadastroDePessoaBean.numero}" readonly="#{cadastroDePessoaBean.renderizarLogradouro}" tabindex="5"/&gt;
                    &lt;p:message for="txtNumero" /&gt;
                    &lt;h:outputLabel value="Complemento" for="txtComplemento" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;p:inputTextarea id="txtComplemento" value="#{cadastroDePessoaBean.endereco.complemento}" cols="80" rows="5" rendered="#{cadastroDePessoaBean.renderizarLogradouro}" tabindex="6"/&gt;
                    &lt;p:message for="txtComplemento" /&gt;
                    &lt;h:outputLabel value="Bairro" for="txtBairro" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:outputText id="txtBairro" value="#{cadastroDePessoaBean.logradouro.bairro.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:message for="txtBairro" /&gt;
                    &lt;h:outputLabel value="Cidade" for="txtCidade" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:outputText id="txtCidade" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:message for="txtCidade" /&gt;
                    &lt;h:outputLabel value="Unidade Federativa" for="txtUF" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:outputText id="txtUF" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.unidadeFederativa.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:message for="txtUF" /&gt;
                    &lt;h:outputLabel value="País" for="txtPais" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:outputText id="txtPais" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.unidadeFederativa.pais.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:message for="txtPais" /&gt;
                &lt;/h:panelGrid&gt;
            &lt;/p:panel&gt;

jrfercar 12 de ago. de 2011

Galera,

Consegui resolver o problema.

O foco saia fora do controle porque na tag p:ajax eu estava mandando atualizar todo o p:panel, desta forma atualizando todo o panel, inclusive os focos nos controles que estavam contidos nele.
Para resolver o problema eu separei o painel em duas partes, uma que contêm o campo CEP e o número, que estão contidos em um h:panelGrid com o nome de pnlCEP e outro com o nome pnlLogradouro.

Quando saio do controle txtCep ele atualiza apenas o pnlLogradouro. Percebam que o painel que contém o txtNumero não é atualizado, deixando o foco naturalmente nele.

Valeu pela ajuda.

Segue o código após a resolução do problema abaixo.

&lt;p:panel id="pnlEndereco" header="Endereço" &gt;
                &lt;h:panelGrid id="pnlCep" columns="5" cellpadding="5"&gt;
                    &lt;h:outputLabel value="Código Postal " for="txtCep"/&gt;
                    &lt;p:inputMask id="txtCep" value="#{cadastroDePessoaBean.cep}" mask="99999-999" size="10" tabindex="5"&gt;
                        &lt;p:ajax event="blur" listener="#{cadastroDePessoaBean.atualizaLogradouro}" update="pnlLogradouro pnlLogradouro1" /&gt;
                    &lt;/p:inputMask&gt;
                    &lt;h:outputLabel value="Número" for="txtNumero"/&gt;
                    &lt;p:inputText id="txtNumero" value="#{cadastroDePessoaBean.numero}" readonly="#{cadastroDePessoaBean.renderizarLogradouro}" tabindex="5"/&gt;
                    &lt;p:message for="txtCep" /&gt;
                &lt;/h:panelGrid&gt;
                &lt;p:separator /&gt;
                &lt;h:panelGrid id="pnlLogradouro" columns="3" cellpadding="3" &gt;
                    &lt;h:outputLabel value="Logradouro" for="txtLogradouro" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:outputText id="txtLogradouro" value="#{cadastroDePessoaBean.logradouro.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}" /&gt;
                    &lt;h:message for="txtLogradouro" /&gt;
                    &lt;h:outputLabel value="Complemento" for="txtComplemento" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;p:inputTextarea id="txtComplemento" value="#{cadastroDePessoaBean.endereco.complemento}" cols="80" rows="5" rendered="#{cadastroDePessoaBean.renderizarLogradouro}" tabindex="6"/&gt;
                    &lt;p:message for="txtComplemento" /&gt;
                    &lt;h:outputLabel value="Bairro" for="txtBairro" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:outputText id="txtBairro" value="#{cadastroDePessoaBean.logradouro.bairro.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:message for="txtBairro" /&gt;
                    &lt;h:outputLabel value="Cidade" for="txtCidade" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:outputText id="txtCidade" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:message for="txtCidade" /&gt;
                    &lt;h:outputLabel value="Unidade Federativa" for="txtUF" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:outputText id="txtUF" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.unidadeFederativa.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:message for="txtUF" /&gt;
                    &lt;h:outputLabel value="País" for="txtPais" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:outputText id="txtPais" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.unidadeFederativa.pais.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/&gt;
                    &lt;h:message for="txtPais" /&gt;
                &lt;/h:panelGrid&gt;
            &lt;/p:panel&gt;

joaopaulotds 21 de dez. de 2012

Passei por situação semelhante a de jrfercar, e a solução também serviu para mim. Agradeço pelo compartilhamento.

Criado 11 de agosto de 2011

Ultima resposta 21 de dez. de 2012

Respostas 4

Participantes 3

4 Respostas

Topicos relacionados