| Maior acervo de vídeo aulas da web

26.248 visitas
14 ago 2009
221 Comentários

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

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://www.videoaulasbrasil.com.br David CHC

Olá @Fabio , temos essas duas aulas aqui :

http://www.videoaulasbrasil.com.br/php/%e2%80%93-gerando-documentos-pdf-com-a-classe-fpdf/

http://www.videoaulasbrasil.com.br/php/criando-um-arquivo-xls-com-php/

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)” ?