[RESOLVIDO] Problema com Javascript e JSF 2.0 <f:ajax>

Front-end
#1

Boa tarde pessoal.

O problema que estou tendo acontece quando eu re-renderizo o meu form a partir de uma requisição ajax. Feito isso acontece como se meus scripts JavaScript fossem desabilitados.

No geral tenho um template em facelets, onde estão os meus JavaScripts, através da tag:

<h:outputScript name="jquery-1.4.4.min.js" library="javascript" />

E o código do meu formulário com o botão com suporte a ajax é esse:

<h:form id="formulario_hospede" >
    <h:panelGroup id="borda" layout="block" styleClass="borda_arredondada" >
        <h:panelGroup id="info1" layout="block" rendered="#{cadastroFaces.primeiraParteCadastroHospede}" >

            //Alguns componentes não importantes no momento ...

            <h:commandButton id="continuar" value="#{msg.hospede_botao_continuar}" >
                <f:ajax event="click" execute="@form" render="formulario_hospede" listener="#{cadastroFaces.cadastroHospedeAjaxActionListener}" />
            </h:commandButton>
        </h:panelGroup>

        //Outros componentes também não importantes no momento ...

    </h:panelGroup>
</h:form>

O erro acontece quando eu clico no botão e alguma validação de algum componente retorna um erro (Validator). É perceptível a “desativação” do JavaScript pois em meus componentes eu tenho máscaras e bordas arredondadas aplicadas pelo jQuery.

Alguém ai sabe o que pode estar acontecendo??

#2

Pode está acontecendo que seus campos estão sendo re-renderizados e seus scripts não. Caso esteja utilizando o jQuery para mascarar os campos e provavelmente pelo seletor de id (#), por exemplo:

<script>
 $("#campo").mascarar("99-999")
</script>

, este id (campo) foi re-renderizado, e ne caso vc tem que re renderizar o script que mascara o campo.
Para visualizar isso tenta colocar a chamada dos seus scripts (esses que colocam a máscara e as bordas arredondadas) dentro do form (já que o seu execute é @form).

#3

Cara, é exatamente isso que está acontecendo. Meus componentes estão sendo re-renderizados porém meus scripts não.

Pra mim, como eu pedi pra re-renderizar somente o form, os scripts já ficam automaticamente amarrados a esses componentes.

Já tinha feito esse teste de colocar os scripts dentro do form e realmente funciona. Mas isso é uma boa prática ou apenas uma “gambi”??

#4

O que você pode fazer é além de re renderizar o formulário, também re renderizar o local dos scripts, já que no execute="@form" pode colocar mais de um elemento, separados por um espaço em branco.

#5

Desculpe a ignorância, mas como posso fazer isso (re-renderizar os scripts)?

Sei que no render do <f:ajax> ou execute pode-se colocar vários componentes identificados pelo seu id ou colocando como vc disse, @form ou @all, etc. Mas como faço isso pra um script??

Já tentei assim sem sucesso:

<span id="scripts">
    <h:outputScript name="jquery-1.4.4.min.js" library="javascript" /> 
</span>

...

<h:commandButton id="continuar" value="#{msg.hospede_botao_continuar}" >
    <f:ajax event="click" execute="@form" render="formulario_hospede scripts" listener="#{cadastroFaces.cadastroHospedeAjaxActionListener}" />
</h:commandButton>

Qual seria uma maneira de fazer isso?

#6

em vez de:

<span id="scripts">  
     <h:outputScript name="jquery-1.4.4.min.js" library="javascript" />   
</span>

tenta:


  <h:panelGroup id="scripts">
              <script type="text/javascript">
                        /* <![CDATA[ */
                      
                           //teus scripts

                        /* ]]> */
            </script>
    </h:panelGroup>

A tag span não é jsf, então não é reconhecido para a renderização. E acho que você não precisa re renderizar o jQuery, e sim onde ele tá sendo usando para mascarar seus campos.

Importante!

No meu caso eu precisava de uma máscara de valor monetário. No evento ajax eu precisava re renderizar o próprio campo e o script que colocava a máscara.
O problema: se o script fosse colocado antes do campo a se rerenderizado não funcionava, se fosse declarado após o campo não tinha problema.

Não sei se é algum bug, mas acho que na resposta ajax ao retornar o script, este era executado imediatamente, e nesse momento o campo ainda não estava renderizado (pois estava abaixo do script), por isso o motivo de o script ter sido declarado após o campo.

Se alguém puder esclarecer essa dúvida…

#7

ayslanms, funcionou perfeitamente.

Era exatamente isso que eu precisava. A tag span por não ser JSF não era reconhecida e assim me gerava um erro. Troquei pelo <h:panelGroup> e rodou normalmente.

Muito obrigado pela ajuda!!

#8