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

AnaCarolinaM · Novembro 19, 2012, 2:21pm

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á!

Aanderson · Novembro 19, 2012, 2:47pm

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 · Novembro 19, 2012, 2:50pm

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 · Novembro 19, 2012, 2:59pm

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 · Novembro 20, 2012, 9:18am

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 · Novembro 20, 2012, 9:40am

[quote=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á![/quote]

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 · Novembro 20, 2012, 9:41am

<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 · Novembro 20, 2012, 9:48am

Muiro Obrigada Aanderson e Valeio Bezerra !
entendi sim

hmsilva · Novembro 20, 2012, 10:21am

Ana,

[code]<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}" /> [/code]

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 · Novembro 20, 2012, 11:03am

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 · Novembro 20, 2012, 11:06am

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 · Novembro 20, 2012, 11:12am

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!

[code] <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>[/code]

luizcmjr · Novembro 20, 2012, 11:30am

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 · Novembro 20, 2012, 11:33am

[quote=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!

[code] <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>[/code][/quote]

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 · Novembro 20, 2012, 2:05pm

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

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

luizcmjr · Novembro 20, 2012, 2:13pm

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.

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

[/code]

Abraços

Aanderson · Novembro 20, 2012, 3:09pm

[quote=AnaCarolinaM]o código continua a não funcionar!
a linha fica sublinhado de amarelinho!

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

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 · Novembro 21, 2012, 9:45am

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 · Novembro 21, 2012, 9:58am

[quote=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![/quote]

Posta o Bean…

AnaCarolinaM · Novembro 21, 2012, 11:12am

[code]public void limiteporAvaliacao(ActionEvent actionEvent) throws Exception {

	if (inLimiteAvaliacao) {
		limiteporAvaliacao = false;
		
	} else {
		limiteporAvaliacao = true;
		
	}
	
}[/code]

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

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

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI