[Resolvido] Carregamento - Todo site em AJAX

[Okani Yori 0]

Oi pessoal, estou criando um site de E-commerce totalmente Ajax, ou seja, carrega uma vez a página com todo o conteúdo e depois só o que for pedido por métodos como Load, Post, Get via Jquery.

 

Vamos aos problemas:

 

Eu juntei todos os arquivos JS em um arquivo principal que contem praticamente chamadas Post e Get para o controlador que devolve o conteúdo a ser chamado. Ex: Clico em cadastrar usuario e uma função como essa

 

$('a#cadastro').click(function(e) {
	e.preventDefault();
	var url = $(this).attr("href");
	$('#sub_c').load(url);

});

Faz a chamada do conteúdo a ser carregado (formulário com o cadastro). O problema é que após carregar essa div com esse formulário ou qualquer outro conteúdo, o JS que foi carregado antes deixa de funcionar nessa DIV com o conteúdo carregado por Ajax. Logo como faço para não precisar carregar novamente o JS, sendo que ele já foi carregado antes e não mudei de página, apenas fiz uma chamada Ajax.

 

Enquanto não resolvi esse problema, eu tive que adicionar o JS em todo sub pagina, assim o JS funciona nela, mas apareceu outro problema. A primeira vez, carregava a pagina + JS, depois que clico de novo no link carrega a pagina + js + js e vai aumentando a cada clique o carregamento do JS, alguém tem ideia de qual seria o problema e como resolver. Claro que se conseguir só chamar uma vez o JS na página principal, esse problema é resolvido automaticamente.

 

 

E o outro problema que resolvi:

   $(window).bind("popstate", function(e){
       $("#conteudo").load(location.pathname);
   });

Ela basicamente serve para armazenar o histórico dos sites, ou seja, ao voltar ou avançar carrega a pagina.

 

O problema é que a primeira vez que carrego o site, ele carrega 2 vezes a página.

Consegui resolver esse primeiro problema, com o seguinte código

 $(window).unbind('popstate');

$(window).bind('popstate', function () {
	var popped = ('state' in window.history),
		initialURL = location.href
		$(window).bind('popstate', function (event) {
			// Ignore inital popstate that some browsers fire on page load
			var initialPop = !popped && location.href == initialURL;
			popped = true;
			if (initialPop) return;
			$("#conteudo").load(location.pathname);
		});

[William Bruno 1501]

leia esses 2 links:

 

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

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

[Okani Yori 0]

Muito obrigado, realmente era isso que eu precisava. Estou usando a função On que basicamente é a Live, só que mais atual.

 

Ainda não está 100% (falta apenas fazer isso com o validete e outros métodos mais complexos), mas agora sei o caminho para seguir em frente, quem tiver dúvidas iguais posso tentar ajudar.

 

Agora ficou assim

$('div').on("click", "#cadastro",function(e){  
	e.preventDefault();
	var url = $(this).attr("href");
	$('#sub_c').load(url);
});

 

Pelo que entendi o método On, precisa de um seletor pai e depois um especifico. O ruim que fica estranho, um exemplo $('div').on('click','tbody a', function(e){

e antes era $('tbody a').click(function (e) { , está certa essa modificação usando on? . Sei que está funcionando, mas pensei que poderia deixar $('tbody').on('click','a', function(e){ , mas não funcionou.

 

Grato

[William Bruno 1501]

você pode fazer normal com o on sim:

 

 $('div "#cadastro"').on("click", 

[Okani Yori 0]

você pode fazer normal com o on sim:

 

 $('div "#cadastro"').on("click", 

 

realmente funcionou, deixei assim

$('a#cadastro').on("click", function (e) {

Obrigado novamente. Administrador já pode fechar o tópico, problemas resolvidos.