Clicando no checkbox e habilitando um campo de texto usando Ajax (JSF)

19 de novembro de 2012 23 respostas

AnaCarolinaM 19 de novembro de 2012

Olá boa tarde!

Sou iniciante em Java, e gostaria de uma ajudinha! rsrs
Estou precisando fazer que quando clico em um ckeckbox automaticamente habilite um campo de texto e vice-versa.
Só que eu precisaria usar o Ajax (pedido do chef, rs) estou fazendo o desenvolvimento em JSF.

Se poderem me ajudar, agradeço desde já!

23 Respostas

Aanderson 19 de nov. de 2012

Tenho algo semelhante aqui, só que ao invés de checkbox uso o radiobox…

&lt;h:selectOneRadio value="#{bean.valor}" &gt;
   &lt;f:selectItem itemValue="valor1" itemLabel="valor 1"/&gt;
   &lt;f:selectItem itemValue="valor2" itemLabel="valor 2"/&gt;
   &lt;p:ajax listener="#{bean.metodo}" update="mostrar"/&gt;
&lt;/h:selectOneRadio&gt;

&lt;p:inputText id="mostrar" value="#{bean.qualquer}" rendered="#{bean.mostrar}" /&gt;

No seu bean vai ter algo como:

public void metodo(){
 if(valor == valor 1){
    mostrar = true;
} else {
   mostrar = false;
}
}

AmauriSpPoa 19 de nov. de 2012

Eu faria via javascript

&lt;h:form id="form1"&gt;
            &lt;h:inputText id="hit" /&gt;
            &lt;h:selectBooleanCheckbox id="hsbc" onchange="javascript:teste();"/&gt;             
        &lt;/h:form&gt;


       &lt;script type="text/javascript"&gt;
            function teste(){
                if(document.getElementById('form1:hsbc').checked){
                document.getElementById('form1:hit').setAttribute("readonly",true );
                }else{
                    document.getElementById('form1:hit').removeAttribute("readonly");
                }
            }
        &lt;/script&gt;

hmsilva 19 de nov. de 2012

Ana,

Acho interessante você usar a solução que o Anderson sugeriu ja que vc está utilizando o JSF.
O JSF te possibilita utilizar o ajax de uma maneira muito simples e limpa já pra evitar que o código fique sujo de scripts indesejados.

Te aconselho a dar uma olhadinha no primefaces (http://primefaces.org/) … pro JSF acho que é o melhor framework de apoio e a documentação é ótima.

da um look nos demos que eles disponibilizam : http://www.primefaces.org/showcase-labs/ui/home.jsf

AnaCarolinaM 20 de nov. de 2012

Aanderson você poderia me tirar uma dúvida?
eu não entendi o update=“mostrar” , e depois o rendered="#{bean.mostrar}" …
não estou conseguindo entender, e no managerbean também, eu não estou sabendo o que colocar no lugar do mostrar…

Por enquanto o meu código está assim:

<h:selectBooleanCheckbox
value="#{pc_ManterConfiguracaoAvaliacao.parametroModal.inLimiteAvaliacao}"
id=“limitePorAvaliacao”>
<ajax:commandLink actionListener="#{ManterConfiguracaoAvaliacao.limiteporAvaliacao}"
reRender=“mostrar” >
<f:selectItem itemValue=“valor1” itemLabel=“valor 1”/>
<f:selectItem itemValue=“valor2” itemLabel=“valor 2”/>
</ajax:commandLink>
</h:selectBooleanCheckbox>

<h:outputText styleClass=“outputText” id=“lblLimitePorAvaliacao”
value=“Limite por Avaliação” />

<h:inputText styleClass=“inputText” id=“prLimitePorAvaliacao”
style=“width: 100%” rendered="#{bean.mostrar}"
value="#{pc_ManterPergunta.parametroModal.qnLimiteAvaliacao}">
</h:inputText>

Será que você poderia me ajudar?

Agradeço, desde já!

Aanderson 20 de nov. de 2012

AnaCarolinaM:
Aanderson você poderia me tirar uma dúvida?
eu não entendi o update=“mostrar” , e depois o rendered="#{bean.mostrar}" …
não estou conseguindo entender, e no managerbean também, eu não estou sabendo o que colocar no lugar do mostrar…

Será que você poderia me ajudar?

Agradeço, desde já!

Vamos lá AnaCarolinaM…

Como sitado pelo colega hmsilva, minha dica foi utilizando o framework primefaces que vai facilitar muito sua vida, quanto ao uso de ajax.

update="mostrar"

Refere-se ao Id do campo que você vai mostrar ou ocultar via ajax.

rendered="#{bean.mostrar}"

Você está “falando” que esse componente vai ser renderizado (exibido/mostrado) na página de acordo com o valor do atributo mostrar, que existe no seu ManagedBean, cujo o nome é bean.

Repare que dentro do <h:selectOneRadio> no caso, existe um <p:ajax>

<p:ajax listener="#{bean.metodo}" update="mostrar"/>

Esse <p:ajax> irá ficar “ouvindo” o método de nome metodo() do seu ManagedBean.

Então, quando você selecionar um valor para o selectOneRadio, o ajax vai ser disparado e vai ver se você selecionou o valor1 ou o valor2 e vai jogar no seu atributo mostrar o valor booleano true ou false. Quando o método terminar de ser executado, o ajax vai atualizar o que você colocar no campo “update”, no caso o componente de id=“mostrar”.

Como o componente será atualizado o rendered dele, receberá o novo valor, sendo exibido se o valor for “true” e escondido se valor for “false”.

Deu pra entender?

Valeio_Bezerra 20 de nov. de 2012

<h:selectOneRadio value="#{bean.valor}" >  
   <f:selectItem itemValue="valor1" itemLabel="valor 1"/>  
   <f:selectItem itemValue="valor2" itemLabel="valor 2"/>  
   <p:ajax listener="#{bean.metodo}" update="mostrar"/>  
</h:selectOneRadio>  
  
<p:inputText id="mostrar" value="#{bean.qualquer}" rendered="#{bean.mostrar}" />

Ana, esse update=“mostrar” significa que vai atualizar o estado do seu componente, seja com valores, habilitado ou não. Já o rendered="#{bean.mostrar}", se não me engano(faz tempo que não pego com jsf) é pra exibir ou não de acordo com a variável mostrar da bean.

Repare que a id do inputText está como “mostrar” que é o mesmo do update do ajax.

AnaCarolinaM 20 de nov. de 2012

Muiro Obrigada Aanderson e Valeio Bezerra !
entendi sim

hmsilva 20 de nov. de 2012

Ana,

<h:selectOneRadio value="#{bean.valor}" >    
   <f:selectItem itemValue="valor1" itemLabel="valor 1"/>    
   <f:selectItem itemValue="valor2" itemLabel="valor 2"/>    
   <p:ajax listener="#{bean.metodo}" update="mostrar"/>    
</h:selectOneRadio>    
    
<p:inputText id="mostrar" value="#{bean.qualquer}" rendered="#{bean.mostrar}" />

De uma forma básica o trecho de código:

<p:ajax listener="#{bean.metodo}" update="mostrar"/>

É uma função do primefaces que fica escutando os eventos do componente e invocando um metodo, neste caso o bean.metodo.

public void metodo(){  
   if(valor == valor 1){  
      mostrar = true;  
   } else {  
      mostrar = false;  
   }  
}

O atributo "valor" do seu bean será setado com o valor selecionado no componente "selectOneRadio".
No metodo, um if será executado e o atributo booleano 'mostrar' será atribuido de acordo com a lógica aplicada no if.

<p:ajax listener="#{bean.metodo}" update="mostrar"/>

Após a função "listener" terminar de ser executada a função "update" será invocada. O update, como o proprio nome ja diz, irá atualizar(re-carregar) o componente informado.(no caso o mostrar)

<p:inputText id="mostrar" value="#{bean.qualquer}" rendered="#{bean.mostrar}" />

O componente iputText mostrar será atualizado e a função rendered será executata.

rendered="#{bean.mostrar}"

rendered é uma função booleana que defini se o componente será ou não exibido.

Resumidamente:
Um ajax e executado setando o valor do atributo mostrar.
O componente input e atualizado é validado se ele deve ou não ser exibido

AnaCarolinaM 20 de nov. de 2012

então gente, o código abaixo não está dando certo, ele fica dando uma linha amarelinha, dizendo que não pode ser usado!
o que eu faço?

<p:ajax listener="#{ManterConfiguracaoAvaliacao.limiteporAvaliacao}" update="mostrar" />

Aanderson 20 de nov. de 2012

Posta seu código inteiro…

Componente que vai ser mostrado ou não, com o id="mostrar"…

Método que seta o valor, no caso "limiteporAvaliacao" -> public void limiteporAvaliacao(){}

Componente que recebe o valor… nos exemplos usamos selectOneMenu…

AnaCarolinaM 20 de nov. de 2012

então na verdade, eu só preciso que habilite ou desabilite e não que desapareça nenhum componente!
e se eu clicar no checkbox preciso que habilite, caso ao contrario continue desabilitado!

<h:selectBooleanCheckbox 
									value="#{pc_ManterConfiguracaoAvaliacao.parametroModal.inLimiteAvaliacao}"
									id="limitePorAvaliacao">																	   
  								<f:selectItem itemValue="valor1" itemLabel="valor 1"/>   
  								<f:selectItem itemValue="valor2" itemLabel="valor 2"/> 
  								<p:ajax listener="#{ManterConfiguracaoAvaliacao.limiteporAvaliacao}" 
  								update="mostrar" />
								
				<</h:selectBooleanCheckbox>   
								
								<h:outputText styleClass="outputText" id="lblLimitePorAvaliacao"
									value="Limite por Avaliação" /></td>

								<td valign="top" colspan="25"><h:inputText
									styleClass="inputText" id="mostrar"
									style="width: 100%" rendered="mostrar"									
									value="#{pc_ManterConfiguracaoAvaliacao.parametroModal.qnLimiteAvaliacao}">
								</h:inputText>

luizcmjr 20 de nov. de 2012

Olá,

alem das dicas acima, veja se esse outro post http://www.guj.com.br/java/235494-resolvido-habilitar-e-desabilitar-pinputtext–por-um-hselectbooleancheckbox, não pode te ajudar tambem.

Abraços.

Aanderson 20 de nov. de 2012

AnaCarolinaM:

então na verdade, eu só preciso que habilite ou desabilite e não que desapareça nenhum componente! e se eu clicar no checkbox preciso que habilite, caso ao contrario continue desabilitado!

<h:selectBooleanCheckbox 
									value="#{pc_ManterConfiguracaoAvaliacao.parametroModal.inLimiteAvaliacao}"
									id="limitePorAvaliacao">																	   
  								<f:selectItem itemValue="valor1" itemLabel="valor 1"/>   
  								<f:selectItem itemValue="valor2" itemLabel="valor 2"/> 
  								<p:ajax listener="#{ManterConfiguracaoAvaliacao.limiteporAvaliacao}" 
  								update="mostrar" />
								
				<</h:selectBooleanCheckbox>   
								
								<h:outputText styleClass="outputText" id="lblLimitePorAvaliacao"
									value="Limite por Avaliação" /></td>

								<td valign="top" colspan="25"><h:inputText
									styleClass="inputText" id="mostrar"
									style="width: 100%" rendered="mostrar"									
									value="#{pc_ManterConfiguracaoAvaliacao.parametroModal.qnLimiteAvaliacao}">
								</h:inputText>

Ana, Como você não quer mostrar/ocultar o campo e sim habilitar/desabilitar, você vai usar o disabled no lugar do rendered...

ManagedBean

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package view.managedBeans;

import javax.faces.bean.ManagedBean;

/**
 *
 * @author Anderson
 */
@ManagedBean(name = "teste")
public class Teste {
    
    private boolean inLimiteAvaliacao;
    private String valor;
    private boolean mostrar = true;
    
    
    public void limiteAvaliacao(){
        if(inLimiteAvaliacao){
            mostrar = false;
        } else {
            mostrar = true;
        }
    }

    public boolean isInLimiteAvaliacao() {
        return inLimiteAvaliacao;
    }

    public void setInLimiteAvaliacao(boolean inLimiteAvaliacao) {
        this.inLimiteAvaliacao = inLimiteAvaliacao;
    }

  
    public boolean isMostrar() {
        return mostrar;
    }

    public void setMostrar(boolean mostrar) {
        this.mostrar = mostrar;
    }

    public String getValor() {
        return valor;
    }

    public void setValor(String valor) {
        this.valor = valor;
    }
    
    
    
}

XHTML

<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<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:p="http://primefaces.org/ui"
      xmlns:stella="http://stella.caelum.com.br/faces2"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>TODO supply a title</title>
    </h:head>
    <body>
        <h:form>
            <h:outputLabel for="teste" value="Clique para ativar ou desativar o campo" /><br/>
            <h:selectBooleanCheckbox id="teste" value="#{teste.inLimiteAvaliacao}">
                <f:selectItem itemValue="valor1" itemLabel="valor 1"/>
                <f:selectItem itemValue="valor2" itemLabel="valor 2"/>
                <p:ajax listener="#{teste.limiteAvaliacao}" update="mostrar"/>
            </h:selectBooleanCheckbox>
            <br/>
            <h:outputLabel for="mostrar" value="Campo será habilitado ou não, conforme clique no checkbox"/>
            <h:inputText id="mostrar" disabled="#{teste.mostrar}" value="#{teste.valor}"/>
        </h:form>
    </body>
</html>

AnaCarolinaM 20 de nov. de 2012

o código continua a não funcionar!
a linha fica sublinhado de amarelinho!

<p:ajax listener="#{ManterConfiguracaoAvaliacao.parametroModal.limiteporAvaliacao}" update="mostrar" />

luizcmjr 20 de nov. de 2012

Olá Ana, verifique se adicionou corretamente a biblioteca do primefaces no seu projeto e se tambem está utilizando a URI do prime correta também blza.

<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:ui="http://java.sun.com/jsf/facelets"  
      xmlns:h="http://java.sun.com/jsf/html"  
      [b]xmlns:p="http://primefaces.org/ui"[/b]>  
</html>

Abraços

Aanderson 20 de nov. de 2012

AnaCarolinaM:
o código continua a não funcionar!
a linha fica sublinhado de amarelinho!

<p:ajax listener="#{ManterConfiguracaoAvaliacao.parametroModal.limiteporAvaliacao}" update="mostrar" />

no <p:ajax>, “limiteporAvaliacao” é um método certo?

Essa chamada me parece ser de um atributo. O Listener do p:ajax, espera um método para ficar “ouvindo”.

AnaCarolinaM 21 de nov. de 2012

sim, coloquei o método!
mas mesmo assim continua dando a linha amarela, e está dando um erro dizendo que a classe ‘pagecode.managebeans.ManterConfiguracaoAvaliacao’ não tem a propriedade ‘limiteporAvaliacao’.

e está tudo criado no bean!

Aanderson 21 de nov. de 2012

AnaCarolinaM:
sim, coloquei o método!
mas mesmo assim continua dando a linha amarela, e está dando um erro dizendo que a classe ‘pagecode.managebeans.ManterConfiguracaoAvaliacao’ não tem a propriedade ‘limiteporAvaliacao’.

e está tudo criado no bean!

Posta o Bean…

AnaCarolinaM 21 de nov. de 2012

public void limiteporAvaliacao(ActionEvent actionEvent) throws Exception {

		if (inLimiteAvaliacao) {
			limiteporAvaliacao = false;
			
		} else {
			limiteporAvaliacao = true;
			
		}
		
	}

A parte do JSF parece que está certo...
Só estou com prolemas na criação do código no bean... =/

Aanderson 21 de nov. de 2012

AnaCarolinaM:

public void limiteporAvaliacao(ActionEvent actionEvent) throws Exception {

		if (inLimiteAvaliacao) {
			limiteporAvaliacao = false;
			
		} else {
			limiteporAvaliacao = true;
			
		}
		
	}

A parte do JSF parece que está certo...
Só estou com prolemas na criação do código no bean... =/

Seu método e seus atributos tem o mesmo nome... não pode...

Faz assim...

public void activeLimiteporAvalicao(){ //Não precisa do ActionEvent actionEvent... pode tirar (Repare que mudei o nome do método pra não ficar igual ao atributo
if (inLimiteAvaliacao) {
			limiteporAvaliacao = false;
			
		} else {
			limiteporAvaliacao = true;
			
		}
}

//não esquece de gerar o getter and setter da variável limiteporAvaliacao

no ajax vai chamar...

<p:ajax listener="#{ManterConfiguracaoAvaliacao.parametroModal.activeLimiteporAvaliacao}"   
                                update="mostrar" />

AnaCarolinaM 21 de nov. de 2012

então, eu tentei usar esse <p:ajax> e não está dando certo, não está aceitando aqui… e não sei o porque. Então estou usando o ajax:support.
está fazendo a mesma coisa que o ajax que você falou para eu usar!

e no bean está do jeito que você falou pra eu fazer, e mesmo assim não está dando certo.

Aanderson 21 de nov. de 2012

AnaCarolinaM:
então, eu tentei usar esse <p:ajax> e não está dando certo, não está aceitando aqui… e não sei o porque. Então estou usando o ajax:support.
está fazendo a mesma coisa que o ajax que você falou para eu usar!

e no bean está do jeito que você falou pra eu fazer, e mesmo assim não está dando certo.

Não conheco ajax:support, mas pode fazer um debugger pra ver onde está o problema. Se ainda tem alguma coisa em “amarelinho”, verifica qual é o alerta que a IDE está dando…

Alguns posts atrás, eu postei um código completo, uma classe Teste e um XHTML. Aquilo é um exemplo funcional do que você quer fazer…

Então minha sugestão é que rode aquele código para ver como funciona e observar o que foi feito.

C.Brown 16 de abr. de 2014

Gostaria de Aproveitar a questão e perguntar, como ficaria se eu quisesse habilitar/desabilitar dois inputText ao mesmo tempo?

Criado 19 de novembro de 2012

Ultima resposta 16 de abr. de 2014

Respostas 23

Participantes 7

23 Respostas

Topicos relacionados