Habilitar e Desabilitar campo Text (valueChangeListener) ou Jquery!

[rrodrigues]

Pessoal faz uma semana que estou com um probleminha na minha
aplicação onde tenho que usar o (valueChangeListener) UIComponent do
JSF ou JQuery, a possibilidade de alguém indicar uma fonte de pesquisa
ou livros com exemplos pra utiliza- los, não achei quase nada sobre
"valueChangeListener". NÃO ENCONTREI UMA SOLUÇÃO AGUEM PODE AJUDAR???

Tenho esse Radio na minha página de consulta que disponibiliza duas
opções de seleção por "Nome" ou "Código", se o usuário escolher Nome o
Radio habilita uma inputTex Nome. Se o usuario escolher Codigo o Radio
habilita uma input Codigo.

<h:selectOneRadio id="rbselecionar"
value="#{suppliersList.searchOption}" styleClass="font">
<f:selectItems id="nome"
value="#{suppliersList.searchOptions}" itemValue="1"/>
</h:selectOneRadio>

<h:outputText value="Nome:" styleClass="font"/>
<h:inputText id="consultarnome"
value="#{suppliersList.searchValue}" size="60" styleClass="font"
required="true"/><br/><br/>

<h:outputText value="Codigo:" styleClass="font"/>
<h:inputText id="consultarnome"
value="#{suppliersList.searchValue}" size="60" styleClass="font"
required="true"/><br/><br/>

[Marco André Machado]

Bom dia, uma solução possível para você seria essa:

De acordo com a opção selecionada pelo usuário, apenas o conteúdo do
label seria alterado(nesse caso, o conteúdo do label seria "Nome" ou
"Codigo"). O campo input ficaria inalterado. Na hora de realizar a
busca, o conteúdo do input seria passado, juntamente com a opção para
realizar a busca correta.

Espero que isso lhe ajude

[Fernando]

Esqueci de dizer que talvez precise colocar os atributos
onchange="submit()" e immediate="true" no h:selectOneRadio.

[Fernando]

Cara uma forma de resolver seria:

dentro do h:selectOneRadio coloque o atributo valueChangeListener que
apontará para um método no seu bean.No método do seu bean vc verifica
o value desse radio e ai renderiza ou habilita o input que vc quer.
Mostrando um ex ficaria assim:

<h:selectOneRadio id="rbselecionar"
value="#{suppliersList.searchOption}" styleClass="font"

valueChangeListener="#{seuBean.verificarTipoPesquisa}">

<f:selectItems id="nome"
value="#{suppliersList.searchOptions}" itemValue="1"/>
</h:selectOneRadio>

<h:panelGroup rendered="#{seuBean.campoPesquisa}">

<h:outputText value="Nome:" styleClass="font"/>
<h:inputText id="consultarnome"
value="#{suppliersList.searchValue}" size="60" styleClass="font"
required="true"/><br/><br/>

</h:panelGroup>

<h:panelGroup rendered="#{seuBean.campoPesquisa}">

<h:outputText value="Codigo:" styleClass="font"/>
<h:inputText id="consultarnome"
value="#{suppliersList.searchValue}" size="60" styleClass="font"
required="true"/><br/><br/>

</h:panelGroup>

no seu bean vc vai ter um boolean , no ex ai foi o campoPesquisa
colocado no panelGroup e o método do valueChangeListener:

public void verificarTipoPesquisa(final ValueChangeEvent e) {
if (e.getNewValue() != null && !
e.getNewValue().toString().trim().equals("")) {
if (e.getNewValue....bem aqui vc faz sua comparação pra
saber qual opção escolheu lá no radio) ) {
campoPesquisa = true; <---um ex
} else {
campoPesquisa = false;
}
}

}
bem....é mais ou menos isso ai.

Qualquer dúvida posta ai...

att,

[rrodrigues]

Fernando, fiz o que me indicou so que quando eu seleciono "nome" não
habilita nada na página, mais quando seleciono "codigo" ele esta
habilitando os dois inputText e como os dois estão com requered "true"
tenho que digitar um valor qualquer em "nome" e valor permitido para
"codigo", o meu código encontra- se abaixo pra ficar melhor a analise.

Código da página

<h:selectOneRadio id="rbselecionar"
value="#{suppliersList.searchOption}" styleClass="font"

valueChangeListener="#{suppliersList.verificarTipoPesquisa}"
onchange="submit()" immediate="true">
<f:selectItems id="consulta"
value="#{suppliersList.searchOptions}" />

</h:selectOneRadio>
<h:panelGroup
rendered="#{suppliersList.campoPesquisa}">

<rich:spacer height="10"/>
<rich:separator height="2" lineType="solid"/
><br/>

<h:outputText value="Nome:" styleClass="font"/
>
<h:inputText id="consultarnome"
value="#{suppliersList.searchValue}" size="60" styleClass="font"
required="true"/><br/><br/>
</h:panelGroup>

<h:panelGroup

rendered="#{suppliersList.campoPesquisa}">

<h:outputText value="Codigo:"
styleClass="font"/>

<h:inputText id="consultarcodigo"

value="#{suppliersList.searchValue}" size="60" styleClass="font"
required="true"/><br/><br/>
</h:panelGroup>

Manager Bean

private static SelectItem[] searchOptions = {
new SelectItem(FactoryCadastrarSecretaria.rbpesquisarnome,
"Nome"),
new SelectItem(FactoryCadastrarSecretaria.rbpesquisarcodigo,
"Codigo")
};

public void verificarTipoPesquisa(final ValueChangeEvent e) {
if (e.getNewValue() != null && !
e.getNewValue().toString().trim().equals("")) {

if (getSearchOption() == 1 ) {
e.getNewValue().equals(true);
campoPesquisa = true;

} else
{
campoPesquisa = false;
}
}

Código classe onde declarei as opções para radio;

public class FactoryCadastrarSecretaria

public static final int rbpesquisarnome = 1;
public static final int rbpesquisarcodigo = 2;

[Fernando]

Cara é só uma pequena mudança a ser feita:

modifica essa parte do teu código para essa abaixo:

<h:panelGroup
rendered="#{!suppliersList.campoPesquisa}">

<h:outputText value="Codigo:"
styleClass="font"/>
<h:inputText id="consultarcodigo"
value="#{suppliersList.searchValue}" size="60" styleClass="font"
required="true"/><br/><br/>
</h:panelGroup>

Se tu perceber o que eu mudei foi que, coloquei uma negação lá no
rendered do panelGroup, que é aquele ponto de exclamação. Isso foi
feito para a lógica de renderizar os componentes, ou seja, quando tu
entrar na página o campo de pesquisa código já vem renderizado e só se
tu selecionar por nome é que o input do nome é renderizado e o do
código irá "sumir".

Não sei se ao entrar na página algum do seus botões rádio já vem
selecionado, se não vier vc pode colocar o do código para vir
selecionado, já que o input do código já vem renderizado.

Como você me disse que está iniciando te aconselho a posteriormente
retirar da página os required e validar se os campos estão preenchidos
no bean. Isso porque você não amarra suas validações na camada da web.
Bem, mas isso pode ser mais na frente...

Qualquer dúvida ai pode mandar.

Att,

[rrodrigues]

Fernando muito obrigado mesmo cara consegui fazer funcionar não sei se
essa maneira é a correta, mais até aonde testei esta funcionando: (se
tiver outra maneira eu testo aqui também!)

Código Página

<h:selectOneMenu id="rbselecionar"

value="#{suppliersList.searchOption}" styleClass="font"

valueChangeListener="#{suppliersList.verificarTipoPesquisa}"
onchange="submit()" immediate="true">
<f:selectItems id="consulta"
value="#{suppliersList.searchOptions}" />

</h:selectOneMenu>

<rich:spacer height="10" width="20"/>

<h:panelGroup
rendered="#{suppliersList.campoPesquisa}">
<h:outputText value="Codigo:"
styleClass="font"/>

<h:inputText id="consultarnome"
value="#{suppliersList.searchValue}" size="60" styleClass="font"
required="true"/>

</h:panelGroup>

<h:panelGroup
rendered="#{suppliersList.campoPesquisac}">

<h:outputText value="Nome:"
styleClass="font"/>

<h:inputText id="consultarcodigo"
value="#{suppliersList.searchValue}" size="60" styleClass="font"
required="true"/>

</h:panelGroup>

Manager Bean

public void verificarTipoPesquisa(final ValueChangeEvent e) {
if (e.getNewValue() != null && !
e.getNewValue().toString().trim().equals("")) {

if (getSearchOption() == 1 && getSearchOption() != 2) {

campoPesquisa = true;
campoPesquisac = false;
} else{

} if (getSearchOption() == 2 && getSearchOption()!=1){
campoPesquisac = true;
campoPesquisa = false;
}else{

> > > att,- Ocultar texto das mensagens anteriores -
>
> - Mostrar texto das mensagens anteriores -

[Fernando]

Pode ser assim também, mas ai você vai está com duas variáveis para
gerenciar ao invés de apenas uma. Uma forma boa de resolver foi como
falei anteriormente, mas a sua também é uma alternativa.

Att,

[rrodrigues]

Fernando, testei a sua indicação com somente uma variável, mais so
esta habilitando o inputText nome e o inputText codigo não habilita,
por isso coloquei uma segunda váriavel. E também não coloqeui no
metodo o e.getNewValue(); porque ele da um erro de incompatibilidade
de objeto com tipo primitivo. Da forma que eu fiz ã página não inicia
com nenhum inputText habilitado e so aparece algum na página se eu
selecionar primeiro o código e depois o nome.

> > > - Mostrar texto das mensagens anteriores -- Ocultar texto das mensagens anteriores -

[Fernando]

Fala Roberto,

Estranho não habilitar o input do código...e esse erro ai de
incompatibilidade teria q ver também...

Agora esse de tu ter que selecionar primeiro o código pra depois o
nome, não deveria ser assim, pois impede que se possa acessar primeiro
o nome.

Cara se você quiser pode postar o código pra ver se eu vejo uma
solução, ou se já estiver funcionando e você quiser deixar assim ou
ainda você mesmo tentar ver uma solução, fica a vontade.

Att,

[rrodrigues]

Fernando estou postando aqui o codigo que eu fiz se for possivel faz
um teste ae por favor!

Código Página

</h:selectOneMenu>
<rich:spacer height="10" width="20"/>

<h:panelGroup
rendered="#{suppliersList.campoPesquisa}">
<h:outputText value="Codigo:"
styleClass="font"/>

<h:inputText id="consultarcodigo"
value="#{suppliersList.searchValuei}" size="60" styleClass="font"
required="true>
<f:convertNumber integerOnly="true"/>

</h:inputText>

</h:panelGroup>

<h:panelGroup
rendered="#{suppliersList.campoPesquisac}">
<h:outputText value="Nome:"
styleClass="font"/>

<h:inputText id="consultarnome"
value="#{suppliersList.searchValue}" size="60" styleClass="font">

</h:inputText>
</h:panelGroup>

public void verificarTipoPesquisa(final ValueChangeEvent e) {

if (e.getNewValue() != null && !
e.getNewValue().toString().trim().equals("")) {
if (getSearchOption() == 1 && getSearchOption() != 2) {

campoPesquisa = true;
campoPesquisac = false;

e.getNewValue();

} else {

} if (getSearchOption() == 2 && getSearchOption()!=1){
campoPesquisac = true;
campoPesquisa = false;

e.getNewValue();
}else{

[rrodrigues]

Boa Tarde Fernando é possivel dar uma verificada no código que postei
aqui, porque so habilita quando clico no OneMenu codigo e depois
seleciono Nome ai sim habilita na página o Input. Se for possivel dar
uma verificada!

Desde já agradeço a sua boa vontade.

> > Att,- Ocultar texto das mensagens anteriores -

[Fernando]

Cara,

O que tu tem aparecendo nesse ondeMenu ?

Posta o código do teu managedbean mais completo.

Att,

[rrodrigues]

No OneMenu esta aparecendo Nome e Codigo.
Desculpa o encomodo!

O codigo do managerBen com pleto conforme solicitado:

private static SelectItem[] searchOptions = {
new SelectItem(FactoryCadastrarSecretaria.rbpesquisarnome,
"Nome"),
new SelectItem(FactoryCadastrarSecretaria.rbpesquisarcodigo,
"Codigo")
};

//------------------------------------------

public void verificarTipoPesquisa(final ValueChangeEvent e) {

if (e.getNewValue() != null && !
e.getNewValue().toString().trim().equals("")) {

if (getSearchOption() == 1 && getSearchOption() != 2) {

campoPesquisac = true;
campoPesquisa = false;
e.getNewValue();
} else {

if (getSearchOption() == 2 && getSearchOption() != 1)
{

campoPesquisa = true;
campoPesquisac = false;
e.getNewValue();
} else {
}
}
}}

public boolean isCampoPesquisac() {
return campoPesquisac;
}

public void setCampoPesquisac(boolean campoPesquisac) {
this.campoPesquisac = campoPesquisac;
}

public boolean isCampoPesquisa() {
return campoPesquisa;
}

public void setCampoPesquisa(boolean campoPesquisa) {
this.campoPesquisa = campoPesquisa;
}

public Secretaria getListarTodos() {
return listarTodos;
}

public void setListarTodos(Secretaria listarTodos) {
this.listarTodos = listarTodos;
}

//------------------------------------------
public int getSearchOption() {
return this.searchOption;
}

public void setSearchOption(int value) {
this.searchOption = value;
}

public String getSearchValue() {
return searchValue;
}

public void setSearchValue(String value) {
this.searchValue = value;
}

public int getSearchValuei() {
return searchValuei;
}

public void setSearchValuei(int searchValuei) {
this.searchValuei = searchValuei;
}

public boolean isIncremental() {
return this.incremental;
}

public void setIncremental(boolean value) {
this.incremental = value;
}
private List<ConsultaCriteria> parameters;

private List<ConsultaCriteria> getParameters() {
if (parameters == null) {
parameters = new Vector<ConsultaCriteria>();
}
return this.parameters;
}

private void setParameters(List<ConsultaCriteria> value) {
this.parameters = value;
}

public String search() {
if (!isIncremental()) {
setParameters(null);
}
ConsultaCriteria parameter = new
ConsultaCriteria(getSearchOption(), getSearchValue(),
getSearchValuei());
getParameters().add(parameter);
try {
setFunsecretaria(new
FactoryCadastrarSecretaria().getCadSec(getParameters()));
} catch (Exception ex) {
setParameters(null);
}
return null;
}

public SelectItem[] getSearchOptions() {
return searchOptions;
}

public String showSecretaria() {
CadastrarSecretaria secret = (CadastrarSecretaria)
FacadeWeb.getRequestAttribute("secret");
if (secret != null) {
FacadeWeb.setSessionAttribute("secret", secret);
return "showSecretaria";
}
return null;
}
private List<CadastrarSecretaria> funsecretaria;

public List<CadastrarSecretaria> getfunsecretaria() {
if (this.funsecretaria == null) {
FactoryCadastrarSecretaria factory = new
FactoryCadastrarSecretaria();
List<ConsultaCriteria> crits = new
Vector<ConsultaCriteria>();
crits.add(new
ConsultaCriteria(FactoryCadastrarSecretaria.rbpesquisarnome, "",
FactoryCadastrarSecretaria.rbpesquisarcodigo));
setFunsecretaria(factory.getCadSec(crits));
}
return this.funsecretaria;
}

public String listAll() {
setFunsecretaria(null);
return null;
}

public List<CadastrarSecretaria> getFunsecretaria() {
return funsecretaria;
}

public void setFunsecretaria(List<CadastrarSecretaria>
funsecretaria) {
this.funsecretaria = funsecretaria;
}

public void setconsulta(List<CadastrarSecretaria> value) {
this.funsecretaria = value;

[Fernando]

Incômodo não cara,

Demoro as vezes porque ando meio ocupado, mas precisando...

Roberto, eu não cheguei a testar teu código porque teria que examinar
direito e ainda não esotu com muito tempo, então fiz um exemplo de
como seria e tu testa ai e vê se atende o que tu quer. Fiz utilizando
o radio em vez do onemenu...

Bean:

package br.com.cogerh.gemed.web.controle;

import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.event.ValueChangeEvent;
import javax.faces.model.SelectItem;


public class Pesquisa {

private boolean pesquisaPorNome;

private Integer codigo;

private String nome;

private boolean value;

private List<SelectItem> tiposPesquisa;

@PostConstruct
public void init(){
pesquisaPorNome = true;
tiposPesquisa = new ArrayList<SelectItem>();


}

public void valueChangePesquisa(ValueChangeEvent e) {
if (e.getNewValue() != null && !e.getNewValue().equals("")) {
if(e.getNewValue().toString().equals("false")) {
pesquisaPorNome = true;
} else if(e.getNewValue().toString().equals("true")){
pesquisaPorNome = false;
}
}
}

public String pesquisar() {
if (nome != null && !nome.equals("") && value == false){
System.out.println("pesquisando por nome");
} else if (codigo != null && !codigo.equals("") && codigo != 0 &&
value == true) {
System.out.println("pesquisando por codigo");
} else {
System.out.println("pesquisando por nda");
}
return "sucesso";
}
public boolean isPesquisaPorNome() {
return pesquisaPorNome;
}

public void setPesquisaPorNome(boolean pesquisaPorNome) {
this.pesquisaPorNome = pesquisaPorNome;
}

public Integer getCodigo() {
return codigo;
}

public void setCodigo(Integer codigo) {
this.codigo = codigo;
}

public String getNome() {
return nome;
}

public void setNome(String nome) {
this.nome = nome;
}

public List<SelectItem> getTiposPesquisa() {
return tiposPesquisa;
}

public void setTiposPesquisa(List<SelectItem> tiposPesquisa) {
this.tiposPesquisa = tiposPesquisa;
}

public boolean isValue() {
return value;
}

public void setValue(boolean value) {
this.value = value;
}

}

Página:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">

<head></head>
<body>
<h:form id="form">
<h:selectOneRadio id="opcoes" value="#{pesquisa.value}"
valueChangeListener="#{pesquisa.valueChangePesquisa}"
onchange="submit()"
immediate="true"
>
<f:selectItem itemLabel="Nome" itemValue="false" ></f:selectItem>
<f:selectItem itemLabel="Codigo" itemValue="true"></f:selectItem>
</h:selectOneRadio>

<h:panelGroup rendered="#{pesquisa.pesquisaPorNome}">
<h:outputLabel value="Nome"/>
<h:inputText value="#{pesquisa.nome}"/>
</h:panelGroup>
<h:panelGroup rendered="#{!pesquisa.pesquisaPorNome}">
<h:outputLabel value="Codigo"/>
<h:inputText value="#{pesquisa.codigo}"/>
</h:panelGroup>
<br/>
<h:commandButton value="Pesquisar" action="#{pesquisa.pesquisar}"/>
</h:form>


</body>
</html>

Faz as configurações do facesConfig e testa e vê se atende.

Att,