[RESOLVIDO] - Habilitar e desabilitar um botao em JSF

16 respostas
J

Pessoal,
num outro post, estava com problemas no meu p:dataTable, onde eu queria fzer um update e delete, somente quando o radiobox fosse clicado. Nao consegui. Porém eu tive uma outra ideia. Pesquisei + nao obtive uma resposta clara.

Agora a ideia é outra, eu quero desabilitar o botao de Alterar e Deletar, e somente serão habilitados uma vez que for selecionado o radiobox.
Sei que da pra fazer isso em javascript. Só que eu numca usei isso com JSF.

Alguem tem algum exemplo, alguma ideia. ???

16 Respostas

T

Poderá usar ajax, se for JSF 2 é nativo, senão terá que usar algo que implemente (como Richfaces). Crie atributos boolean em sua classe e em seus botões na página sete o atributo disabled com os atributos booleanos da classe. Quando seu bean for chamado, inialize os valores com true e os botões estarão desabilitados. Crie um método que o ajax irá chamar quando um radio for selecionado e faça a lógica de quiando se deve habilitar os botões.

Uma alternativa ao Ajax é utilizar valuChangeListener, só que para habilitar ou desabilitar os botões, a página inteira será atualizada.

K

Brow … uma ideia … é vc ter variaveis de controle

abilitarEditar retorna um boolean
abilitarExcluir retorna um boolean

e na pagina

<h:commandButton disabled="#{bean.abilitarEditar}" action="" value=""/>

–edit
respondi mais já tava respondido =/ malz

J

Tiburcio_Mancha:
Poderá usar ajax, se for JSF 2 é nativo, senão terá que usar algo que implemente (como Richfaces). Crie atributos boolean em sua classe e em seus botões na página sete o atributo disabled com os atributos booleanos da classe. Quando seu bean for chamado, inialize os valores com true e os botões estarão desabilitados. Crie um método que o ajax irá chamar quando um radio for selecionado e faça a lógica de quiando se deve habilitar os botões.

Uma alternativa ao Ajax é utilizar valuChangeListener, só que para habilitar ou desabilitar os botões, a página inteira será atualizada.

Fala mano, BOM DIA.
Mas é possivel entao fazer com javascript, digo, seria bem mais eficiente e eficaz … ???

Na verdade estou procurando uma solução, seja ajax, ou javascript. Potanto que eu faça … para mim ta valenduuu >>>

T

Nem precisa mecher em código JS, se for JSF 2 que está usando, o ajax é nativo, só vocÊ pesquisar que é facinho implementar. Caso contrário, pode ser feito utilizando Richfaces, ae ja tem que ser realizada uma confiiguração, etc, é um trmpo a mais mas nada excepcional.

Uma solução para o seu problema, só que menos adequada, é quando o usuário clicar em algum botão sem selecionar o radio, disparar uma mensagem de validação, mas ainda prefiro o esquema dos botões!

J

Tiburcio_Mancha:
Nem precisa mecher em código JS, se for JSF 2 que está usando, o ajax é nativo, só vocÊ pesquisar que é facinho implementar. Caso contrário, pode ser feito utilizando Richfaces, ae ja tem que ser realizada uma confiiguração, etc, é um trmpo a mais mas nada excepcional.

Uma solução para o seu problema, só que menos adequada, é quando o usuário clicar em algum botão sem selecionar o radio, disparar uma mensagem de validação, mas ainda prefiro o esquema dos botões!

Poise, esse ae eu abandonei a ideia, pois nao encontrei nda parecido. Eu tow utilizando o Primefaces,

<p:dataTable value="#{manifestacaoBean.manifests}" var="c" paginator="true" rows="10" 
                         selection="#{manifestacaoBean.manifest}" update="formAlterar, formRemover">

                <p:column selectionMode="single" />
.......
</p:dataTable>

eis ae o codigo… lembrando o seguinte, que o <p:colum selectionMode…> é o radio propriamente dito…

E dpois … ?

K

Jovem,

Você pode criar um atributo boolean dentro do seu Bean e realizar este tipo de controle.

Abs,

J

Kanin Dragon:
Jovem,

Você pode criar um atributo boolean dentro do seu Bean e realizar este tipo de controle.

Abs,

BOM DIA,
e como seria isso. Não faço nem ideia. Voce tem algum exemplo ???

K

Vo tenta explicar aqui …

seu botão vai ter essa cara aqui.

<h:commandButton disabled="#{bean.flagEditar}" action="" value=""/>

sendo que flagEditar é a variavel que contem o boolean essa variavel vai estar no seu bean …

vc vai criar o método abilitarEditar que vai setar a variavel flagEditar para o seu bean.
e esse método vai ser chamado na hora q o botão tem q ser abilitado.
por um cara assim

<a4j:support event="onclick" reRender="botao"  action="#{bean.abilitarEditar}" />
J

kritiuns:
Vo tenta explicar aqui …

seu botão vai ter essa cara aqui.

<h:commandButton disabled="#{bean.flagEditar}" action="" value=""/>

sendo que flagEditar é a variavel que contem o boolean essa variavel vai estar no seu bean …

vc vai criar o método abilitarEditar que vai setar a variavel flagEditar para o seu bean.
e esse método vai ser chamado na hora q o botão tem q ser abilitado.
por um cara assim

<a4j:support event="onclick" reRender="botao"  action="#{bean.abilitarEditar}" />

Ok, eu entendi a questao de como por no lah no primefaces. A questão é que eu queria era um exemplo de logica no BEAN ???

mais mesmo assim valeu, eu fica agradecido pela cooperação !!!

K

acho q ficaria tipo assim :

boolean flagEditar;
boolean radioSelected;


public void abilitarEditar(){
     if(radioSelected){
         setFlagEditar(true);
     }else{
        setFlagEditar(false);
    }
}
J

kritiuns:
acho q ficaria tipo assim :

boolean flagEditar;
boolean radioSelected;


public void abilitarEditar(){
     if(radioSelected){
         setFlagEditar(true);
     }else{
        setFlagEditar(false);
    }
}

Não funciona nao, mais eu encontrei, talvez uma solução rapida !!!

<h:head>
        <title>Menu Ouvidoria</title>
        <link type="text/css" rel="stylesheet" rel='nofollow' href="redmond/theme.css"/>
        <script type="text/javascript"> 
            function enable(button){
                document.getElementById(button).disabled = false;
            }
            function ButtonOff(){
                var v = document.getElementById(radio);
                for(var i = 0; i < v.length; i++){
                    if(v[i].checked){
                        enable(button);
                    }
                }
            }
        </script>
    </h:head>
    <h:body>

        <!-- Barra de GRID -->
        <h:form id="formCategorias" prependId="false">

 	 ........
		<p:column selectionMode="single" id="radio"  />

                <f:facet name="footer" >
                    <p:commandButton value="Alterar" image="ui-icon-search" update="formAlterar" oncomplete="alterar.show()" id="update" disabled="true" onchange="ButtonOff()" />
                    <p:commandButton value="Remover" image="ui-icon-trash" update="formRemover" oncomplete="remover.show()" id="remover" disabled="true" onchange="ButtonOff()" />
                    <p:commandButton value="Movimentação" image="ui-icon-circle-check" action="movimenta"
                                     id="moving"/>
                </f:facet>
            </p:dataTable>
        </h:form>
...
An Error Occurred:
Error Parsing /index.xhtml: Error Traced[line: 16] The content of elements must consist of well-formed character data or markup.

o erro vai cair no ,
Pessoal, o que está ERRADO??? E o que fazer pra funcionar ???

Sei que o erro é besta, porem nao estou conseguindo visualizar >>> ???

alguem pode ajudar ???

K

Se tiver exatamente do jeito que vc coloco ai … o getElementById recebe uma string …
tem q ser getElementById(“radio”) e para todos os outros casos que vc usa esse método .

J

kritiuns:
Se tiver exatamente do jeito que vc coloco ai … o getElementById recebe uma string …
tem q ser getElementById(“radio”) e para todos os outros casos que vc usa esse método .

Engraçado, porque eu já coloquei com “” e se " " … e continua o mesmo ERRO !!!

K
<script type="text/javascript">   
function enable(button){   
      document.getElementById(button).disabled = false;   
}   
           
function ButtonOff(){   
     var v = document.getElementById("idDaRadio");   
      for(var i = 0; i < v.length; i++){   
           if(v[i].checked){   
                enable("idDoButton");   
            }   
       }   
}   
        </script>

só uma coisa esse cara aqui

<p:column selectionMode="single" id="radio"  />

acredito q não vai desenhar um radio

J
kritiuns:
<script type="text/javascript">   
function enable(button){   
      document.getElementById(button).disabled = false;   
}   
           
function ButtonOff(){   
     var v = document.getElementById("idDaRadio");   
      for(var i = 0; i < v.length; i++){   
           if(v[i].checked){   
                enable("idDoButton");   
            }   
       }   
}   
        </script>

só uma coisa esse cara aqui

<p:column selectionMode="single" id="radio"  />

acredito q não vai desenhar um radio

poise, essa é uma das minhas duvidas, pois na documentação do PRIME ele mostra isso ae e ele rendera como um RADIO. Agora axo que ae tá o problema OHHH
porque ele nao poem um radio... msmo.....

J

Axo que vou ter que trocar a forma pra Habilitar, Desabilitar o meu botao. Vou dar uma estudada em uma outra solução.
Mas pessoal eu ja entendi, o que foi dito por todos.

Muito obrigado.

Vou encerrar o post e se precisar eu abro um novo.

Criado 31 de maio de 2011
Ultima resposta 2 de jun. de 2011
Respostas 16
Participantes 4