Navegação sem refresh – carregando conteúdo com ajax em div 2

Eu já havia postado essa solução: http://wbruno.com.br/ajax/navegacao-sem-refresh-carregando-conteudo-ajax-em-div/.

Porém, ai a galera começa a querer um ‘efeito de fade’, ‘um gif de carregando..’.
E para resolve isso, é melhor que descartemos a função .load() do jQuery, para usarmos uma em que temos mais controle do que está ocorrendo.

Nesse caso, vou optar pelo $.ajax, já que $.get e $.post, são apenas atalhos para ela.
A maior alteração, será nesse trecho do script anterior:

$("#content").load( href +" #content");

Vamos fazer algo mais sofisticado.

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		var content = $('#content');

		//pre carregando o gif
		loading = new Image(); loading.src = 'loading.gif';
		$('#menu a').live('click', function( e ){
			e.preventDefault();
			content.html( '<img src="loading.gif" />' );

			var href = $( this ).attr('href');
			$.ajax({
				url: href,
				success: function( response ){
					//forçando o parser
					var data = $( '<div>'+response+'</div>' ).find('#content').html();

					//apenas atrasando a troca, para mostrarmos o loading
					window.setTimeout( function(){
						content.fadeOut('slow', function(){
							content.html( data ).fadeIn();
						});
					}, 500 );
				}
			});

		});
	});
	</script>
</head>
<body>
	<ul id="menu">
		<li><a href="index.html">Home</a></li>
		<li><a href="fotos.html">Fotos</a></li>
		<li><a href="contato.html">Contato</a></li>
	</ul><!-- /menu -->
	<div id="content">
		<h1>Bem Vindo!</h1>
		<p>Essa eh a home desse nome pseudo-site.</p>
	</div><!-- /content -->
</body>
</html>

Apenas lembrando que as páginas internas, devem continuar com o código HTML completo, pois queremos que nosso site continue funcionando caso não haja suporte a javascript no navegador do usuário.

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
	<ul id="menu">
		<li><a href="index.html">Home</a></li>
		<li><a href="fotos.html">Fotos</a></li>
		<li><a href="contato.html">Contato</a></li>
	</ul><!-- /menu -->
	<div id="content">
		<h1>Fotos</h1>
		

		Fotos fotos fotos
	</div><!-- /content -->
</body>
</html>

Demonstração

Se vc já usou esse script

E teve problemas com os outros scripts do seu site, veja estes links:

Usando lightbox em página carregada com ajax
Carregando conteudo com ajax, trocando a URL com jQuery
O método .live() do jQuery
Como debugar JavaScript com o Firefox ? – erros comuns

130 Comments

  1. Tiago Beviláqua

    maio 27, 2011 at 09:38

    Legal. Manja fazer um site tipo blog ir carregando os posts conforme o usuário vai rolando a página pra baixo? (Assim como o Twitter.com faz)

    • Oi @Tiago, então.. não é difícil cara.. vc precisa no evento onScroll, verificar se a altura da rolagem (scrollTop), está no máximo ou não.

      Se estiver, vc dispara a requisição e trás mais dados.
      Vou tentar fazer um script desses para o WP e posto por aqui.

  2. Bruno Augusto

    junho 1, 2011 at 23:21

    Grande William.

    Sempre tive curiosidade nesse assunto, mas apesar de fazer de um tudo com jQuery nunca me atrevi a tentar fazer navegação AJAX.

    Mas assim, de curioso que sou teste o script da Parte 1 do Artigo e funcionou numa boa. Já esse não.

    Faltou alguma coisa?

    • Opa! Beleza Bruno ^^

      Então cara, o script é somente esse que postei, está completo.
      Testei antes de colocar aqui no blog, e funciona sim.. da versão 1 para essa versão 2, a única troca é somente o script mesmo.

      Atualizei o post, dá uma olhada.

      []s!

  3. William
    parabens pelos scripts!!!
    porem gostaria de perguntar: a imagem não aparece de forma nenhuma!
    estou rodando em um servidor localhost, salvei uma loading.gif na pasta dos demais arquivos, mas nao mostra nada.
    poderia dar uma luz???
    obrigado
    abraços

    • ah, em tempo
      a página carrega corretamente, só q não mostra a imagem
      obrigado

      • Opa.. tinha um errinho ali, desculpe. Qndo colei o código no blog, o WordPress acabou comendo um trecho:
        Corrija ai, linha 14:
        content.html( ‘<img src=”loading.gif” />’ );

  4. cara
    muito obrigado, funcionou perfeitamente!!!

    só gostaria de tirar uma duvida com vc: por que é necessário as linhas 10, 11?

    q são essas:

    //pre carregando o gif  
    loading = new Image(); loading.src = 'loading.gif';

    mais uma vez, obrigado

    • Essas linhas são necessárias para fazer um preload do gif de loading.

      se não, na primeira vez que vc fizer o append() do .gif, o loading poderia demorar a aparecer, pois só seria requisitado nesse instante.
      Com essas linhas, requisito o .gif antes, assim garantindo que ele apareça, ‘sem demorar’.

  5. Ótimo tutorial! parabéns!

    Só uma coisa, como faço para imagem loading ficar centralizada na tela?

    abraços

    • Ai é css puro amigo. position: absolute; top: 50%; left: 50%; altura e largura definidas, e margin negativas para compensar as dimensões do objeto.

      • Mas intaum, eu crio uma classe em css para a imagem, mas eu preciso chamar ela no script?

      • O posicionamento deverá ser feito com css. Como vc vai colocar a imagem tanto faz.

      • Opa, resolvido aqui, chamei o ID do css na img dentro do script, simples e eu me matando atoa! hehehe valew!

        content.html( '' );
  6. Outra dúvida.

    Se em alguma página do site eu for colocar uma galeria lightbox? Vai dar conflito acredito.

    Abraços

  7. Olá. Tenho uma dúvida.

    Em termos de processamento do servidor, o que é mais pesado? Uma página com o refresh convencional ou com o ajax deste tutorial? Ou não tem diferença nenhuma?

    Abraço. Estou gostando muito do seu blog.

    • Oi Reese.
      Naturalmente, acredito que a página com refresh convencional seja ‘mais pesada’, pois trafega mais dados a cada requisição.

      Porém não acredito que deva ser isso, visto a pequena diferença, que deva nortear a sua escolha, entre uma opção e outra.
      Pense sempre no usuário, e se era necessário usar ajax, visto que, pode trazer outros problemas, como ‘não funcionar javascript trazido’..

  8. Olá. Obrigado por responder.
    Mas fiquei com outra dúvida. No caso do seu tutorial, você diz que é necessário deixar todas as páginas “inteiras”, pra quem não tem suporte a javascript poder acessar o site. Então, na prática, olhando pelo servidor, é o mesmo que um refresh convencional, correto? O cliente, ao clicar no menu, manda a requisição da pagina, e o servidor responde enviando a pagina completa, não apenas a div “content”, e o navegador pega só a div em questão. É isso mesmo?

    • Sim, exatamente.

      Você entendeu correto. O único cenário em que ‘uma navegação ajax’, é justificável, é em uma webrádio, onde a troca de página, não pode parar a música.
      Em qualquer outro tipo de site, eu não recomendo, usar navegação com ajax, pois não há nada que justifique.

  9. Olá,

    Como faço para que ao recaregar um arquivo dentro do div #content , não seja interrompida a execução do javascript que tem na página carregada?

    Valeu

    • Não traga js com ajax, e leia meus outros 3 artigos,
      – sobre o .live(),
      – sobre atrelar eventos dinamicamente, e
      – sobre usar lightbox em página carregada com ajax.

  10. Mais uma vez obrigado. Agora, só pra concluir, na sua opinião, o Ajax não serve pra melhorar a performance de um site, e sim o modo como o usuário lida com ele. É mais ou menos isso?

    Eu estava buscando uma solução para o problema de sobrecarga do meu site. São muitas requisições por cada página carregada, e imaginei que o Ajax fosse uma alternativa para chamar só uma div, ao invés de uma página inteira, diminuindo a demanda de requisições.

    Muito obrigado pelas informações.

  11. Olá tudo Bem?

    Fiz o procedimento como descrito mais
    não carrega a pagina , tipo fica a gif carregando mais não aparece
    a pagina que foi chamada , onde posso estar errando???

  12. Alison Horacio

    janeiro 6, 2012 at 16:30

    Cara, gostei do teu código, mas ao tentar incluir no site que estou fazendo para teste deu pau com os outros scripts que existiam no mesmo…

    Ao carregar a página na primeira vez funciona normalmente, mas se clicar novamente para abrir a mesma seção (por exemplo contato e suas validações) todo o script de validação é desativado, existe alguma solução para isso??? vlw!!!

    • Cara.. a galera tem perguntando muito isso.
      Dá uma lida nos comentários acima do seu, e veja que editei esse post, colocando outros 4 posts meus, que resolvem/indicam soluções para isso.

      []s!

  13. William

    ja uso seu script a um bom tempo e com sucesso.

    porem, tentei fazer uma modificação e nao estou conseguindo. o que eu gostaria, se possivel, é de ao invés de ele sumir com todo o conteudo e colocar o gif no lugar, ele fizesse o conteudo ficar “cinzento” (nao sei se é assim que se escreve, seria igual as janelas modal mas somente no conteudo) e colocasse o gif em cima do conteudo.

    isso seria interessante, pois uso seu script para resgatar tabelas grandes, e as vezes as paginas ficam “subindo e descendo”. espero ter sido claro. obrigado

  14. Olá.

    Comigo aconteceu o mesmo problema do Edinei.
    Fiz o procedimento como descrito, mas não carrega a página.
    O gif fica carregando eternamente e não aparece a página que foi chamada.

    • Oi Marcy,

      para esse problema que vc e o Edinei estão enfrentando, vc precisa debugar o script, ver se o arquivo que está sendo chamado existe, e se não há nenhum outro erro de script no teu documento.
      Leia os meus posts sobre debugar javascript e ajax.

      []s!

  15. Opá.
    Amigo eu estou usando o seu script em uma web jsp, na verdade estou reformulando ela só que foi feita com frames a web tem mais de 4 anos que não foi alterada, e muita coisa vem de classes java.
    então eu fiz tudo certo chega fazer o get pelo uq vi no debug mostra todo o conteudo mas não exibe na div tem alguma idéia do que pdoe estar ocorrendo?

  16. Boa tarde, Bruno! Primeiramente gostarai de parabenizá-lo pelo código e ainda mais compartilhar com todos.

    Na realidade o que estou querendo é bem parecido com isso, porém, ao invés de serem links do menu, eu possuo setas (esquerda e direita) e gostaria de avançar a página e retornar à anterior com esse fade. Você sabe me dizer como eu poderia chegar nisso?

    Grato por sua atenção.

  17. No site que eu estou trabalhando, tem a página inicial com as turmas do professor. Ao lado de cada turma, tem um botão “Alunos”, e quando clica no botão, aparece a lista com os nomes. Isso acontece via Ajax. Pois bem, quando eu clico no botão Alunos, enquanto não carrega a lista, deve aparecer uma mensagem ao lado do botão que diz: “Buscando, aguarde….”. Até então isso acontece, o meu problema é que, esse aviso aparece sempre ao lado do botão da primeira turma, independente de quantas turmas eu tenha. Eu posso ter 10 turmas, se eu clicar na décima e o aviso vai aparecer na primeira linha.

    Como eu faço pra aparecer exatamente ao lado do botão onde eu estou clicando?

  18. Eu fiz um teste, quando incluo alguma coisa em uma das páginas, como imagens, campos de formulário ele não exibe, exibe só os testos, isso no IE, já no Chrome aparece normalmente.

    Por que?

    • Neste teu caso, deve ser pq o script está se perdendo nos caminhos.
      No caminho das imagens e do css. Verifique.

  19. Para que serve, o que ele é :

    var content = $('#content');
    • Oi Nathália,

      Essa linha atribui a variavel “content” o retorno da função $ do jQuery.
      Dessa forma, ganho performance e deixo o meu script mais legível.

      É apenas uma atribuição de variável.

  20. Olá,
    como faço para inserir em cada página html carregada dentro de uma div, um botão fechar, onde ao clicar o usuário feche o conteudo html?

  21. Roberto Lunelli

    maio 28, 2012 at 03:28

    William, o tutorial em si não foca o que eu estava precisando, mas contém exato ensinamento para o que eu estava apanhando um dia inteiro. Sou noob ‘as ganha’ em jQuery e não estava conseguindo exibir apenas o conteudo de uma div especifica do arquivo requisitado com .ajax(), só conseguia exibir o arquivo inteiro, mas com o .live() pra não perder o poder de ação e o .find() pra achar exatamente só o que eu queria… foi perfeito para um carrinho de orçamentos que estou fazendo com PHP e MySQL e agora jQuery.
    Muito obrigado por compartilhar.

  22. Roberto Lunelli

    maio 29, 2012 at 00:02

    William, nessa parte:

    var data = $( ''+response+'' ).find('#content').html();

    Não poderia ser apenas:

    var data = $(response).find('#content').html();

    ??
    Qual a diferença em relação a forma que vc fez e a forma que mencionei?
    Algo relacionado a performance ?? desculpe a noobice rs*

    • Oi @Roberto, Eu “forcei” o tipo da variavel, para ser uma string, ao concatenar uma string vazia nela.
      Fiz isso para corrigir alguns erros de compatibilidade de alguns browsers.

  23. Roberto Lunelli

    maio 29, 2012 at 00:03

    ali na linha tinha div 😉 mas isso tu sabe rs*

  24. bruno parabéns pelo script mais estou com uma duvida.
    quanto a esta parte no exemplo tem os links (index, fotos, contatos) estão dentro desta div #menu .. até ai tudo bem deu certo aqui mais o meu caso preciso que a div content possa ser linkada de outras partes do site . não apenas desta div id=”menu”. valeu ai abraços (ex. uma imagem linkando para esse mesmo conteudo da div content).

  25. Cara show de bola seu script. Queria saber se você pode me dar uma mão. Estou bolando uma lista de produtos, que o usuário poderá adciionar itens e alterar o conteúdo da div.

    Como fazer para dados padrões serem carregados pelo ajax, e depois indo somente alterado.

    Outra coisa, este seu script serve para várias div de uma vez só?

  26. Como eu faço para centralizar a gif?

  27. Tem um link para ir carregando a página tipo o twitter, ao rolar, como foi pedido nos comentários. Tô postando o link aqui.

    http://forum.montepage.com.br/viewtopic.php?f=6&t=46

  28. Muito bom o script.

    Só não consegui fazer ele funcionar com uma galeria de imagens com lightbox. :/

    Alguma sugestão?

    Abs

  29. Tiago Correia

    agosto 13, 2012 at 14:52

    Boa tarde!
    Alguém tentou fazer isso com imagem no conteúdo?
    Com texto ta aparecendo o conteúdo de boa, mas ao colocar imagem a imagem não aparece, fica quebrada.
    Alguém?

  30. Olá tiago, muito bom seu script, estou usando ele porem não queria que ele abrisse com a content queria que so ao clicar ele chamasse a content ou exibisse, exemplo: entra home desativada sem nada quando clico em empresa abre o content no fade tal com o conteudo pode me ajudar ?

  31. Iaeee Bruno, Show adorei o script, seguinte ele não exibe /pagina.html
    se eu precisar fazer um button ative como vou deixar ativo quando o conteudo about estar ativo ?

  32. Teria como eu incrementar?
    Ao invés de ser pagina.php fosse ?inicio=inicio tipo navegação sem refresh mas com GET

  33. O script ta show…agora como faço para quando clicar no link o conteúdo sumir lentamente assim como ele aparece?

    Agradeço!

  34. ola, estava criando um projetinho para uma maigo com frameset quando vi seu codigo, usei e funcionou certinho, reload, voltar tudo perfeito… o problema é… tenho uma pagina de portifolio, nela tem uma imagem e um link de detalhes, esse link abre informações da imagem que vem do banco de dados, relacionando a imagem que e cliquei com o texto, atraves de id.. entende … (http://localhost/elio/?pg=portfolio&funcao=detalhes&id=4) …. so que nesse momento volta para a index…. cara se puder me ajudar ficarei ultra feliz, li que o uso o ajax acarreta problemas, sera que esse tem solução… valew…

  35. ô Brunão tô quebrando uma cabeça com isso aê pode me dar uma força?
    é assim ele aparece o load ai da um fadeOut e em vez de da um fadeIn no content ele novamente no load. Tem como resolver?

  36. Dois problemas..
    Tenho um slide, parou de funcionar, se eu abro pagina direto funciona (pelo link), se clico pra abri-la, já não funciona mais.
    O outro problema é que tenho varios como faz pra funcionar este codigo com onclick tambem ?

  37. Bruno, e quando tenho onclick…. como faz… tenho uma div la que se clicar nela, teria que abrir no content tbm…

  38. Kra meu professor passou um trabalho pra fazer um qebsite sem refersh carregando o conteudo de uma div soh que quando eu coloco o javascript e vou abrir as outras paginas elas abrem sem o layout da principal pode me ajudar? se puder manda a resposta pro meu e-mail pfavor. ai vai a pagina principal:

    Site sem Refresh

        $(document).ready(function(e){  
            $("#menu a").click(function( e ){  
                e.preventDefault();  
                var href = $( this ).attr('href');  
                $("#Conteudo").load( href +" #Conteudo");  
            });  
        });  

    Site Sem Refresh Usando AJAX

    <a href="SiteSemRefresh.htm" rel="nofollow">Home</a>
    <a href="Contato.htm" rel="nofollow">Contato</a>
    <a href="Tabela.htm" rel="nofollow">Tabela De Preços</a>
    <!-- /menu -->
    
    
    Bem Vindo!
    Este é um Exemplo de Site sem Refresh.
    Na imagem ao lado tem o codigo-fonte padrão usado para construir o Site.
    
    <!-- /Conteudo -->
    

    Site Sem Refresh é Muito Mais Prático!!

  39. Thiago Alexandre de Assis

    janeiro 26, 2013 at 17:11

    Olá Bruno, tudo bem?
    Gostei desse seu tutorial, porém estou com um problema…
    no meu caso eu adicionei dentro de uma das páginas várias DIVS, uma dentro da outra, em forma de hierarquia, no entanto só aparece a primeira div fechada.

    Exemplo de como era para aparecer:

    (div class=”1″)
    (div class=”2″)
    (div class=”3″)(/div)
    (/div)
    (/div)

    Porém é assim que aparece:

    (div class=”1″) (/div)

    obs: coloquei parenteses pq não aceitava

    ele simplismente some com as DIVS dentro da primeira.
    sabe pq deu esse problema?
    texto aparece normalmente, e imagem tbm, no entanto DIV dentro de outra DIV só aparece a primeira mesmo.

    Obrigado desde já.

    • Não faz muito sentido cara. Onde vc está vendo ?

      pelo codigo fonte não vai aparecer mesmo. Apenas com o Firebug ou inspecionar elemento, é que vc vai ver exatamente oque tem lá.
      Não é “problema” no código desse post, mas alguma particularidade ai no teu site, então é impossível q eu te diga sem ver oq vc tem.

      Cria um tópico no forum.

  40. Copiei, reviisei o codigo por inteiro ums 3x, porem quando clico em algum link ele mostra o “loading” e depois some, não aparece mais nada, alguem sabe o que pode ser?

  41. Opa, beleza? Quando eu clico em alguma coisa, ele não tá dando load, Acontece na seguinte ordem: Ele abre o gif de load, dá fadeOut, dá fadeIn e o conteúdo continua com o gif.. o que tá acontecendo? Vlw

  42. Resolveu muitos problemas meus o seu script! Fantástico cara. Parabéns!!!

  43. Ola Bruno, é a primeira vez que utilizo ajax em um site, toda minha navegação esta perfeita, incluindo as páginas dinamicas com dados do banco dados, tudo utilizando urls amigaveis. Estou tento alguns problemas apenas com umas poucas funcoes javascript, como do slide, e jquery.tools tabs, porem essas funcoes deixam de funcionar durante a navegacao. Qual seria o metodo mais apropriado utilizando seu codigo, chamar as funcoes dentro do load

     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('slow', function(){  
    		 $('#carregando').fadeOut('slow');
                        $('#imgcarregando').fadeOut('slow');
                             $('#content').height('auto');
    			 content.html( data ).fadeIn(); 
    					 
    		
                            });  
                        }, 1000 );  

    ou chamar as funcoes correspondentes em cada pagina que for carregada?

  44. Como faço para poder acessar a pagina pelo link exemplo:
    Se a pessoa acessar o index, quando ela crica em foto o link nao muda;

    Gostaria que ficasse algo mais ou menos assim
    http://www.meusite.com.br#fotos, se a pessoa acessar diretamente tem ter que passar pelo index e sem ter que digitar fotos.html

  45. Antonio Carlos

    maio 21, 2013 at 12:47

    Boa tarde William, cara show de bola este script javascript, como eu faria no caso do script original ainda com o click, para aplicar o script no “.menu a” todos menos na home com id=”home”?

    Obrigado!

  46. Me ajudou cara a descobrir um detalhezinho que faltava em meu script…. valew

  47. Por que não posso navegar pelo histórico da demo?

  48. Olá,
    mas quando minhas páginas estão puxando um arquivo do XML o conteudo nao aparece, o que faço?

  49. Fantástico, estou utilizando em vários sites e lendo e relendo seus posts sobre o assunto várias vezes para aprender mais.

    Estou passando apenas para dizer muito obrigado e parabéns.

  50. Ótimo tutorial, vc tem muita paciência para explicar!

  51. e aí mano ele nao carrega imagens no servidor, como faço para resolver.

  52. Ótimo tutorial mano, mas como carregar imagens com ele no servidor, está dando erro.

  53. É que estou em um servidor local “apache” e adaptei seu código para meu site tudo belezinha ficou muito 10, porem as páginas que eu tenho não tem apenas textos, tem também imagens, porem só aparece os texto e os links da imagem está quebrados

  54. Acho que se vc me desse um exemplo de clicando no link foto igual vc fez acima e aparecesse texto e imagens eu resolveria meus problemas. Desde já agradeço

  55. Olá, como faço para usar esse exemplo mas com um formulario que os select são dinamicos para poder abrir na mesma pagina.

    Exemplo: escolho no select a cidade brasilia, então abre o texto de brasilia.

    Obrigado.

  56. Olá William Bruno,
    Cara gostei muito do post, parabéns!
    Mas esse script só esta funcionando não está funcionando no Chrome. Estou aprendendo JavaScript e gostaria muito de usar este script em um site.

    • Não acesse o script dando 2 cliques no html. Vc precisa rodar com um servidor web.
      Instala um apache local, ai vc vai ver rodando.

      o script funciona perfeitamente em todos os browsers.

      • Vlw, testei no computador do serviços sem um servidor.
        Testei na minha casa, em um servidor local, e deu tudo certo! Muito obrigado, seu post me foi muito útil! 🙂

  57. Olá Willian!

    Ótimo post! bem sucinto, tem muita coisa por ai mas o pessoal da muita volta pra explicar hehehe…Gostaria de pedir uma orientação, vou usar o script em um re-design de projeto a minha dúvida é se o GA contabiliza essas visitas já que o refresh não ocorre imagino que isso não seja mensurado, procede o meu raciocínio?

    Obrigado.

  58. Gostei muito da materia mas estou com um problema quando o ajax carrega a div acontece que os caracteres ficam zuados ­sem formatação tipo R�pido p�o c�u etendeu mas quando a pagina carrega normal ela não apresenta esses erros apenas quando o ajax carrega a div no content. desde já agradeço

  59. Henrique Zanini

    outubro 17, 2013 at 16:25

    Fui entender o código e achei a solução bem simples.

    Parabéns mais uma vez pelo conteúdo.

  60. Olá William,

    Estou aqui novamente para pedir a sua ajuda ou de algum dos colegas que puder me ajudar, estou usando esse script e ficou perfeito, mas nenhum script das paginas carregadas tais como slideshow, tabs entre outros estão funcionando, eles param, já li de tudo aqui, sobre o .live(), .delegate, mas não consigo fazer funcionar o carregamento desses scripts.

    Se for possível por favor me dê uma orientação estou perdido nessa questão.

    se quiser ver a aplicação do script o site da web rádio é esse: http://radioricos.com.br/novo/

    Muito Obrigado.

  61. Henrique Zanini

    outubro 18, 2013 at 17:50

    William, estou utilizando o jquery lazyload
    http://www.appelsiini.net/projects/lazyload

    só funciona quando aperto f5 :/

    Como posso resolver esses problemas de outros scripts não funcionarem?

    obrigado.

    • Henrique Zanini

      outubro 18, 2013 at 18:17

      Li a solução que encontrou com o lightbox, mas não consegui entender como adptar para outros casos. Ex, o meu código está assim:

      		$(document).ready(function(){
      			$("img.lazy").lazyload({
      				 threshold : 200,
      				effect : "fadeIn"
      			});
      		});
  62. Henrique Zanini

    outubro 21, 2013 at 09:11

    Valeu Willian, parabéns mais uma vez!

  63. Danillo dos Santos Pereira

    outubro 23, 2013 at 10:26

    Estou com um problema !!!
    O mask do jquery dos campos como CPF por exemplo não funciona quando o ajax faz o loading da div como posso resolver esse problema.

    é a unica coisa que falta pra finalizar tentei .noConflict() mais o ajax trava e passa não fazer o loading e carregar a pagina fora da div e tambem o mask do jquery não funciona. desde já agradeço…

  64. Colega, sabe informar porque só funciona no I.E. aqui? Há algum recurso a utilizar para rodar normalmente nos outros browsers?
    Grato.

    • Rode o arquivo apartir de um servidor web, e não dando 2 cliques no html.
      Não precisa de nada não, o script funciona em todos os browsers, vc só precisa executar ele corretamente.

  65. do play
    //ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

    do load deste site
    //ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

    quando chamo o do play o load nao pegar e assim vixi versa. ? já deixei um por vez tb ou um o outro pega ?

  66. Uma duvida, é possível eu utulizar esse teu codigo com xhtml? Com netbeans? Pq aqui nao ta carregando as paginas do menu, da todo o efeito, mas nao coloca o conteudo das paginas na div… Muito bom esse teu site, tudo bem explicado. Gostei muito.

  67. Quando clico no link ele mostra o .gif de carregando mas não carrega o conteúdo da página, fica só no loading mesmo.
    Sabe como resolvo?

  68. Sobre js aparecem esses dois.

    O método getPreventDefault() não deve mais ser usado. No lugar, use defaultPrevented. @ http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js:2
    ReferenceError: slabTextHeadlines is not defined @ http://aviva.net.br/new_layout/js/jarvis_scripts.js:64

    O Site é esse:
    aviva.net.br/new_layout/

    na seção do portfólio.
    E obrigado pela resposta.

  69. Saulo Laranjeira

    novembro 19, 2013 at 12:46

    Cara, muito legal, mas teria como por exemplo, o menu ser um formulário, e o resultado desse formulário, com get, abrir na div content? Abs

  70. Estou utilizando um scroll infinito num site de notícias.

    E quando clico no link, ele deixa de funcionar. Coloquei o plugin depois do html no dom. Imagino que não esteja funcionando pois tem mais de um ajax.

    Encontrei esse post:
    http://forum.wmonline.com.br/topic/164229-solucao-para-onload-de-uma-pagina-carregada-em-ajax/

    Não consegui adaptar ao código que você forneceu, saberia me dizer se isso irá solucionar o problema?

    Parabéns pelas explicações e paciência.
    Fique com Deus.

  71. Olá William, blz cara? preciso de ajuda…já estive aqui outras vezes e não consegui resolver ainda meu problema, as paginas que eu carrego não aplicam os efeitos, nelas estão o html completo sem nenhuma tag de script, estou carregando os scripts apenas na pagina mãe, não sei o que fazer e meu prazo esta terminando.

    O site é esse: http://www.radioricos.com.br/landingpage

    e meu e-mail: eder@radioricos.com.br

  72. Olá, como posso fazer para ele carregar a outra página como esta e depois de alguns minutos ele retornar automaticamente para a página anterior ?

  73. Oi gostaria de saber se tem alguma forma de evitar que o usuário perceba a atualização da div, por exemplo tenho um chat e chega uma nova mensagem o banco me informa que tenho novos dados e manda a requisição via .load () pra atualizar a div de mensagens mas a tela fica piscando toda vez que isso acontece, tem alguma maneira que faça com que isso não aconteça??

  74. Olá Willian há anos acompanho seus posts e sempre transparente e que ajuda a muitos e obrigado por compatilhar seu conhecimento, e sobre esta código de navegação sem reflesh deste seu post http://wbruno.com.br/scripts/ajaxdiv.html teria como ele trocar os links acima do navegador sem reflesh estou tentando implantar no meuprojeto grato.

  75. Olá willian achei seus post muito convenientes e tenho uma pergunta ,como faço pra requerer a abertura de uma página apertando um botão usando o ajax ?

  76. Boa noite William Bruno, eu to usando o seu script porém estou com uma dificuldade, quando eu mando abrir uma pagina php com um mapa o mapa não funciona e nesse mapa ele tem javascript, já tenteid e todas as formas, outro tipo de conteudo ele abre mas o mapa não

  77. opa, legal, mas tem como voce me dar uma luz???tipo quero usar um modal de cadastro, mas ele tem que ser preenchido em tempo de execução, tipo tenho o modal padrao, e esse padrao seria preenchido com os campos conforme o tipo de cadastro, se for cadclientes, preenche com os text_edit com seus respectivos campos…

  78. Antonio Junior

    julho 26, 2015 at 11:17

    Olá, William. Parabéns pelo blog.

    Estou iniciando, então gostaria da sua ajuda.
    Preciso de alguma coisa que exiba uma galeria de imagens e troque a posição dessas imagens a cada F5 ou atualização da página.

    Algo como 6 imagens, 3 em cima e 3 em baixo, e quando for feito um acesso seguinte na página, a figura 1 vai para a posição da figura 2, e assim sucessivamente.

    Conhece algo?

    Grande abraço!

  79. Como faço para funcionar no chrome?
    Testei no ie e funcionou, mas no chrome n

  80. Amigão, Parabéns!!!
    seus posts tem me ajudado muito!

    Muito obrigado!!!

  81. Pô cara, ótimo post bem direto e extremamente funcional. só que o tempo passou e eu tive que fazer algumas mudanças no teu codigo:

    1. Troquei a versão do jquery para 1.11>
    2. Troquei a funçao .live() pela .on(), pois a live eu acredito que ela não tenha mais suporte;
    3. E por fim troquei o gif por um svg com loader bem da hora.

    Mais de certa forma, me ajudou muito. Muito obrigado pela sua dedicação em compartilhar algo que você posssui, Deus abençõe você meu nobre.

  82. Olá, eu tentei executar o tutorial e executei com sucesso, mas tive um probleminha com meu código, pois tento usar o calendário do Jquery UI e não funciona quando carrega com a página com ajax, mas se a página é carregada normalmente funciona!

  83. William Bruno em vez ta página aparece dentro de uma div tem como ela carega na body ou seja na pagina toda ????

  84. Utilizei seu script inicial e funcionou a contento.
    Na verdade gostaria que minha pagina atualizasse uma imagem na net (http://www.site.com/imagem.jpg) de 1 em 1 segundo sem pica-la (reflesh) e sem precisar fazer alguma opção de MENU. Simplesmente isso.
    Estou trabalhando no seu scritpt mas não estou tendo sucesso.
    Se quiser me ajudar agradeço atencipadamente.
    Abs

Deixe uma resposta

Your email address will not be published.

*