Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
O script abaixo atualiza a página (centro.php) a cada um minuto e dentro desta página terei uma div que não poderá ser atualizada.
Tentei colocar esta div como pagina com setInterval de 100 minutos porem ao dar o refresh no centro.php tudo vai junto. Será que isto é possivel?
Desde já meu muito obrigado!
<script>
function atualiza(){
var url = 'centro.php';
$.get(url, function(dataReturn) {
$('#centro').html(dataReturn);
});
}
setInterval("atualiza()",60000);
</script>
Para resolver esse problema, você pode separar o conteúdo que precisa ser atualizado do conteúdo que não deve ser atualizado. A ideia é carregar o conteúdo dinâmico de uma maneira que a div estática não seja afetada. Podemos fazer isso através de AJAX, atualizando apenas a parte necessária.
Vou fornecer um exemplo de código para isso:
-
centro.php: Essa será a página que você está atualizando a cada minuto, contendo apenas o conteúdo dinâmico.
-
index.html: A página principal que contém a div estática e a div dinâmica.
centro.php
<?php
// Conteúdo dinâmico que será atualizado a cada minuto
echo "<p>Conteúdo dinâmico atualizado em " . date("H:i:s") . "</p>";
?>index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página Principal</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="centro">
<div id="conteudo-dinamico">
<!-- O conteúdo dinâmico será carregado aqui -->
</div>
<div id="conteudo-estatico" style="background-color: red; color: white;">
<p>DIV QUE NÃO PODE SER ATUALIZADA</p>
</div>
</div>
<script>
function atualiza() {
$.get('centro.php', function(data) {
$('#conteudo-dinamico').html(data);
});
}
// Atualiza a cada 60 segundos
setInterval(atualiza, 60000);
// Carrega o conteúdo inicial
$(document).ready(function() {
atualiza();
});
</script>
</body>
</html>
Explicação:-
centro.php: Contém apenas o conteúdo dinâmico que será carregado via AJAX.
-
index.html: Carrega o conteúdo dinâmico na div #conteudo-dinamico e mantém a div #conteudo-estatico inalterada.
-
JavaScript:
-
A função atualiza faz uma requisição AJAX para centro.php e insere a resposta na div #conteudo-dinamico.
-
setInterval chama a função atualiza a cada 60 segundos.
-
O conteúdo inicial é carregado quando o documento está pronto com $(document).ready.
Dessa forma, a div que não pode ser atualizada (#conteudo-estatico) permanece inalterada, enquanto o conteúdo dinâmico é atualizado a cada minuto.
Separe esse conteúdo em dois/mais arquivos e atualize apenas o que precisa.