Atualizando conteúdo dinamicamente com jQuery
Dica publicada em Javascript / Introdução
Atualizando conteúdo dinamicamente com jQuery
Hoje em dia, sempre há a necessidade de atualizar dados dinamicamente em sites e aplicações Web, seja em slides de
conteúdo, saldo de estoque,
relatórios, painel de acompanhamento, etc.
Recentemente, precisei realizar isso para um "banner" do meu "site pessoal", pois nele, fiz com que a cada 15 segundos as frases sejam trocadas aleatoriamente entre as que tenho cadastro no banco de dados do site.
Se desejarem ver em funcionamento, basta acessar meu site e esperar uns 15 segundos olhando para a parte superior ;-):
Obs.: Devido ao uso deste site como meu ambiente de testes também, ao acessar, não surpreenda-se se ocorrerem erros. ;-)
Vamos ao que interessa...
Requisitos básicos:
* A parte da consulta na base de dados, você deve tê-la ou fazê-la, caso queira algum exemplo, veja no artigo:
Salve o conteúdo abaixo em um arquivo .js, como "slides.js":
* O download da última versão desse código pode ser feito aqui.
E importe para seu site, exemplo:
Agora estamos prontos para usá-lo. É bem simples, basta criar o elemento onde deseja receber o conteúdo dinâmico.
Exemplo:
Este conteúdo será atualizado daqui a alguns segundos....
Agora, adicione em seu código javascript, um seletor do jQuery, configurando-o para usar o plugin importado, exemplo:
Prontinho, se o arquivo informado na URL realmente trazer conteúdos novos, basta atualizar sua página e ver o recurso funcionando.
Com isso, você pode atualizar saldo de estoque, painel de acompanhamento, banners, etc.
Espero que gostem!
@rai3mb
Recentemente, precisei realizar isso para um "banner" do meu "site pessoal", pois nele, fiz com que a cada 15 segundos as frases sejam trocadas aleatoriamente entre as que tenho cadastro no banco de dados do site.
Se desejarem ver em funcionamento, basta acessar meu site e esperar uns 15 segundos olhando para a parte superior ;-):
Obs.: Devido ao uso deste site como meu ambiente de testes também, ao acessar, não surpreenda-se se ocorrerem erros. ;-)
Vamos ao que interessa...
Requisitos básicos:
- Biblioteca jQuery importada no site: http://docs.jquery.com/Downloading_jQuery;
- * Uma página que consulte uma base de dados, ou não, e retorne-os.
* A parte da consulta na base de dados, você deve tê-la ou fazê-la, caso queira algum exemplo, veja no artigo:
Salve o conteúdo abaixo em um arquivo .js, como "slides.js":
;(function($){
$.fn.slides=function(op){
var def = { time: 10, url: 0 };
var set = $.extend({},def,op);
if (url == 0) { alert('plugin slides precisa de uma url definida'); exit; }
return this.each( function(){
set.time = set.time 1000;
o = $(this);
setInterval(function() {
$.ajax({
async: false,
cache: true,
url: set.url,
success: function(data, status, xhr) {
o. html(data).fadeIn(5 00);
},
error: function( xhr ) {},
beforeSend: function(xhr) {}
});
}, set.time);
});
};
})(jQuery);
$.fn.slides=function(op){
var def = { time: 10, url: 0 };
var set = $.extend({},def,op);
if (url == 0) { alert('plugin slides precisa de uma url definida'); exit; }
return this.each( function(){
set.time = set.time 1000;
o = $(this);
setInterval(function() {
$.ajax({
async: false,
cache: true,
url: set.url,
success: function(data, status, xhr) {
o. html(data).fadeIn(5 00);
},
error: function( xhr ) {},
beforeSend: function(xhr) {}
});
}, set.time);
});
};
})(jQuery);
* O download da última versão desse código pode ser feito aqui.
E importe para seu site, exemplo:
Agora estamos prontos para usá-lo. É bem simples, basta criar o elemento onde deseja receber o conteúdo dinâmico.
Exemplo:
Este conteúdo será atualizado daqui a alguns segundos....
Agora, adicione em seu código javascript, um seletor do jQuery, configurando-o para usar o plugin importado, exemplo:
// após o documento está pronto
$(document).ready(function() {
// aqui está o uso do plugin
$('#conteudo').slides({
time: 15, // aqui o tempo em segundos para atualizar o conteúdo
url: 'arquivo.php' // aqui a URL do arquivo responsável por trazer o novo conteúdo
});
});
$(document).ready(function() {
// aqui está o uso do plugin
$('#conteudo').slides({
time: 15, // aqui o tempo em segundos para atualizar o conteúdo
url: 'arquivo.php' // aqui a URL do arquivo responsável por trazer o novo conteúdo
});
});
Prontinho, se o arquivo informado na URL realmente trazer conteúdos novos, basta atualizar sua página e ver o recurso funcionando.
Com isso, você pode atualizar saldo de estoque, painel de acompanhamento, banners, etc.
Espero que gostem!
@rai3mb