Tutorial: Como fazer uma div se atualizar sem refresh ou reload da pagina completa?

5

Junho 17, 2012 por Firmino Changani

Como fazer uma div se atualizar sem refresh ou reload da pagina completa?

Eu fiz esta pergunta quando estava desenvolvendo o meu projeto de final de curso e houve a necessidade de tornar a pagina muito dinâmica, como fazer consultas automática na bd, etc.

Requisitos: conhecimentos básicos de HTML, CSS, JQUERY, PHP, MYSQL.

Basicamente irei criar um pagina index.php que vai receber o conteudo de uma outra pagina conteudo.php que vai conter uma consulta de uma tabela na bd.

Na pagina index.php
Depois de incluir o jquery na pagina, criei a variável que armazena a função que chama ou executa uma outra função através de seus argumentos num tempo predefinido (em milissegundos), a sintaxe desta é muito window.setInterval(nossa_função, tempo em milissegundos); no script abaixo defini 1 segundo, quer dizer que a função será chamada a cada 1 segundo.

Depois criamos a função que vai chamar ou requisitar ou até mesmo incluir se preferirem a pagina da consulta na nossa div. Para fazer isso usamos o método .load(), que também tem um sintaxe simples: $(‘#div_que_vai_receber_a_pagina’).load(“pagina_a_incluir.html”);

A parte do JS

var tempo = window.setInterval(carrega, 1000);
function carrega()
{
$('#conteudo').load("page.php");
}

A parte do html

No ficheiro page.php

<?php
$bd = mysql_connect("localhost", "root", "");
$dados = mysql_select_db("ajax", $bd);

$consulta = mysql_query("SELECT * from frases ORDER BY autor");

while($linha = mysql_fetch_array($consulta))
{
$frase = $linha['frase'];
$autor = $linha['autor'];

echo $frase;
echo"
";
echo $autor;
}
?>

E o a tabela.

CREATE TABLE IF NOT EXISTS `frases` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`frase` varchar(255) NOT NULL,
`autor` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=12 ;

--
-- Extraindo dados da tabela `frases`
--

INSERT INTO `frases` (`id`, `frase`, `autor`) VALUES
(1, '"Os homens erram, os grandes homens confessam que erraram."', 'Voltaire'),
(10, 'eafeafffdsfadsfdfdfdffadf', 'dfafsfdfsfdsfdsfsdfds'),
(3, '"Penso, logo existo."', 'René Descartes'),
(4, '"Educai as crianças, para que não seja necessário punir os adultos."', 'Pitágoras'),
(5, '"Todo o homem é culpado do bem que não fez."', 'Voltaire'),
(9, 'Antonio Agostinho Neto', 'A, Eu já não espero, eu sou aquele por quem vocês'),
(11, 'afwfewffefeafewaff', 'weaffefafewfaefwafefff');

E já está, temos um script que vai chamar uma função a cada 1 segundo e esta função inclui na div uma pagina com conteúdo dinâmico, de modo pratico a div vai se atualizando a cada 1 segundo.

Anúncios

5 thoughts on “Tutorial: Como fazer uma div se atualizar sem refresh ou reload da pagina completa?

  1. DO diz:

    yh man bom post!! mas há por ai um script jquery que permite carregar uma página dentro duma div sem necessidade de linká-la a página mas por sua vez estas não são indexadas no google search. Mas se apenas for uma página qualquer talvez dê se a chance!!! Mas achei esse post muito interessante

    • Durante o desenvolvimento de um projeto precisava de criar uma pagina que apenas um elemento se atualizava requisitando uma outra pagina, depois de encontrar a solução pensei em partilhar…

  2. Petrony Pimentel diz:

    Muitoooo bom !
    Parabéns …

  3. Leonardo teacher diz:

    Olá! Sem querer abusar, mas se vocês puderem me ajudar serei muito grato.

    Eu tenho uma página com uma div, dentro da qual está um joguinho de palavras cruzadas.

    Então, o que eu gostaria é o seguinte: No caso do usuário preencher parte das palavras ou mesmo todas, eu queria um botão que recarregasse a div para que o jogo voltasse ao estado inicial, porém sem recarregar a página inteira, somente a div que contém o jogo.

    Eu conheço mais javascript e html, se for possível agradeço.

    Já encontrei o código abaixo, tentei, mas não deu certo:

    Refresh

    $(document).ready(function () {
    $(“#myButton”).on(“click”, function () {
    $(“#teste”).load(“refreshdiv.htm”)
    });
    });

    No exemplo acima, a id da div que contém o jogo é “teste”, e o nome da página é refreshdiv.htm.

    Obrigado,

    Teacher.

  4. Rodrigo LIma diz:

    Eu fiz tudo isso, mas quando passa o tempo determinado pelo script, ele some, e fica apagado.

    Porque isso acontece, e como eu resolvo?

    Obrigado desde já!

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s

%d bloggers like this: