Lista JSP VS Javascript

Front-end
#1

Olá tudo bem?? Estou a fazer uma aplicação em jsf… e cheguei a uma pagina .jsp contendo uma lista(datamodel) esta lista contem uma coluna de valores que precisa ser formatada, porém, ao inserir uma função javascript nesta lista, esta função (qualquer q seja) não é sequer executada. cá está o trecho do codigo onde esta a lista…

[code]<h:panelGrid columns=“1” styleClass=“geral” cellpadding=“0” cellspacing=“0”>
<f:facet name=“header”>
<h:panelGroup>
<f:verbatim>› </f:verbatim>
<h:outputText value="#{titulo[‘lista_de_lancamentos’]}" />
</h:panelGroup>
</f:facet>

              <t:div style="#{boletimArrecadacaoDiariaBean.divStyle}" >						
                        
                                          
                <t:dataTable var="especificacaoLista" binding="#{boletimArrecadacaoDiariaBean.dataModel}">
                 
                  <h:column>
                    <f:facet name="header">
                      <h:outputText value="" />
                    </f:facet>
                    <h:selectBooleanCheckbox id="selectedEspecificacoes" 
                     value="#{especificacaoLista.check}" styleClass="chk" />
                  </h:column>
                
                  <h:column>
                    <f:facet name="header">
                      <h:outputText value="#{tabela['numero_especificacao]}" />
                    </f:facet>
                    <h:outputText value="#{especificacaoLista.especificacao}"styleClass="left" />
                  </h:column>
                
                  <h:column>
                    <f:facet name="header">
                      <h:outputText value="#{tabela['quantidade']}" />
                    </f:facet>
                    <h:inputText value="#{especificacaoLista.quantidade}" styleClass="right">
                    </h:inputText>
                  </h:column>
                
                  <h:column>
                    <f:facet name="header">
                      <h:outputText value="#{tabela['valor']}" />
                    </f:facet>
                    <h:inputText value="#{especificacaoLista.valor}" styleClass="right" id="valorLista" onkeyup="formataValorLista();"/>
                   
                  </h:column>
                
                  
                </t:dataTable>
              
              </t:div>
              
            </h:panelGrid>                [/code]

E abaixo minha função javascript para formatar o numero…

function formataValorLista(){
          
    var campo = document.getElementById("valorLista");
    
    var vetor = campo.value.split(".");
    
    var algarismos = "";
    
    var depoisDaVirgula="";
            
    var x = 0;
    
 // neste ponto apenas foram retirados os pontos, o proximo passo ? retirar a virgula   
    for(x = 0;x < vetor.length;x++){
       
       algarismos = algarismos+vetor[x];
    }
  //  retirando a virgula;
    for(x = 0; x<algarismos.length; x++){
       
       if(algarismos.charAt(x)==","){
          algarismos = algarismos.substring(0,x) + algarismos.substring(x+1,algarismos.length);
       }
    }
   //   caso tenha apenas 2 algarismo ele ser?  X,X como na formata??o padr?o utilizada
    if(algarismos.length == 2){
       algarismos = algarismos[0] + "," + algarismos[1];
       
    }else if(algarismos.length > 2){
        depoisDaVirgula = ","+algarismos.substring(algarismos.length-2,algarismos.length);
        algarismos = algarismos.substring(0,algarismos.length-2);~
        x = 0;
        for(y = algarismos.length-1; y > 0; y--){
           if(x==2){
              algarismos = algarismos.substring(0,y) +"."+algarismos.substring(y,algarismos.length);
              y--;
           }
           
           x++;
        }
    }
    
    campo.value = algarismos + depoisDaVirgula;
       
}

Alguem sabe o pq isso ocorre?? Há alguma maneira de se usar javascript na minha datamodel(HtmlDataTable)??

desde já agradeço.

#2

pq vc n faz isso antes de “enviar” a lista pra datatable …

qnd ela ainda esta sendo gerada … é lá q vc deveria fazer esse tipo de coisa… n usando javascript (seu codigo fica mto sujo)

#3

Cuidado ao utilizar javascript no JSF, pois os “id” que você coloca são alterados pelo JSF, dá uma olhada no código fonte da sua página, geralmente ele fica assim:

idDoSeuForm:idDoComponente

Portanto, mesmo que sua função em javaScript for acessada a função getElementById não ia conseguir pegar seu id como colocou.

Abraços,

#4

[quote=guimoz]pq vc n faz isso antes de “enviar” a lista pra datatable …

qnd ela ainda esta sendo gerada … é lá q vc deveria fazer esse tipo de coisa… n usando javascript (seu codigo fica mto sujo)[/quote]

Na verdade eu posso trazer o valor já formatado, mas caso so usuario decida altera-lo ele deve ser formadado a medida que é digitado.

Fabio.massa, se eu entendi bem o q me disseste… o javascript processa o id hierarquicamente, é isso?

desde já agradeço.

#5

hmm

vc quer usar AJAX entao ?

sobre os ids dos componentes jsf …
http://www.rponte.com.br/2008/07/01/jsf-e-naming-container/

#6

Tente trocar o código

var campo = document.getElementById("valorLista"); por

var campo = document.getElementById("idDoSeuForm:valorLista");

alias, como vc está usando uma lista, vc terá vários “valorLista”, então coloque o “this” como parametro de sea função e não terá que fazer o getElementById:

[code]formataValorLista(this)
.
.
.

function formataValorLista(e){

 var vetor = e.value.split(".");

[/code]

#7

Ótimas dicas, o artigo que me mandou é muito bom e me fez ver alguns erros bem primarios no meu código, porem ainda sim a função não esta sendo executada, mesmo que eu coloque uma função vazia com apenas um alert(“ola mundo”); ou use o this como parametro ainda não consigo faze-lo executar… será possivel alguma outra razão para a recusa em executar esta função??? O interessante é que quando encontro um jeito de formatar o numero corretamente, aí o botão não executa a função do bean de persistencia. Que erro eu poderia estar cometendo??

Desde já agradeço.

#8