[Resolvido] [jQuery] getScript cumulativo

[Cesão 1]

Olá, amigos.

 

Estou montando um sistema onde quero que todas as chamadas de página sejam feitas por jQuery (ajax). Para isso, estou usando getScript para baixar os JS que quero usar na próxima página.

Algo como:

 

$('.box-content table tbody tr td a').click(function() {
   	$('.link').load(this.href, function() {
   		$.getScript('https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js');
    	$.getScript('js/main.js');
   	});
   	return false;
   });

 

O problema é que parece que as ações dentro do jQuery estão se acumulando.

E sei que tenho que carregar todos os js em todas as páginas que chamo, pois se eu não o fizer, é como se aquela nova página não possuísse js nenhum, mas vejo que estão se acumulando. Existe alguma forma de chamar o código, mas limpá-lo de alguma forma no final para que cada vez que chamemos uma página, ser como se estivéssemos chamando aquele js pela primeira vez? (assim como funciona em casos de mudança de página normal, em que os js tem que carregar novamente em cada página).

[William Bruno 1501]

não chame o jQuery mais de uma unica vez.

 

a minha dica, é que você carregue todos os js q precisa logo de cara. Assim q o visitante entrar no site.

algo como um tudo.js; vai entrar para o cache do navegador, e ajudar bastante a velocidade do site.

[Cesão 1]

Oi, William. Obrigado pela resposta.

Eu tentei fazer isso, mas quando chamo uma página via load, é como se ela viesse sem js algum. As ações de js não funcionam dentro dela. Como devo proceder?

[William Bruno 1501]

é como se ela viesse sem js algum.

o problema não é esse.

 

Entenda oque realmente acontece:

http://wbruno.com.br/blog/2011/03/18/metodo-live-jquery/

 

 

Entendeu ? o problema não é o js, mas sim os elementos.

[Bruno Augusto 417]

Apesar de no fundo, no fundo eu achar errado, por ser um peso desnecessário, a solução é realmente como o William falou.

 

Se você na inde.html usar o index.js e através de algum link precisar invocar o clientes.js, coloque na própria index.html duas chamadas <script>, para cada um dos dois arquivos.

 

O primeiro load do visitante será lento pois todos os JavaScript'w serão baixados e armazenados em cache pela primeira vez. Mas daí pra frente, a menos que ele não limpe o cache, será mais rápido.

 

Obviamente que isso é um exemplo. Como o William deu a entender, o ideal é ter um único arquivo com TODO JavaScript necessário pelo site inteiro. Salvo a própria jQuery, claro.

[Cesão 1]

Oi, William. Tudo bem?

 

Troquei o código que mandei no primeiro post, por isso:

 

$('.box-content table tbody tr td a').live('click', function() {
       $('.link').load(this.href);
       return false;
   });

 

Ele até que funcionou bem no primeiro click, carregou via ajax e parou de acumular no primeiro nível, mas aparentemente ele não levou as ações dos js externos para as páginas internas. As páginas internas, carregadas por ajax, não possuem mais as ações de jquery. Como faço para as páginas internas manterem suas ações?

[William Bruno 1501]

é a mesma coisa.

 

cada elemento novo inserido, vai precisar ser atrelado dinamicamente.

[Cesão 1]

Mas na verdade já chamo todos os jQuery na primeira página. Achei que com esse código eu não precisaria ficar chamando novamente, não é isso?

Como faço para as páginas que chamei via load receberem sa ações jQuery também?

[William Bruno 1501]

usando o .live() ou o .delegate() em todos os objetos que você precisar criar dinamicamente.

 

 

ou seja, vou falar de novo: o problema não é o js, mas sim os objetos.

[Cesão 1]

Legal, consegui aqui. Obrigado.

Apenas uma coisa. tem limite de níveis?

 

Pois fiz o primeiro load, ok, as ações vieram junto. No segundo, também. No terceiro, não. Um load dentro do outro.

[William Bruno 1501]

não conheço limite.. tem q analisar o seu caso em particular para ver oq ocorre.

 

aparece algo no console de erros ?

[Cesão 1]

Nada. Limpinho, apenas erros de CSS, por causa de pseudo-css.

Percebi algo estranho. Ele até leva os javascripts, mas um deles demora mais que os outros, e esse tempo, acumula. Deixe-me explicar:

 

Vamos dizer que tenho a página produtos e a página clientes. Ambos possuem um formulário de filtragem onde por jquery estilizo alguns campos. Daí vamos dizer que comece pela página de produtos. O jQuery algumas vezes demora a carregar, então o select do formulário carrega, mas demora uns 2 ou 3 segundos para tomar o estilo que desejo. Se clico para ir para a página de clientes, ele demora o dobro para estilizar os campos, se volto para a página de produtos, o triplo, e assim vai. cada vez que mudo de página, ele parece que acumula esse tempo de carregamento. Muitas vezes, chega a não carregar.

[William Bruno 1501]

tem q olhar globalmente então, para ver oq está acontecendo.

 

você parou de usar o getScript, ne?!

[Cesão 1]

Parei sim. Não tem nenhuma ação que está usando agora.

Bom, vou continuar tentando analisar, caso alguém tenha uma luz ou eu mesmo tenha, posto aqui.

E obrigado até agora, pois não conhecia o live e resolveu mais da metade dos meus problemas.

 

Sobre o getScript, qual o caso correto de usá-lo?

[Bruno Augusto 417]

Olha, até eu onde eu sei, em nenhum caso, já que isso é uma apenas uma evolução de uma gambiarra feita para brular essa "deficiência" do AJAX.

[Cesão 1]

Oi, amigos. Tive que voltar.

Estou tentando acertar desde ontem esse problema, mas não consigo. Usei o live e me dei bem em algumas ações, mas em outras não. Todas as ações que dão load em outras páginas estou usando live como vocês me indicaram.

 

Percebi que mesmo as ações que não usavam load, se eu deixasse apenas como click paravam de funcionar quando eu trocava de página. Então, coloquei live até nas ações simples, como clicks de menus sanfona, que não trocam de página.

 

O problema é que algumas ações ainda não carregam. Percebi que são aquelas que não tenho como colocar live aparentemente, como $(".datepicker").datepicker(); ou $('form').jqTransform({imgPath:'images/'});. Elas já não funcionavam mesmo quando o jQuery UI estava externo, mas agora o jQuery UI está dentro do mesmo arquivo onde faço todas as outras ações js.

 

Vocês sabem como solucionar neste caso? E tenho mesmo que colocar live em todas as ações js mesmo nas que não fazem load (chamam outra página)?

[William Bruno 1501]

aquelas que não tenho como colocar live aparentemente, como $(".datepicker").datepicker(); ou $('form').jqTransform({imgPath:'images/'});

 

 

leia esse post meu, que você vai entender:

http://wbruno.com.br/blog/2011/08/22/usando-lightbox-em-pagina-carregada-ajax/

[Cesão 1]

Oi, William. Muito bom o seu post. Obrigado.

Apenas para ver se entendi. Hoje eu coloco essas ações, como do datepicker, soltas no meu main.js (meu js global). Então, na verdade, vou ter que carregá-las em cada load, é isso?

 

Nem precisa responder. Perfeita solução William! Muito obrigado! Aprendi bastante!

[jbassani 0]

utilizei o .live com colorbox

o conteudo carregado pelo .load abre normal as janelas

porém o conteúdo aparece duplicado

alguém sabe como resolver isto?