problema com o plugin Meio mask do Jquery

[Rogério Martins]

boa tarde, estou tentando utilizar o plugin meio mask http://www.meiocodigo.com/projects/meiomask/
 do jquery e estou me deparando com a seguinte situação, minha página é carregada por um rich:dropDownMenu ou seja é carregada em ajax, na primeira vez que carrega a mascara não é aplicada, porém se apertar o f5 1 vez, o plugin ja funciona normalmente, segue o código que estou utilizando:

        <a4j:form id="formularioFichas">

            <!-- Inclui a biblioteca responsável palas máscaras de entrada -->
            <a4j:loadScript src="scripts/jquery.js" />
            <a4j:loadScript src="scripts/jquery.meiomask.js" />
           
           
            <!--  Inicia a Tabela -->
            <h:panelGrid  cellpadding="3" border="0" cellspacing="0" columns="3">
                               
                <h:outputText id="lblTelefone" value="Telefone" />
                <h:inputText id="txfTelefone" value="#{ficha.fichas.ficFixo}" size="13">
                    <f:validateLength maximum="13"/>
                </h:inputText>
               
                <rich:message for="txfTelefone" styleClass="mensagemErro"/>
               
                <h:outputText id="lblCelular" value="Celular" />
                <h:inputText id="txfCelular" value="#{ficha.fichas.ficCelular}" size="13">
                    <f:validateLength maximum="13"/>
                </h:inputText>
               
                <rich:message for="txfCelular" styleClass="mensagemErro"/>
               
                <h:outputText id="lblEmail" value="E-mail" />
                <h:inputText id="txfEmail" value="#{ficha.fichas.ficEmail}">
                    <f:validateLength maximum="255"/>
                    <f:validator validatorId="validarEmail"/>
                    <rich:ajaxValidator event="onblur"/>
                </h:inputText>
               
                <rich:message for="txfEmail" styleClass="mensagemErro">
                    <f:facet name="passedMarker">
                        <h:graphicImage  value="/admin/img/passed.gif" />
                    </f:facet>
                    <f:facet name="errorMarker">
                        <h:graphicImage value="/admin/img/error.gif" />
                    </f:facet>
                </rich:message>
                 
               
                <rich:jQuery selector="#txfTelefone" query="setMask({mask:'(99)9999-9999'})" timing="onload"/>
                <rich:jQuery selector="#txfCelular" query="setMask({mask:'(99)9999-9999'})" timing="onload"/>
               
            </h:panelGrid>
           
            <a4j:commandButton id="btnSalvar" action="#{ficha.salvarWeb}" reRender="formularioFichas" value="Salvar"/>
           
        </a4j:form>
              

alguém já passou por este problema??
com o plugin maskedinput funciona normalmente, porém prefiro este plugin que mascara enquanto o usuário digita além de ter mais opções de máscaras..

--
Atenciosamente: Rogério Martins da Silva
Bacharel em Sistemas de Informação - Universidade Estadual de Goiás
Desenvolvedor Web/Desktop
Java / C# / PHP
MSN | Gootl Talk : rogerioma...@gmail.com
Contato Brasil Telecom: (64) 8402-2308
Contato Tim: (64) 8122-2608
skype: rogeriomartinsilva

"Só Deus salva, os mortais fazem backup!!!"

"Qualquer tolo pode escrever códigos que um computador entenda. Bons programadores escrevem códigos que humanos conseguem entender."

"A humanidade está perdendo seus maiores gênios...
Aristóteles faleceu, Newton bateu as botas, Einstein morreu, e eu não tô
passando muito bem... "

[Thiago]

Brother, eu uso da forma como consta abaixo e funciona blz

<h:inputText id="txtNumFone" alt="phone" size="16">
<rich:jQuery selector="#txtNumFone" query="setMask({})"
timing="onload" />
</h:inputText>

[Rogério Martins]

opa, após fazer alguns testes percebi que o problema so ocorre quando carrego a página em ajax, ou seja se entrar na pagina.jsf diretamente ele está funcionando normalmente, ou mesmo dentro do ajax se chamar o alt="decimal" funciona perfeito, alguma dica sobre o que posso fazer?

2009/4/10 Thiago <sistema...@gmail.com>

[Thiago]

Vc tentou usar da maneira que postei? (colocando a tag rich:jQuery
dentro da tag h:inputText). Provavelmente não irá funcionar da maneira
como vc faz pq quando vc faz uma requisição ajax ele não vai executar
novamente seu rich:jQuery (executando o codigo javascript do plugin
para colocar a máscara nos campos novamente). Coloque a tag dentro dos
inputs que irá funcionar, mesmo q vc faça requisição ajax. Qualquer
coisa poste novamente. Abraço

On 11 abr, 00:51, Rogério Martins <rogeriomartinsi...@gmail.com>
wrote:

> opa, após fazer alguns testes percebi que o problema so ocorre quando
> carrego a página em ajax, ou seja se entrar na pagina.jsf diretamente ele
> está funcionando normalmente, ou mesmo dentro do ajax se chamar o
> alt="decimal" funciona perfeito, alguma dica sobre o que posso fazer?
>

> 2009/4/10 Thiago <sistemas.thi...@gmail.com>

>
>
>
> > Brother, eu uso da forma como consta abaixo e funciona blz
>
> > <h:inputText id="txtNumFone" alt="phone" size="16">
> >       <rich:jQuery selector="#txtNumFone" query="setMask({})"
> > timing="onload" />
> > </h:inputText>
>
> --
> Atenciosamente: Rogério Martins da Silva
> Bacharel em Sistemas de Informação - Universidade Estadual de Goiás
> Desenvolvedor Web/Desktop
> Java / C# / PHP

> MSN | Gootl Talk : rogeriomartinsi...@gmail.com

[Rogério Martins]

fiz sim!! realizei vários testes!

2009/4/11 Thiago <sistema...@gmail.com>

MSN | Gootl Talk : rogerioma...@gmail.com

[Thiago]

Rogério, tem uma coisa que, talvez, nem vai mudar nada no problema que
está acontecendo, mas só por título de conhecimento mesmo. Quando vc
usa a tag <a4j:form> não precisa carregar o javascript do jquery, o
a4j já usa ele blz?

Voltando ao seu problema: em algum momento vc manda aparecer (atributo
rendered) ou desaparecer algum campo? (campo que tenha a máscara). Se
o campo for dinâmico o timing da tag jQuery deve ser immediate (em vez
de onload)

[Rogério Martins]

não estou importando o jquery.js certo!

to usando o rendered apenas no menu, quanto ao meu formulario testei das 2 maneiras

                <h:inputText id="txfTelefone" alt="phone" value="#{ficha.fichas.ficFixo}" size="13">

                    <rich:jQuery selector="#txfTelefone" query="setMask({})" timing="immediate"/>

                    <f:validateLength maximum="13"/>

                </h:inputText>

                <rich:message for="txfTelefone" styleClass="mensagemErro"/>

                <h:outputText id="lblCelular" value="Celular" />

                <h:inputText id="txfCelular" value="#{ficha.fichas.ficCelular}" size="13">

                    <rich:jQuery selector="#txfCelular" query="setMask({mask:'(99)9999-9999'})" timing="onload"/>

                    <f:validateLength maximum="13"/>

                </h:inputText>

na primeira com o timing="immediate" ao começar digitar ele sempre coloca e retira o primeiro caracter da mascara o ( e não deixa proseguir.. na segunda ele simplismente não aplica a máscara!!

2009/4/11 Thiago <sistema...@gmail.com>

[Thiago]

vc está usando essa tag "<a4j:loadScript src="scripts/jquery.js" />"
na sua página ainda? Como eu disse: não sei se vai solucionar não, mas
é uma tentativa. Porque a forma que colocou ai é a forma que eu uso e
funciona perfeitamente, mesmo após uma requisição ajax. Segue abaixo
outro trecho de código que usei:

<h:outputText value="Cep:"></h:outputText>
<h:inputText id="txtCep"
value="#{mbCadastroCliente.endereco.cep}"
size="10"
styleClass="form">
<rich:jQuery selector="#txtCep" query="setMask
('99.999-999')" timing="onload"/>
</h:inputText>

Vi outra coisa que pode estar causando o problema tb, quando clicar em
salvar vc está dando um reRender no formulário, isso no firefox funfa
legal mas no IE dá erro de javascript (pelo menos comigo aconteceu
isso). Te aconselho a dar um reRender no panelGrid em vez de dar
reRender no formulário (talvez seja por isso que esteja dando
problema).

[Rogério Martins]

realmente não entendo o problema!!!

se importar o "<a4j:loadScript src="scripts/jquery.js" />" da pau no meu menu do rich rsrs

veja o menu se estou chamando corretamente!!

<h:form>

            <rich:toolBar>

                <rich:dropDownMenu id="Cadastros" value="Cadastros">

                    <rich:menuItem  submitMode="ajax" reRender="paginasInternas" value="Ficha" action="#{navegacao.paginaFicha}"/>

                    <rich:menuItem  submitMode="ajax" reRender="paginasInternas" value="Parceiro" action="#{navegacao.paginaParceiro}"/>

                </rich:dropDownMenu>

            </rich:toolBar>

        </h:form>

 <rich:panel id="paginasInternas">

            <f:subview id="sub">

               <a4j:include viewId="#{navegacao.pagina}"/>

            </f:subview>

            <a4j:status>

                <f:facet name="start">

                    <h:graphicImage  value="/admin/img/ajax-loader.gif"/>

                </f:facet>

            </a4j:status>

        </rich:panel>

2009/4/11 Thiago <sistema...@gmail.com>

[Dionatan Almeida]

Coloque a chamada ao .js do  Meio Mask dentro de um a4j:outputPanel, assim em qualquer requisição ajax, o plugin será carregado e a máscara continuará funcionando.

--
Dionatan de Almeida
http://www.dionatanalmeida.com

Sun Certified Programmer
Sun Certified Web Component Developer
OWSE - Objects Web & Software Engineering
http://www.owse.com.br

2009/4/11 Rogério Martins <rogerioma...@gmail.com>

[Thiago]

Rogério, retire esse trecho da sua página: "<a4j:loadScript
src="scripts/jquery.js" />" , pelo menos eu não o uso pq o a4j:form já
tem o jquery por padrão.

[Rogério Martins]

bom dia, não estou fazendo esta chamda, fiz teste e deu pau no meu menu rsrsrs.. fiz testes como os posts acima e também continua com o mesmo erro vou postar todo o código para ficar claro aki:

estou usando richFaces 3.3.0, a api meiomask versão atual http://www.meiocodigo.com/projects/meiomask/


menu.xhtml

<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:f="http://java.sun.com/jsf/core"
     
      xmlns:a4j="http://richfaces.org/a4j"
     
      xmlns:rich="http://richfaces.org/rich">
   
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)"/>
        <meta http-equiv="Page-Exit" content="blendTrans(Duration=1.0)"/>
        <title><h:outputText value="#{admin.titulo}" /></title>
    </head>
    <body>

       
        <h:form>
            <rich:toolBar>
                <rich:dropDownMenu id="Cadastros" value="Cadastros">
                   
                    <rich:menuItem  submitMode="ajax" reRender="paginasInternas" value="Ficha" action="#{navegacao.paginaFicha}"/>
                    <rich:menuItem  submitMode="ajax" reRender="paginasInternas" value="Parceiro" action="#{navegacao.paginaParceiro}"/>
                   
                </rich:dropDownMenu>
            </rich:toolBar>
        </h:form>
       
       
       
        <rich:panel id="paginasInternas">
           
            <f:subview id="sub">
                <a4j:include viewId="#{navegacao.pagina}"/>
            </f:subview>
           
            <a4j:status>
                <f:facet name="start">
                    <h:graphicImage  value="/admin/img/ajax-loader.gif"/>
                </f:facet>
            </a4j:status>
           
        </rich:panel>
       

    </body>
</html>

ficha.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

                xmlns:ui="http://java.sun.com/jsf/facelets"

                xmlns:h="http://java.sun.com/jsf/html"

                xmlns:f="http://java.sun.com/jsf/core"

                xmlns:a4j="http://richfaces.org/a4j"

                xmlns:rich="http://richfaces.org/rich">




    <!-- Cabeçalho da página -->
    <f:facet name="header">
        Cadastro de Produtores/Expositores/Parceiros
    </f:facet>

    <a4j:outputPanel ajaxRendered="true" id="PainelFicha">

        <a4j:form id="formularioFichas">

           
        <!-- Inclui a biblioteca responsável palas máscaras de entrada -->

        <a4j:loadScript src="scripts/jquery.meiomask.js" />
        <a4j:loadStyle src="css/admin.css"/>

            <!--  Inicia a Tabela -->
            <h:panelGrid  cellpadding="3" border="0" cellspacing="0" columns="3">

                <h:outputText id="lblNome" value="Nome" />
                <h:inputText id="txfNome"  required="true" requiredMessage="O campo nome tem preenchimento obrigatório" value="#{ficha.fichas.ficNome}">
                    <f:validateLength maximum="200"/>

                    <rich:ajaxValidator event="onblur"/>
                </h:inputText>

                <rich:message for="txfNome" styleClass="mensagemErro">

                    <f:facet name="passedMarker">
                        <h:graphicImage  value="/admin/img/passed.gif" />
                    </f:facet>
                    <f:facet name="errorMarker">
                        <h:graphicImage value="/admin/img/error.gif" />
                    </f:facet>
                </rich:message>

                <h:outputText id="lblEndereco" value="Endereço" />
                <h:inputText id="txfEndereco" alt="decimal" value="#{ficha.fichas.ficEndereco}" size="50"/>

                <h:outputText value=""/>

                <h:outputText id="lblTelefone" value="Telefone" />

                <h:inputText id="txfTelefone" alt="phone" value="#{ficha.fichas.ficFixo}" size="13">
                    <rich:jQuery selector="#txfTelefone" query="setMask({})" timing="onload"/>

                    <f:validateLength maximum="13"/>
                </h:inputText>

                <rich:message for="txfTelefone" styleClass="mensagemErro"/>

                <h:outputText id="lblCelular" value="Celular" />

                <h:inputText id="txfCelular" alt="phone" value="#{ficha.fichas.ficCelular}" size="13">
                    <rich:jQuery selector="#txfCelular" query="setMask({}) " timing="onload"/>

                    <f:validateLength maximum="13"/>
                </h:inputText>

                <rich:message for="txfCelular" styleClass="mensagemErro"/>

                <h:outputText id="lblEmail" value="E-mail" />
                <h:inputText id="txfEmail" value="#{ficha.fichas.ficEmail}">
                    <f:validateLength maximum="255"/>
                    <f:validator validatorId="validarEmail"/>
                    <rich:ajaxValidator event="onblur"/>
                </h:inputText>

                <rich:message for="txfEmail" styleClass="mensagemErro">
                    <f:facet name="passedMarker">
                        <h:graphicImage  value="/admin/img/passed.gif" />
                    </f:facet>
                    <f:facet name="errorMarker">
                        <h:graphicImage value="/admin/img/error.gif" />
                    </f:facet>
                </rich:message>

                <h:outputText id="lblTipo" value="Tipo" />

                <h:selectOneMenu value="#{ficha.fichas.ficTipo}">
                    <f:selectItem itemValue="1" itemLabel="Produtor"/>
                    <f:selectItem itemValue="2" itemLabel="Expositor"/>
                    <f:selectItem itemValue="3" itemLabel="Parceiros"/>
                </h:selectOneMenu>





            </h:panelGrid>

            <a4j:commandButton id="btnSalvar" name="btnSalvar" action="#{ficha.salvarWeb}" reRender="formularioFichas" value="Salvar"/>
            <a4j:commandButton id="btnLimpar"  value="Limpar" />


            <h:outputText id="lblNew" value="New" />
            <h:inputText id="txtNew" alt="phone" size="16"/>

            <h:outputText id="lblNew3" value="New3" />
            <h:inputText id="txtNew3" alt="decimal" size="16"/>


            <rich:jQuery selector="#txtNew3" query="setMask({})" timing="immediate" />
            <rich:jQuery selector="#txtNew" query="setMask({mask:'9',type:'infinite'})"  />


        </a4j:form>

    </a4j:outputPanel>
</ui:composition>

2009/4/12 Thiago <sistema...@gmail.com>

Rogério, retire esse trecho da sua página: "<a4j:loadScript
src="scripts/jquery.js" />" , pelo menos eu não o uso pq o a4j:form já
tem o jquery por padrão.

[Tiago Augusto Nogueira Coelho]

Cara é o seguinte o seu problema deve esta ocorrendo devido ao modo como a função javaScript é executada. Pelo que vi no seu código ela é carregada quando a página é carrega. Sendo assim o seu código só vai executar quando a página for carregada, (onLoad). Tente mudar o atributo da sua função javaScript, no jQuery para outra, que no momento não me lembro do valore, mas que ele  é executado quando é interpretado pelo browser e não quando a página é carregada.

[Thiago]

Seria timmng="immediate"?

[Tiago Augusto Nogueira Coelho]

Acredito que é isso mesmo.

[Rogério Martins]

xii, pior q ja tenhei várias vezes rsrsrsrs. porém ontem fiz evoluções percebi que o erro não aconteçe no ie, e nem em máscaras que tem o atributo type:'reverse', bastante curioso não???

2009/4/13 Tiago Augusto Nogueira Coelho <tiagoa...@gmail.com>

Acredito que é isso mesmo.

[Thiago]

Troque o trecho:

<a4j:commandButton id="btnSalvar" name="btnSalvar"
action="#{ficha.salvarWeb}" reRender="formularioFichas" value="Salvar"/
>

por:

<a4j:commandButton TYPE="BUTTON" id="btnSalvar" name="btnSalvar"
action="#{ficha.salvarWeb}" reRender="ID_PANEL" value="Salvar"/>