jQuery Mobile e Javascript inserido nas páginas não funciona

8 de dezembro de 2011 7 respostas

YPinus 8 de dezembro de 2011

Estou desenvolvendo um projeto de um web site utilizando JQuery Mobile, inclusive estamos utilizando o tema do próprio JQuery, já que ele nos oferece algumas facilidades como botões mais apropriados para visualização e utilização de celulares, e mais uma série de facilidades na parte visual do sistema.
Enfim, o problema é o seguinte, em aplicações web normais, sempre que se chama uma página, ele lê todo o HTML da página, inclusive as tags script onde temos os métodos java script.
O Jquery mobile me da uma opção muito interessante ao carregar uma página, que é carrega-lá por AJAX e depois fazer a transição da tela atual para a próxima utilizando um efeito de deslizamento na tela, porem sempre que eu faço isso, parece que ele não interpreta toda a tela, parece que é interpretado apenas o que esta dentro da div marcada com o atributo data-role=“content”. Dessa forma, sempre que eu carrego uma página, onde eu tenho uma tag com javascript o sistema simplesmente ignora o javascript, como se ele não existisse.
Este é um exemplo de link que utiliza essa funcionalidade.

<a href="${contexto}/jsp/servicos/politica_frete.jsp" class="ui-link-inherit">

Já quebrei bastante cabeça com esse problema, pesquisei em foruns nacionais e do exterior e não consegui encontrar nada que me ajudasse, o site oficial do JQuery Mobile também não cita nada sobre esse tipo de situação.
Meu objetivo é criar um campo que possua uma máscara de CNPJ, porem para aplicar a máscara é preciso chamar uma função do JQuery na página onde o campo esta, e isso não esta sendo possível.

Gostaria de saber se alguém aqui do forum trabalha com JQuery Mobile e se enfrentou esse ou algum problema semelhante.

Desde já agradeço a atenção.

7 Respostas

Ivan_Alves 13 de dez. de 2011

Cara tava mexendo um pouco com JQuery Mobile e meu problema era praticamente o mesmo, onde ao passar de uma tela para a outra ele não chamava meu componente de calendário. Então já que eu estava com pressa para terminar usei os exemplos de submites que o JQuery Mobile oferece antes estava usando assim:

<form action="minhaAction" method="post" >
...
</form>

E não funcionava corretamente depois mudei para essa:

<form action="minhaAction" method="post" data-ajax="false">
...
</form>

e funcinou beleza, agora quanto as transições não irá funcionar!

YPinus 13 de dez. de 2011

Obrigado pela resposta Ivan Alves.
Eu já estava utilizando esse atributo data-ajax=“false” pra fazer com que as transições de tela ocorram de maneira normal, e funcionando certinho, mas é uma pena ter que abrir mão de alguns efeitos visuais bem bacana que o JQuery Mobile nos disponibiliza, mas que tem esses impedimentos chatos, relacionados ao funcionamento do javascript.

Ivan_Alves 13 de dez. de 2011

Concordo, se descobrir alguma coisa avisa aí, porque com aquelas transições fica bem mais loco!

marcelosammj 11 de mar. de 2012

E ai pessoal, tbm estou com o mesmo problema!
Gostaria de saber se alguém já conseguiu resolver o problema de alguma forma, fora essa citada acima!

E também gostaria de saber se o primefaces mobile tem o mesmo problema, já que pelo que percebi ele tem é feito em jquery!

Desde já grato!

vinnysoft 11 de mar. de 2012

Olá YPinus.

Vejo duas saídas para seu problema:

Importar o script dentro da div com data-role=“page” ou verificar o evento de “pageinit” e “pageshow” para carregar a função. Isto está na documentação do JQuery Mobile (http://jquerymobile.com/demos/1.0.1/docs/pages/page-navmodel.html):

Any unique assets referenced by pages in a jQuery Mobile-driven site should be placed inside the “page” element (the element with a data-role attribute of “page”). For example, links to styles and scripts that are specific to a particular page can be referenced inside that div. However, a better approach is to use jQuery Mobile’s page events to trigger specific scripting when certain pages load. Note: you can return a page from the server with a data-url already specified in the markup, and jQuery Mobile will use that for the hash update. This allows you to ensure directory paths resolve with a trailing slash and will therefore be used in the base url path for future requests.

Inserir seu script com a máscara CNPJ na primeira página, de forma que não seja preciso recarregá-lo nas demais.

Em uma app mobile em que participei do desenvolvimento, usamos o JQuery Mobile, e reparei que nas demais páginas não era preciso copiar/repetir todo o head, mas somente a

, pois justamente ele não recarrega o cabeçalho da página a não ser que você expressamente exija isso (pelo data-ajax=“false” ou rel=“external”). Me parece ser o comportamento padrão.

Espero ter ajudado.

Até +!

Ivan_Alves 12 de mar. de 2012

vinnysoft:
Olá YPinus.

Vejo duas saídas para seu problema:

Importar o script dentro da div com data-role=“page” ou verificar o evento de “pageinit” e “pageshow” para carregar a função. Isto está na documentação do JQuery Mobile (http://jquerymobile.com/demos/1.0.1/docs/pages/page-navmodel.html):

Any unique assets referenced by pages in a jQuery Mobile-driven site should be placed inside the “page” element (the element with a data-role attribute of “page”). For example, links to styles and scripts that are specific to a particular page can be referenced inside that div. However, a better approach is to use jQuery Mobile’s page events to trigger specific scripting when certain pages load. Note: you can return a page from the server with a data-url already specified in the markup, and jQuery Mobile will use that for the hash update. This allows you to ensure directory paths resolve with a trailing slash and will therefore be used in the base url path for future requests.

Inserir seu script com a máscara CNPJ na primeira página, de forma que não seja preciso recarregá-lo nas demais.

Em uma app mobile em que participei do desenvolvimento, usamos o JQuery Mobile, e reparei que nas demais páginas não era preciso copiar/repetir todo o head, mas somente a
, pois justamente ele não recarrega o cabeçalho da página a não ser que você expressamente exija isso (pelo data-ajax=“false” ou rel=“external”). Me parece ser o comportamento padrão.
Espero ter ajudado.

Até +!

Olá vinnysoft também estou com o mesmo problema do YPinus e a uns 2 meses atrás estava olhando um pouco a documentação e também tem essa página http://jquerymobile.com/demos/1.0.1/docs/api/methods.html que ainda não testei mais fala alguma coisa sobre isso, também vou verificar a sua dica e testar já que irei precisar dela em breve, flw!

vinnysoft 12 de mar. de 2012

Ivan Alves:
vinnysoft:
Olá YPinus.

Vejo duas saídas para seu problema:

Importar o script dentro da div com data-role=“page” ou verificar o evento de “pageinit” e “pageshow” para carregar a função. Isto está na documentação do JQuery Mobile (http://jquerymobile.com/demos/1.0.1/docs/pages/page-navmodel.html):

Any unique assets referenced by pages in a jQuery Mobile-driven site should be placed inside the “page” element (the element with a data-role attribute of “page”). For example, links to styles and scripts that are specific to a particular page can be referenced inside that div. However, a better approach is to use jQuery Mobile’s page events to trigger specific scripting when certain pages load. Note: you can return a page from the server with a data-url already specified in the markup, and jQuery Mobile will use that for the hash update. This allows you to ensure directory paths resolve with a trailing slash and will therefore be used in the base url path for future requests.

Inserir seu script com a máscara CNPJ na primeira página, de forma que não seja preciso recarregá-lo nas demais.

Em uma app mobile em que participei do desenvolvimento, usamos o JQuery Mobile, e reparei que nas demais páginas não era preciso copiar/repetir todo o head, mas somente a
, pois justamente ele não recarrega o cabeçalho da página a não ser que você expressamente exija isso (pelo data-ajax=“false” ou rel=“external”). Me parece ser o comportamento padrão.
Espero ter ajudado.

Até +!

Olá vinnysoft também estou com o mesmo problema do YPinus e a uns 2 meses atrás estava olhando um pouco a documentação e também tem essa página http://jquerymobile.com/demos/1.0.1/docs/api/methods.html que ainda não testei mais fala alguma coisa sobre isso, também vou verificar a sua dica e testar já que irei precisar dela em breve, flw!

Olá Ivan.

Faça o teste sim, acredito que irá ajudar. Utilizamos a opção 2 porque nossa app mobile era relativamente pequena e preferimos centralizar o JS na primeira página para facilitar a manutenção.

Até +!

Criado 8 de dezembro de 2011

Ultima resposta 12 de mar. de 2012

Respostas 7

Participantes 4

7 Respostas

Topicos relacionados