Usando lightbox em página carregada com ajax

Quando trazemos um conteúdo com ajax, inserimos novos elementos no nosso documento.

Porém, convém notar, que essa inserção ocorre após o DOM estar pronto [document.ready], e que o que veio com ajax, é apenas texto puro. Seja formatado em XML, jSON.. mas ainda assim apenas texto.

É por esse motivo que os elementos trazidos com ajax, ainda não possuem os eventos/plugins atrelados a eles, e por isso ‘não funcionam’.

Para ilustrar, veja esse exemplo, usando o código do lightbox do jQuery

lightbox carregado com ajax [não funcionando]

Baixei do site oficial do plugin.
Note que com esse script:

	$(document).ready(function() {
		$('#content').load('lightbox.html');
		$('#gallery a').lightBox();
	});

Não esperamos a requisição terminar. O método .load(), faz a requisição de modo assíncrono, isto, é o restante do script não aguarda a requisição terminar para prosseguir. Portanto, a nossa tentativa de instanciar o plugin não funciona.

Temos que fazer essa rotina, assim que os novos elementos forem inseridos no DOM. Olhando o manual do .load do jQuery, notamos que a lib disponibiliza um callback para essa situação.

	$(document).ready(function() {
		$('#content').load('lightbox.html', 
			function(){
				$('#gallery a').lightBox();
			}
		);
	});

E agora, tudo funciona

lightbox carregado com ajax [ funcionando ]

Simples, não ?
Nem tanto. Não é ‘apenas isso’, ou ‘somente isso’. A solução é simples, porém, sem toda a teoria que me levou a ela, eu não conseguiria saber que era isso que eu deveria fazer.

32 Comments

  1. no caso de eu nao usar o jquery
    usar o javascript normal

    ficaria como
    preciso importar esses dois arquivos

    http://www.atlivre.com/js/jquery-1.7.min.js
    http://www.atlivre.com/js/slimbox2.js

    como que fica??
    desde ja agradeço!

    • Os arquivos ficam do lado de fora, na página que já está carregada.

      oq vc deve fazer, é no success do ajax, atrelar os plugins q vc quer.
      Só que se vc vai usar o jQuery, “js/jquery-1.7.min.js”, então faça ajax com jQuery logo também.

  2. Poo passei pra ajax, mas estou tendo problemas
    vou explicar como é minha página
    no site em que estou trabalhando o usuário cadastrado pode inserir produtos

    e na página de edição de produtos eu fiz um script em ajax que para cada tecla digitada chame a requisição ajax
    assim vai eliminando os resultados conforme ele vai digitando

    fiz com javascript e estava tudo certo
    porém agora com ajax está ficando MUITO pesado o script

    está assim (#buscatexto é o campo de texto e #busca é a div onde o conteúdo vai)

    http://pastebin.com/QvKGfEkD

    como que eu faço para o script ficar mais leve??
    e outra coisa. no success do ajax, como que eu atrelo os plugins??

    desde já agradeço =DD

    • Está explicado nesse post, como vc atrela os plugins no success do AJAX.
      Leia tudo novamente.

      Primeiro vc precisa identificar o motivo de estar “pesado”. Só então conseguirá otimizar.

  3. valeu brother, me ajudou bastante !

  4. Erivaldo Lopes

    janeiro 17, 2012 at 02:23

    Show Lekk!!

  5. Bruno, eis um desafio:

    eu fiz uma página que cria até nove formulários com um campo file em cada um, todos os formulários são diferenciados entre si(além do id e name respectivo) por um campo hidden que carrega como valor um id para as informações que ali estarão.

    cada um desses forms tem como target um iframe apenas, que fica no fundo da página depois dos nove formulários criados, ou seja, o envio dos files vão para esse único iframe.

    após o tratamento dos envios pela página receptora lá dentro do iframe,eu usei o jquery para devolver à página pai a resposta do que ali aconteceu, até aí tudo ótimo, ele envia tudo para uma div no seu respectivo formulário que criei daqueles nove o qual foi processado algum envio.

    o problema é que a resposta traz um conteúdo que usa jquery, se trata de uma pequena tabela com até 10 fotos as quais deveriam respoder a um clique nelas, porém isso não se dá.

    como isso se resolveria?

    – eu já tentei puxar de novo o conteúdo do código do jquery nessa resposta do tratamento das fotos…
    – já tentei substituir meu comando por um script simples só de javascript e não funcionou( foi um alert(‘oi’) ).
    – já separei o conteúdo em outro arquivo, onde não existe tantos pulos de página para página, e funcionou.
    – já testei colocar o terceiro parâmetro do .load como vc mostrou e não funcionou, talvez nisso eu esteja errando, pois eu coloquei também o segundo parâmetro com variáveis e o function() no terceiro parâmetro.

    adorei seu blog!!! muito obrigado de qualquer maneira!

    • Oi Gustavo, veja:
      “resposta traz um conteúdo que usa jquery”. No instante em que vc colocar o conteúdo na página, vc deve instanciar o plugin jQuery logo em seguida.
      Mas se for apenas eventos que vc mesmo criou, então o método .live() resolve.

      Lembrando que o o seu codigo escrito em jQuery já deve estar carregado na pagina.

  6. Olá Bruno, muito obrigado pela resposta, mas infelizmente nunca precisei antes ‘instanciar o plugin jQuery’ então não imagino como se faça isso, tem como você me explicar? Valeu cara! você é foda!

  7. Valeu cara,quebrou um g… quebrou uma arvore toda!!!!

  8. Valeu William,
    seu script me serviu perfeitamente! Obrigado!

  9. Bruno como eu poderia implementar para carregar o efeito de tab do jquery ?

  10. como inserir no código abaixo (troca de abas) ?

    $(document).ready(function() { 
          	  $(".tablesorter").tablesorter(); 
     });
  11. Ola bruno, estou usando o joomla e um plugin AJAX para carregar o conteudo do site(esboço do site). Bom a finalidade do site e para uma banda de musica, e precisaria que o player ficasse tocando sem que houvesse o refresh da pagina. O plugin e maravilhoso, mas quando e carregado os modulos que utilizam os javascripsts os mesmos nao funcionam, eu estive vendo seus posts mas infelizmente nao cosegui sucesso na implementação dos codigos, sei que no site do desenvolvedor do plugin ajax ele da uma dica para usar o seguintes codigos

    FLAX.Html.onall('load', function(options){
    	window.fireEvent('domready');
    });
    

    ————————————————————————————

    function doSomethingAfterFAjxPagLoad (){
    	window.fireEvent('domready');
    };

    ————————————————————————————-

    SRAX.Filter.add({url:'/', id:fullAjaxId,  onload:doSomethingAfterFAjxPagLoad}); 
    .... 
    function doSomethingAfterFAjxPagLoad (){
    /* fix for mootools 'domready', uncomment if need*/
    /*	window.fireEvent('domready'); */
    };

    ==============================
    Mas eu não sei como devo proceder com eles, e possivel vc me dar essa força? abraço e parabéns pelo tutorial.

  12. Bom Dia,

    Adorei a solução de como usar o lightbox em pagina carregadas com ajax.
    Estou com uma necessidade e gostaria se vc consegue me ajudar, preciso dever um site que navegação das pagina seja feita de forma suave (ok vc mostrou o carregamento sem refresh), na pagina de produtos vou necessitar mostrar a lista de produtos com fotos, mas cada produto vai mostrar apenas uma foto na galeria, apenas ao clicar nessa foto vou mostrar as fotos existentes a esse produto via lightbox.
    Só que queria que esse lightbox alem da imagem, tb mostra-se um descritivo do produto na lateral da imagem.

  13. Boa tarde amigo, estou usando seu código no wordpress e o lightbox não fuinciona podes me ajudar??
    obrigado

  14. Olá!
    Estou tentando fazer desse modo, porem, não funciona.

    	$(document).ready(function(){
    		var content = $('#content');
    		// pre carregando o gif
    		loading = new Image(); loading.src = 'imagens/loading.gif';
    		$('#menu a').live('click', function( e ){
    			e.preventDefault();
    			content.html( '' );
     
    			var href = $( this ).attr('href');
    			$.ajax({
    				url: href,
    				success: function( response ){
    					//forçando o parser
    					var data = $( ''+response+'' ).find('#content').html();
     
    					//apenas atrasando a troca, para mostrarmos o loading
    					window.setTimeout( function(){
    						content.fadeOut('fast', function(){
    							content.html( data ).fadeIn();
    						});
    					}, 5 );
    				}
    			});
     
    		});
    });
    	
    	
    	$(document).ready(function() {
    		$('#content').load('lightbox.html', 
    			function(){
    				$('#gallery a').lightBox();
    			}
    		);
    	});
    	
    
  15. a galeria está funcionado, porem, quando adiciono o javascript para requisão ajax as imagens abrem em outra janela. Já vi seu outro post, onde fala sobre lightbox e ajax, mas não consegui fazer funcionar daquela forma. Eu uso um arquivo modulos.php e chamo ele mesmo dentro de um div content filtrando um SQl via parametro URL. Isso está legal, mas as imagens perdem o efeito do lightbox.

  16. Boa tarde bruno estou com uma dificuldade nesse codigo, estou implementando em mas o que ocorre, se eu entrar direto na galeria ele pega e funciona normalmente abre as fotos mas quando entro na pagina inicial e mando pra galeria as fotos nao abrem no lightbox

    tipo aqui abre normal http://rafaelaalves.com/pjax/galerias.php?galeria=casais
    mas quando entro em
    http://rafaelaalves.com/pjax/ e clico em fotos elas nao abrem

  17. Você ainda visualiza essa postagem? Poderia me ajudar? Grato

  18. não esta a dar para aceder ao exemplo… o link nao funciona…era mesmo disso que eu estava a precisar e nao encontro na net!

  19. Cara, consegue me ajudar com isso aqui? o que devo alterar?
    o lightbox funciona quando abro direto a pagina… mas se for carregado com ajax ja nao esta funcionando…. tentei usar a função on() em vez de click() mas aí ele abria uma nova pagina com o conteudo e vez de carregar na div=”conteudo”

    estou quebrando cabeça e n consigo… isso pk eu tb n entendo essas linguagens

    http://pt.stackoverflow.com/questions/103906/lightbox-em-p%C3%A1gina-carregada-com-ajax

    grato

  20. Eu fiz assim, coloquei todos os códigos na pasta raiz do lightbox.HTML, e chamei o evento na susses do ajax, mas mesmo assim não abre, acho q meu errro é ao não chamar o plugim do JavaScript.

  21. Boa noite. Excelente explicação, pode ser minha salvação.
    E como seria este mesmo caso co o plugin Jquery File Upload? tentei algo do tipo

    	$("#busca").on("click",function() {
    		$('#conteudo').load('upload.html', 
    			function(){
    				$('#div_danova_pagina').fileupload();
    			}
    		);
    	})

    mas nao funcionou … pode me ajudar ?

  22. Olá Bruno, blz irmão? Estou tendo uma dificuldade, creio que discutida nesse artigo, após adicionar a navegação por AJAX todos as funções das paginas carregadas deixam de funcionar. eu tentei trabalhar da seguinte maneira mas ainda assim não obtive exito, pode me ajudar?

    $(document).ready(function (){
    	
    	NavigatorAjax();
    	FormIndex();
    	ButtonAjaxOn();
    	
    });
    
    function ButtonAjaxOn(){
    	$('a.ajaxon').on('click', function(e) {
    		e.preventDefault();
    		$("#loading").fadeIn();
    		var content = $('#container');
    		var href = $(this).attr('href');
    		$.ajax({
    			url: href,
    			success: function(response) {				//forçando o parser
    				var response = $( ''+response+'' );
    				
    				var data = response.find('#container').html();
    				//apenas atrasando a troca, para mostrarmos o loading
    				window.setTimeout(function() {
    					$("#loading").fadeOut('slow', function() {
    						content.html(data).fadeIn('slow');
    						var title = response.find('title').text();
    						window.history.pushState(href, title, href);
    						document.title = title;
    					});
    				}, 0);
    			},
    		});
    	});
    }
    
    function FormIndex(){
    	$("#login").submit(function() {
    		$.ajax({
    			url: './Public/System/new/_sys.submit.php',
    			type: 'POST',
    			data: $("#login").serialize(),
    			dataType: 'json',
    			cache: false,
    			success: function(result) {
    				if (result['1'] == false) {
    					$(".alert").addClass("alert-danger alrt-dng").fadeIn("slow", function() {
    							$("input[name='username']").addClass("errorfocus");
    							$("input[name='password']").addClass("errorfocus");
    						}).html("" + result['2']).delay(5000).fadeOut("slow", function() {
    							$("input[name='username']").removeClass("errorfocus");
    							$("input[name='password']").removeClass("errorfocus");
    						}),
    						$("input[name='username']").val(''),
    						$("input[name='password']").val('')
    				} else {
    					window.location.reload()
    				}
    			}
    		});
    		return false;
    	});
    	
    	$("#newregistration").submit(function() {
    		$.ajax({
    			url: './Public/System/new/_sys.submit.register.php',
    			type: 'POST',
    			data: $("#newregistration").serialize(),
    			dataType: 'json',
    			cache: false,
    			beforeSend: function() {
    				$("#loading").fadeIn()
    			},
    			success: function(result) {
    				$("#loading").fadeOut();
    				if (result['1'] == false) {
    					$('html, body').animate({
    						scrollTop: 0
    					}, 'slow');
    					$(".alert").addClass("alert-danger alrt-dng").fadeIn("slow").html(" Ocorreram os Seguintes erros durante o registro:" + result['2']).delay(50000).fadeOut("slow", function() {
    						$(".alert").removeClass("alert-danger alrt-dng");
    					});
    				} else {
    					location.href = '/me'
    				}
    			},
    			error: function() {
    				$("#loading").fadeOut();
    				$('html, body').animate({
    					scrollTop: 0
    				}, 'slow');
    				$(".alert").addClass("alert-danger alrt-dng").fadeIn("slow").html(" Ocorreu um erro durante a solicitação.").delay(5000).fadeOut("slow", function() {
    					$(".alert").removeClass("alert-danger alrt-dng");
    				});
    			}
    		});
    		return false;
    	});
    	
    	$("#forgot").submit(function() {
    		$.ajax({
    			url: './Public/System/_sys.submit.forgot.php',
    			type: 'POST',
    			data: $("#forgot").serialize(),
    			dataType: 'json',
    			cache: false,
    			//async: false,
    			beforeSend: function() {
    				$("#loading").fadeIn();
    			},
    			success: function(result) {
    				$("#loading").fadeOut();
    				if (result['1'] == false) {
    					$(".alert").addClass("alert-danger alrt-dng").fadeIn("slow").html("" + result['2']).delay(5000).fadeOut("slow", function() {
    						$(".alert").removeClass("alert-danger alrt-dng");
    					});
    				} else if (result['1'] == true) {
    					$(".alert").addClass("alert-success alrt-scs").fadeIn("slow").html(result['2']).delay(5000).fadeOut("slow", function() {
    						$(".alert").removeClass("alert-success alrt-scs");
    					});
    				}
    			},
    			error: function() {
    				$("#loading").fadeOut();
    				$(".alert").addClass("alert-danger alrt-dng").fadeIn("slow").html(" Ocorreu um erro durante a solicitação.").delay(5000).fadeOut("slow", function() {
    					$(".alert").removeClass("alert-danger alrt-dng");
    				});
    			}
    		});
    		return false;
    	});
    }
    function NavigatorAjax(){
    	$('#cssmenu a').on('click', function(e) {
    		e.preventDefault();
    		$("#loading").fadeIn();
    		var content = $('#container');
    		var href = $(this).attr('href');
    		$.ajax({
    			url: href,
    			success: function(response) {
    				//PLUGGINS
    				var FormIndex = FormIndex();
    				var ButtonAjaxOn = ButtonAjaxOn();
    
    				//FORÇANDO PARSE
    				var response = $( ''+response+'' );				
    				var data = response.find('#container').html();
    				
    				//apenas atrasando a troca, para mostrarmos o loading
    				window.setTimeout(function() {
    					$("#loading").fadeOut('slow', function() {
    						content.html(data).fadeIn('slow');
    						var title = response.find('title').text();
    						window.history.pushState(href, title, href);
    						document.title = title;
    					});
    				}, 0);
    			},
    		});
    	});
    }
    

    Ao carregar primeiro a página, todas as funções funcionam normalmente, mas apartir do momento em que eu navego com ajax, as funções deixam de funcionar, e o navegador não apresenta nenhum log de error. tentei fazer o que você solicitou nesse post, em retornar a chamar a função no success do AJAX mas também não obtive exito.

    • Oi Saulo, além disso você precisa de event delegate

      troque:
      $(‘a.ajaxon’).on(‘click’, function(e) { por
      $(‘body’).on(‘click’, ‘a.ajaxon’, function(e) { em todas as suas chamadas.

Deixe uma resposta

Your email address will not be published.

*