Carregando conteudo com ajax, trocando a URL com jQuery

Vamos lá.. esse post é mais ou menos uma mescla de outros 3 posts meus.
Nesse script eu vou, carregar conteudo com ajax(usando jQuery), vou deixar o lightbox funcionando, e também fazer com que a URL mude.

Para que o visitante possa dar F5, e o conteudo “continuar lá”(sem voltar para a index). E também, para que ele consiga sei lá, enviar para um amigo, uma página interna do seu site.

Bom, o código javascript ficou assim:

	$(document).ready(function(){
		var content = $('#content');

		//pre carregando o gif
		loading = new Image(); loading.src = 'ico-loading.gif';
		
		
		
		$('#menu a').click(function( e ){
			var arq = pega_arq( $( this ).attr('href') );
			abre( arq, content );
		});
		
		
		/* iniciando com a home */
		abre( pega_arq( document.location.href ), content ); 
	});
	function abre( href, content ){
		content.html( '<img src="ico-loading.gif" />' );
		

		$.ajax({
			url: href,
			success: function( response ){		
				content.delay(1000).hide().html( response ).fadeIn();
				
				init_plugins( href );
			}
		});
	}
	function pega_arq( url ){
		var file = url.split('#');
		return ( file[1] ) ? file[1]+'.html' : 'home.html';
	}
	function init_plugins( href )
	{
		if( href=='lightbox.html' )
		{
			$('#gallery a').click(function( e ){
				e.preventDefault();
			})
			$('#gallery').lightBox();
		}
	}

Usando lightbox em página que foi carregada com ajax

É isso. Comentem! Sério.. se vc usar, deixa um comentário aqui..

24 Comments

  1. Parabéns, muito bom o post.

  2. Evandro Oliveira

    novembro 25, 2011 at 16:22

    Se usarem, deixem um comentário. Se não usarem também!!!! hahaha.
    Agora, Will, não funfou no Opera 🙁
    Tem restrição quanto a usar HTML5??
    Você poderia utilizar o history.pushState()

    Um exemplo de quem já está utilizando é o github!

  3. Rafael Guimarães

    janeiro 2, 2012 at 01:06

    Amigo, está funcionando perfeitamente! Código muito didático, obrigado pela contribuição.

    Agora estou com o seguinte problema:
    Eu substitui o seletor “#menu a” por “.ajax”. Sendo assim, qualquer link onde a classe “ajax” está setada, o script carrega sem dar refresh.

    Agora surgiu um problema… Quando carrego um arquivo para dentro do “#contet” através do seu script, e nesse arquivo existe um link com a classe “ajax”, ele não carrega sem o refresh.

    Pode me ajudar?
    Obrigado. E me desculpe… Estou entrando no mundo Javascript e jQuery agora.

  4. Rafael Guimarães

    janeiro 2, 2012 at 11:55

    Sensacional!
    Em:

    $('.ajax').click(function( e ){

    bastava alterar para:

    $('.ajax').live('click', function( e ){

    Obrigado!

  5. Olá!
    gostaria de saber como que eu poderia fazer isso sem usar o hash.
    só consigo achar soluções com o hash. Gostaria de fazer como o facebook, ele abre um lightbox e modifica a url quando se abre uma foto.

    Achei esse site que faz o mesmo.
    http://flaviomoraispiaui.blogspot.com/

    como que eu faço isso??
    desde já agradeço

  6. Fala meu amigo, tudo bem?

    Então, implementei sua solução e funcionou perfeitamente, só que preciso de sua ajuda.

    Como posso validar um Not Found para a requisição? Tipo o arquivo do link não existir.

    Pois caso tenha algum link quebrado não é exibida nenhuma mensagem de erro.

    Tentei colocar no error: do Ajax, mais não foi.

  7. Mto massa manow, vou testar aqui e ver o que dá!
    Mas uma pergunta: como faço com os links HTML, pode ficar normal mesmo?

  8. Eii! Muito obrigado por compartilhar!! Realmente me ajudou muito.
    =)

  9. Carlinhos Lehn

    junho 27, 2012 at 15:41

    E como fica a questao do historico, se o cliente clicar no botao voltar do navegador somente trocando a hashtag, a pagna nao recarrega quando trocamos somente a hash.
    Algum metodo que poderia ser implementada ?

    • Oi Carlinhos, nesse caso a solução mais bonita, é usar o history.pushState, dá uma olhada aqui no meu blog, que eu já fiz post sobre isso.

      []s!

  10. KARLOS EDUARDO

    agosto 23, 2012 at 10:37

    FUNCIONOU PERFEITAMENTE…TIVE DIFICULDADE DE ENTENDER A UM TEMPO ATRAS .. O CÓDIGO .. DEVIDO A POUCO CONHECIMENTO… MAS AGORA … UMA BELEZA… OBRIGADO PARCEIRO CONTINUE ASSIM…

  11. Olá Wbruno, sempre obtive exito em seus tutoriais. Mas estou apanhando com uma implementação. Quero utilizar o template http://pritesh.info/vivid-photo-2/ que é baseado em várias divs com carregamento interno em uma pop up, não consigo deixar o link estático ou #! para que ele seja rastreado pelo google boot, gostaria de uma luz qual q maneira mas eficaz, pois tentei até o Pushstate e também não obtive exito.
    Obrigado.

  12. mano como uso isso usando um sistema de páginação em php ? sempre fica carregando ….

  13. Bruno, implementei uma linha na função pega_arq… ficou assim:

    function pega_arq( url ){  
    	var file = url.split('#');  
    	var file2 = file[1].split('?');  //implementação quebra pega get
    	return ( file2[0] ) ? file2[0]+'.php?'+file2[1] : 'body.php';  
    }
    

    fiz um novo split com a string da variável file buscando o “?” e joguei o array na url em sequência, usando nova variavel file2.

    estou com dificuldade pra fazer POST sem refresh… quando conseguir coloco aqui.

    abs

  14. Vitor Morales

    abril 3, 2013 at 20:21

    Muito bom cara !..
    Só uma dúvida..
    E se o cara quiser voltar no histórico do navegador ? Do tipo ele está em uma página e quer retornar para a página anterior .. e ai ?

  15. Olá. Estou utilizando esta função em meu site, o problema encontrado é em relação ao GOOGLE ele não indexa as páginas do meu site. Como posso fazer para o google indexar as páginas? Obrigado. Excelente código.

  16. Error 404 – Not Found
    The page you were looking for has either been deleted or moved.

    :/

    Não consigo visualizar o exemplo.

  17. Oi, Bruno. Muito bom o seu código. O Daniel Sobrinho implementou o trecho abaixo, caso precise passar alguma variável:
    function pega_arq( url ){
    var file = url.split(‘#’);
    var file2 = file[1].split(‘?’); //implementação quebra pega get
    return ( file2[0] ) ? file2[0]+’.php?’+file2[1] : ‘body.php’;
    }

    Esse código do Sobrinho ficou legal, mas só carrega a página se clicar no link. Ou seja, aparece somente o menu sem nenhum conteúdo na div #content. E, sem dúvida, eu criei a página ‘body.php’ 🙂

    Tentei muito fazê-lo carregar assim que entra no site mas não consegui. Se você tiver alguma dica, agradeço.

  18. Bruno estou tentando utlilizar esta função mais o site nao carrega sem reflesh

  19. Amigo parabéns pelo seu site… muito bom seus scripts…

    Esse era exatamente oq eu estava precisando, rodou perfeitamente. Só tenho 1 dúvida.

    Não consegui abrir um link quando está dentro da página, dentro da div (#content)… como que eu faço pra abrir esse link? tem que criar outra função??

    Desde já, obrigado.

Deixe uma resposta

Your email address will not be published.

*