| Maior acervo de vídeo aulas da web

Não consegue visualizar a vídeo aula?

Carregando a página sem atualizar utilizando ajax com jquery

Salve Amigos do VAB, David CHC mais uma video aula. Nessa Video Aula iremos aprender a como carregar uma página dinamicamente sem precisar atualizá-la(reload) usando a técnica de AJAX com o framework preferido das multidões, o jquery. Boa Video Aula.

Links:
Gerar Imagem de Carregamento

jquery

Script Criado na Vídeo Aula

Você gostou dessa Vídeo Aula, então compartilhe com seus amigos

Artigos Relacionados

Comentários

  • http://www.brunodolenc.com.br bruno

    Olá, primeiro quero dar os parabéns pelas videos aulas são muito boas, mais quero saber
    outra coisa na video aula
    (Carregando a página sem atualizar utilizando ajax com jquery )

    qual é o programa editor que voce usa pra desenvolver os scripts?

    muito abrigado e aguardo

    • http://www.videoaulasbrasil.com.br David CHC

      @bruno, atualmente utilizo o notepad++, mas creio que fiz essa video aula utilizando Komodo Edit, que é muito bom também, tem um suporte a jQuery para auto-completar

  • http://emdesenvolvimento Rony

    @DAVID CHC e se ao clicar no menu eu quiser que todo o conteudo da página desapareça e fique apenas o GIF carregando… e dps apareça a pagina…
    tem como?

    • http://www.videoaulasbrasil.com.br David CHC

      @Rony, sim, basta tirar o gif animado dentro da div conteudo, e limpar a div usando, $(‘#conteudo’).html(”);

  • http://www.bmartinho.com Bruno

    Olá pessoal bom script

    Estou a usar um script deste género em um site que estou a construir.
    O que acontece é o seguinte sempre que faço refresh ele volta sempre á pagina principal o que acontece no exemplo aqui postado, o que eu queria era que ele mantivesse o contiudo na div e não que voltasse ao inicio aguém pode dar uma ajuda.

    Cumps Bruno

    • http://www.videoaulasbrasil.com.br David CHC

      @Bruno, se vc quer usar o carregamento em ajax, vc não pode dá refresh na pagina, pq vai sempre voltar a posição inicial, pq o navegador não grava a ultima ação realizada. Tem q pensar bem quando quiser usar o carregamento em ajax, pq todos os componentes da sua página, terão que seguir a mesma coisa, como por exemplo, formulários

  • http://www.bmartinho.com Bruno

    Obrigado David pela rápida resposta.
    Qual será então a melhor forma de abrir o conteúdo numa div de forma a que possa fazer refresh sem que volte ao inicio.

    Cumps Bruno

    • http://www.videoaulasbrasil.com.br David CHC

      @Bruno, vc pode trabalhar com Query String.

  • Rômulo

    Olá, você poderia criar uma video aula de como enviar um formulario php com ajax

    • http://www.videoaulasbrasil.com.br David CHC

      @Rômulo anotado

  • Fabio Rodrigo

    Fala David…

    tem como voce criar uma aula de php para excel e outra de php para pdf?
    se não for encomodo, me avisar por email?

    curto muito suas aulas. estou esperando as novas.

    Obrigado, Deus te abençoe

  • http://twitter.com/juniorvicios Junior vicios

    Excelente foi o comentário: “o framework preferido das multidões” rsrs

    muito boa amigo.

  • Erick_sena

    kmuito bom

    • http://davidchc.wordpress.com David CHC

      vlw @Erick

  • http://davidchc.wordpress.com David CHC

    Vc terá complicação só se a pagina q tem o efeito tiver javascript pq pode ser anulado pela inclusão de arquivo com ajax

  • http://davidchc.wordpress.com David CHC

    Provalvemente não está resgatando, tente usar o live() para acionar o link

  • Rods

    Eu gostaria de te agradecer do fundo do meu coraçao meu velho, tutorial perfeito, pelo que vejo ja faz muito tempo que esta aqui e ainda esta sendo muito util pelas pessoas, um grande abraço e muito obrigado mesmo

    • http://davidchc.wordpress.com David CHC

      Vlw Rods

  • http://www.facebook.com/people/Wilson-Mendes/100001559095827 Wilson Mendes

    E ai cara!!

    Muito boa as vídeo aulas!Estão ajudando muito no meu aprendizado!
    A didática é muito boa, simples, clara e objetiva.
    Continue assim!
    Estou no aguardo das próximas!

    • http://davidchc.wordpress.com David CHC

      vlw Wilson

  • http://davidchc.wordpress.com David CHC

    Vc irá fazer da mesma maneira q fiz na video aula, vc vai definir no link o caminho do arquivo, e com jQuery via ajax incluir na sua pagina.

    Como vc disse, o seu site será estatico, q seria apenas paginas html, então dessa maneira q disse, vai servir para vc mostrar os integrantes

  • Everaldo

    Video aula muito boa.
    Vou tentar adicionar em um WordPress.

    Valew.

  • http://davidchc.wordpress.com David CHC

    Provavelmente q eu coloquei a imagem dentro da div#conteudo, teria q ficar fora da div#conteudo

  • Francisco

    Muito boa a aula mesmo, estava procurando algo desse tipo, meu site tem uma galeria criada em PHP, quando troca de foto ele recarrega todo o site e fica um tempo em branco até carregar tudo, consegui colocar o loading nele, porém eu clico no link, aparece a imagem de loading bem rápido e daí fica branco e baixa as imagens dá página, queria algo do tipo: clico no link, mantém minha página com a imagem de loading sobre ela e aí aparece a nova página, isso é possível?

  • Idalmir Oliveira

    Valeu David foi isso mesmo!!!

  • Fabricio

    Muito bacana a aula, entretanto estou utilizando o aprendizado em meu site. David, estou criando um site cujo menu chama a pagina via Ajax, portanto, uma destas paginas contem javascript, é uma página de galeria de imagens, existe alguma maneira dessa página executar o javascript normalmente sendo que foi chamada via Ajax?

    • http://davidchc.wordpress.com David CHC

      Se toda sua aplicação tiver usando apenas javascript, vc pode utilizar o metodo live para executar as outras funcionalidades

  • http://davidchc.wordpress.com David CHC

    Almir, vc pode fazer o seguinte, em cada formulario inserido vc adicionar um campo oculto o nome da proxima pagina tem q carregar. Exemplo:

    http://jsfiddle.net/FAtM6/

  • Delmar

    Boa Noite!
    David. adorei seu script enclusive estou desenvolvendo um site usando o mesmo processo mas minha maior duvida é que tenho links dentro da pg conteudos que teria que abrir outro conteudo mas não estou conseguinto. está acontecendo que quando clico ele carrega apenas a pg fora de tudo … gostaria de saber se tem algum script para realizar a tal função sem alterar o estilo desenvolvido por você nesse tuto ;.

    • http://davidchc.wordpress.com David CHC

      Vc vai utilizar o live

      $(“a”).live(‘click’, function(){

      });

      http://api.jquery.com/live/

  • Delmar

    David muito obrigado consegui realmente tenho que usar o cód que mandou na pergunta anterior ….
    muito obrigado mesmo é muito bom saber que iniciantes iguais a min podem contar com pessoas iguais a você ….

    o cód que coloquei foi

        $(function(){
              $(“#carregando123″).hide();
             
                     $(“a”).live(‘click’, function(){
                     
                    pagina = “”+$(this).attr(‘href’)
                   
                    $(“#carregando123″).ajaxStart(function(){
                       $(this).show()
                       })
                    $(“#carregando123″).ajaxStop(function(){
                       $(this).hide();
                      
                    })
                   
                    $(“#conteudo123″).load(pagina);
                    return false;
                 })
         })

    ficou perfeito …

  • Antonio Carlos

    Boa noite ficou show este video, com os sites que fiz em php funcionou perfeitamente, porém estou fazendo um site de webradio onde utilizo o plugin windows media player pra tocar dentro do site e quando troco de pagina (#menu) ele reinicia o player, como eu aplicaria esta pratica com o wordpress ??? Parabéns!

    • http://davidchc.wordpress.com David CHC

      Creio que seja mais facil vc procurar um plugin que realize esse procedimento, ou utilizar iframes

  • http://davidchc.wordpress.com David CHC

    Nesse caso, vc está acionando esse formulário,, creio que tenha um formulário para enviar os dados, tbm via ajax ?

  • Felipe SDW

    Boa noite,
    cara muito bom mesmo sua video aula…me ajudo muito
    então funcionou certinho aki
    só tem um problema, quando atualizo a pagina pelo botão do navegador ele volta para pagina
    home…
    como faço pra isso não acontecer, tipo permanecer na mesma pagina que estava???.
    Mesmo assim agradeço!

    • http://davidchc.wordpress.com David CHC

      Isso vai acontecer mesmo, pq não foi guardado nenhuma informação de navegação no browser. Não conheço nenhuma solução para isso, pelo menos até agora.

  • http://davidchc.wordpress.com David CHC

    Ajax não é um programa, e sim uma técnica, que consiste passar informações assíncronas, isso q dizer, sem precisar mudar de pagina. Para isso vc vai utilizar o Javascript.

    Se vc está começando agora, vc primeiro tem q saber HTML e CSS, estudar padrões, veja na seção de Tableless, q vai te ajudar

  • http://pulse.yahoo.com/_H4YHWFL3IMWHA7AJSS44NO2JPE Dieick '

    Ok.. Mas como eu inicio ? eu ñ sei nem se quer como eu abro a pagina do javascript… para poder digitar a programação”  Obrigado pela ajuda”

    • http://davidchc.wordpress.com David CHC

      Como falei, antes de pensar em ajax, aprenda HTML e CSS, depois para o javascript. Veja no menu, em desenvolvimento > tableless . Tem varias aulas sobre o assunto, é um bom começo.

  • http://davidchc.wordpress.com David CHC

    Já pensou em abrir o link em outra página ? Os códigos da minha vídeo aula, com exceção do chat, são postada no forum do MxMasters.

  • http://davidchc.wordpress.com David CHC

    Vc pode tentar usar o plugin jQuery History

    http://tkyk.github.com/jquery-history-plugin/

    • http://www.facebook.com/marcosbrinner Marcos Brinner

      ok obrigado e parabéns pelas videos aulas!

  • Pedroacauan

    David,

    Utilizei este seu código e funcionou em primeiro momento muito bem.

    Tenho um problema no site que estou desenvolvendo. Na index existem quatro links que devem abrir a página de serviços(página que usei seu código), e ao abrir a página serviços devem aparecer o conteúdo do serviço clicado na index.

    Exemplo:

    Clique em Peças na página index.
    Deve abrir a página de serviços mostrando o conteúdo da página de peças.

    A página de serviços possui várias opções e ao clicar em alguma o conteúdo é carregado ao lado em uma div.

    Como faço para abrir a página de serviços e ao mesmo tempo abrir o conteúdo escolhido pelo usuário na index?

    Não sei se fui claro.
    Agradeço desde já!

    Abraço

    • http://davidchc.wordpress.com David CHC

      Qualquer conteúdo vc pode utilizar o load e definir onde será inserido. Lembrando que um site todo em ajax, vc precisa fazer realmente tudo, desde inclusão de paginas, a formulário , veja se realmente é viável.

  • Fabiano Monte

    Mais uma aula muito do boa do David.

  • http://davidchc.wordpress.com David CHC

    Eu tenho uma video aula sobre chat, q poderá te ajudar:

    http://www.videoaulasbrasil.com.br/php/criando-chat-com-php-e-jquery-%E2%80%93-parte-3/

  • http://www.facebook.com/marcosbrinner Marcos Brinner

    vc vai precisa cirar uma  funçãop  em  jquery  assim que vai contar  no banco  de  dados o total de comentarios e salvar em um campo hidden ai depois vai  fazer a verificação  novamente se o valor  verificado agora for maior  que  o  do  campo  hidden  vc subitrai os valores e carrega o tanto  que  precisar.

    Se aquiser add no msn que  te  crio o script marcosbrinner1993@hotmail.com

  • http://davidchc.wordpress.com David CHC

    Vc colocar o exemplo online, ficará mais facil de ver o q tá ocorrendo

  • http://www.facebook.com/people/Edijaime-Junior/100001316224425 Edijaime Junior

    David Parabéns!!! Só uma ajuda: como eu faço para usar com  href=”javascript:void(0)” ?


Hospedado por Hostnet - Hospedagem de sites

VAB - Todos os direitos reservados - 2008 / 2012

Developed by: MX Web Studio

Mais em Ajax (23 of 30 articles)