Atualizando a pagina sem Refresh

Eduardo Assis · Dezembro 2, 2008

Tenho uma pagina que se atualiza de 5 em 5 segundos, mas como uso JS ele pisca a tela quando está recarregando.

Como eu poderia fazer em AJAX para não piscar, simplesmente dar o refresh, parecendo que está atualizando somente os numeros ?

Abraços.

Jonathan Queiroz · Dezembro 2, 2008

Sim !

Pode postar o código da página só pra ter uma noção do que deveria modificar ??

De qualquer forma, posto um exemplo aqui:

Página1.htm (principal)

<html>
<head>
<title>Minha Página</title>
<script type="text/javascript".
var tempo_seg = 5 // Tempo em segundos
var tempo_ms = tempo_seg * 1000 // Tempo em milésimos de segundo
function Atualiza() {
goAjax("pagina2.htm")
setTimeout("Atualiza()", tempo_ms)
}
function goAjax(url) {
xmlhttp = new XMLHttpRequest()
xmlhttp.open("GET", url, true)
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4) {
retorno = xmlhttp.responseText
divisao = document.getElementById("divisao_refresh")
divisao.innerHTML = retorno
}
}
xmlhttp.send(null)
}
</script>
</head>
<body>
Essa é a página principal

<div id="divisao_refresh">
<!-- Esta é a DIV que terá o conteúdo atualizado a cada 5 segundos --->
</div>
</body>
</html>

Na página "pagina2.htm" você escreve os dados que você quer que seja passado para a div

Espero ter ajudado, mas de qualquer forma posta seu código completo se não conseguir !

Eduardo Assis · Dezembro 2, 2008

Agradeço sua ajuda, bem estou postando o codigo que tenho:

<?

$dataini = date("Y-m-d");
$datafim = date("Y-m-d");

$datahj  = date("d/m/Y");
$data = "and time between '$dataini 00:00:00' and '$datafim 23:59:59'";

include('banco.php');

   // Fila
   $fila = 0;
   $sql="SELECT * FROM queue_log where event='ENTERQUEUE' $data ORDER BY time DESC LIMIT 50";
   $query=mysql_query($sql,$conexao);
   while ($registro=mysql_fetch_array($query))
   {
   $sql1="SELECT * FROM queue_log where callid='".$registro["callid"]."' and (event = 'ABANDON' or event = 'COMPLETECALLER' or event = 'CONNECT') $data order by time DESC Limit 1";
   $query1=mysql_query($sql1,$conexao);
   $registro1=mysql_fetch_array($query1);
   if ( empty($registro1[0]) )
   {
   //echo $contador . " - Aguardando: " . $registro["arg2"] . "<br>";
   $fila++;
   }
   }

   // Abandonado

   $sql="SELECT COUNT(id) FROM queue_log where event='ABANDON' $data and arg3 > 60";
   $query=mysql_query($sql,$conexao);
   $registro=mysql_fetch_array($query);
   $desistentes = $registro[0];

   //Completados

   $sql="SELECT COUNT(id) FROM queue_log where ( event='COMPLETECALLER' or event='COMPLETEAGENT' ) $data";
   $query=mysql_query($sql,$conexao);
   $registro=mysql_fetch_array($query);
   $atendidas = $registro[0];

   // Numero de Agentes

   $sql="SELECT * FROM agentes order by agente";
   $query=mysql_query($sql,$conexao);
   while ($registro=mysql_fetch_array($query))
   {
       $sql1="SELECT COUNT(*) FROM queue_log where arg1='".$registro["senha"]."' order by time DESC Limit 1";
       $query1=mysql_query($sql1,$conexao);
       $registro1=mysql_fetch_array($query1);
       $agentes = $registro1[0];
   }

?>

<html>
        <head>
                <title>  </title>
        <meta name="keywords" content="Asterisk - Pro Redes - Call Center">
        <STYLE type=text/css>
        A:link { text-decoration: none}
        A:visited { text-decoration: none}
        </STYLE>

</head>
<body>
<center><font face=verdana size=3><b> Monitoramento </b></font></center>
<div align=left>
<table width="60%" border="0" cellpadding=0 cellspacing=0>
  <tr>
    <td width="50%" align=left><b><?echo$datahj;?></b></td>
    <td width="50%" align=left>&nbsp;</td>
  </tr>
  <tr>
    <td width="50%" align=left>&nbsp;</td>
  </tr>
  <tr>
    <td width="50%" align=left>Ligações Atendidas:</td>
    <td width="50%" align=left><?echo$atendidas;?></td>
  </tr>
  <tr>
    <td width="50%" align=left>Ligações Desistentes:</td>
<td width="50%" align=left><?echo$desistentes;?></td>
</tr>
<tr>
    <td width="50%" align=left>Ligações na Fila:</td>
    <td width="50%" align=left><?echo$fila;?></td>
  </tr>
</table>
</div>
<br>
<table width=100% border="0" align=center cellpadding=0 cellspacing=0>
  <tr>
    <td><font face=arial size=2>
      <table width="100%" border="1" cellspacing="0">
        <tr>
          <td align=center bgcolor="#CCCCCC"> <strong> Ramal </strong></td>
          <td align=center bgcolor="#CCCCCC"> <strong> Agente </strong></td>
          <td align=center bgcolor="#CCCCCC"> <strong> Status </strong></td>
          <td align=center bgcolor="#CCCCCC"> <strong> Telefone </strong></td>
        </tr>
  <tr>
<?
$sql="SELECT * FROM agentes order by agente";
$query=mysql_query($sql,$conexao);
while ($registro=mysql_fetch_array($query))
{
   $sql1="SELECT * FROM queue_log where arg1='".$registro["senha"]."' order by time DESC Limit 1";
   $query1=mysql_query($sql1,$conexao);
   $registro1=mysql_fetch_array($query1);

if ( $registro1["event"] == "AgentePresente" || $registro1["event"] == "AgenteUnPausado" || $registro1["event"] == "AgentePausado" )
   {

   $sql4="SELECT COUNT(id) FROM queue_log where agent='".$registro1["agent"]."' and (event='COMPLETECALLER' or event='COMPLETEAGENT') $data";
   $query4=mysql_query($sql4,$conexao);
   $registro4=mysql_fetch_array($query4);
   $atendidaspagente = $registro4[0];

   $sql2="SELECT * FROM queue_log where event='CONNECT' and agent='".$registro1["agent"]."' order by time DESC Limit 1";
   $query2=mysql_query($sql2,$conexao);
   $registro2=mysql_fetch_array($query2);

   $sql3="SELECT * FROM queue_log where callid='".$registro2["callid"]."' and callid <> '' and (event='COMPLETECALLER' or event='COMPLETEAGENT') order by time DESC Limit 1";
   $query3=mysql_query($sql3,$conexao);
   $registro3=mysql_fetch_array($query3);

   $status = "";
   $telefone = "";

   if ( !empty($registro3[0]) )
   {
   $status = "Disponivel";
   $cor = "#FFFFFF";
   if ($registro1["event"] == "AgentePausado")
     {
     $status = "Agente Pausado";
     $cor = "red";
     }
   } else {
   $sql4="SELECT * FROM queue_log where callid='".$registro2["callid"]."' and event='ENTERQUEUE' order by time DESC Limit 1";
   $query4=mysql_query($sql4,$conexao);
   $registro4=mysql_fetch_array($query4);
      if ( empty($registro4[0]) )
      {
      $status = "Disponivel";
      $cor = "#FFFFFF";
      if ($registro1["event"] == "AgentePausado")
        {
        $status = "Agente Pausado";
        $cor = "red";
        }
      }
      else
        {
        $status = "Falando com ";
        $telefone = $registro4["arg2"];
        $cor = "#FFFF99";
        }
      }

    echo "<tr bgcolor=$cor>";
    echo "<td align=center>".$registro1["agent"],"</td>";
    echo "<td align=center><b>".$registro["agente"]."</b></td>";
    echo "<td align=center>$status</td>";
    echo "<td align=center>$telefone &nbsp;</td>";
    echo "</tr>";
   }
}
   echo "<br>";
?>
</table>
</body>
</html>[/codebox]

Gostaria de atualizar as escritas das variaveis de 5 em 5 segundos.

Abraços.

Jonathan Queiroz · Dezembro 2, 2008

Eu não entendo muito de PHP, mas posso lhe lhe ajudar na parte do Ajax...

Primeiramente, remova o código PHP de sua página inicial.

O código php deverá ficar em outra página, a qual será requisitada seu conteúdo via Ajax

Você deverá criar uma div onde serão armazenadas as informações da outra página.

Crie uma função na página principal para se conectar à outra página

<script type="text/javascript".
var tempo_seg = 5 // Tempo em segundos
var tempo_ms = tempo_seg * 1000 // Tempo em milésimos de segundo
function Atualiza() {
goAjax("pagina2.php")
setTimeout("Atualiza()", tempo_ms) // Código para chamar a função a cada 5 seg (5000 ms)
}
function goAjax(url) {
xmlhttp = new XMLHttpRequest()
xmlhttp.open("GET", url, true)
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4) {
retorno = xmlhttp.responseText
divisao = document.getElementById("divisao_refresh")
divisao.innerHTML = retorno
}
}
xmlhttp.send(null)
}
</script>

Essa função irá chamar o conteúdo da outra página e colocar dentro da div com o nome "divisao_refresh"

Depois disso,é só colocar o "onload" para chamar a função "Atualiza()"

Qualquer coisa, posta aí !

Eduardo Assis · Dezembro 2, 2008

Onde tenho que colocar o onload para ficar chamando a função ?

Abraços.

Jonathan Queiroz · Dezembro 2, 2008

o onload deve estar no body da página !

Exemplo:

<body onload="Atualiza()">

Inside · Abril 1, 2009

Caro Jonathan Queiroz,

você sabe explicar porque esse código não funciona no IE?

É disso que preciso mas não funciona no IE, o que acontece?

Obrigado.

Jonathan Queiroz · Abril 1, 2009

O IE acusa algum erro ?

Era pra funcionar no IE7, talvez ocorresse algum problema no IE6

Se possível poste o exemplo em funcionamento (a url para o site, se possível)

Inside · Abril 8, 2009

Caro Jhonatan,

o código que está neste tópico realmente não funciona no IE pelo menos aqui não funciona. Dai, achei um outro código na Net que funciona mas dá problema nos acentos, ficam todos embaralhados. Mesmo colocando a META ISO-8859-1 não funciona.

Esse é meu código: Você sabe resolver essa questão dos acentos?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title></title>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

<script>
function createRequestObject() { 
var ro; 
var browser = navigator.appName; 
if(browser == "Microsoft Internet Explorer"){ 
ro = new ActiveXObject("Microsoft.XMLHTTP"); 
}else{ 
ro = new XMLHttpRequest(); 
} 
return ro; 
} 

var http = createRequestObject(); 

function sndReq() { 
http.open('get', 'teste12.asp'); 
http.onreadystatechange = handleResponse;
http.send(true); 
setTimeout("sndReq()", 1000); // Recursive JavaScript function calls sndReq() every 2 seconds 
} 

function handleResponse() { 
if(http.readyState == 4){ 
var response = http.responseText; 
if (response != responseold || responsecheck != 1) { 
var responsecheck = 1; 
document.getElementById("messages").innerHTML = http.responseText; 
var responseold = response; 
} 
} 
} 
</script> 

</head> 

<body onLoad="java script:sndReq();"> 

<div id="messages">

sabe ola coração caça

</div>

</body>
</html>

Achei um outro códido que a META ISO-8859-1 estava dentro do código tipo assim:

HTTPRequest.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");

Mas como não entendo nada de Ajax, fica difícil inserir isso nesse código que achei.

Obrigado pela sua atenção.

Editado Abril 8, 2009 por Inside

Jonathan Queiroz · Abril 8, 2009

Como falei, o código que postei não funciona no IE6

O código que você postou funciona no IE6 porque faz a validação do navegador

Mesmo assim não funciona no IE5.5

Uma função mais genérica para funcionar em diferentes navegadores seria isso:

function CreateXMLHttpRequest(){
                var xmlHttp;
                try{
                // Firefox, Opera 8.0+, Safari
                    xmlHttp=new XMLHttpRequest();
                }catch(e){
                    // Internet Explorer 6+
                    try{
                        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                    }catch (e){
                        //Internet Explorer 5.5+
                        try{
                            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                        }catch (e){
                            //Não conseguiu criar o objeto
                            return null;
                        }
                    }
                }
                return xmlHttp
            }

E depois, ao invés de utilizar o xmlHttpRequest() utilize essa função

Quando ao seu outro código, esse método é do próprio objeto xmlHttpRequest, ou seja, da variável que se utiliza para fazer a requisição (no seu caso [e http)

Inside · Abril 9, 2009

Caro Jhonatan,

não sei o que fiz errado, mas não funcionou, está apresentando um erro. Meu código atual ficou assim:

<script>

function CreateXMLHttpRequest(){
                var xmlHttp;
                try{
                // Firefox, Opera 8.0+, Safari
                    xmlHttp=new XMLHttpRequest();
                }catch(e){
                    // Internet Explorer 6+
                    try{
                        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                    }catch (e){
                        //Internet Explorer 5.5+
                        try{
                            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                        }catch (e){
                            //Não conseguiu criar o objeto
                            return null;
                        }
                    }
                }
                return xmlHttp
            }
            
var http = CreateXMLHttpRequest(); 

function sndReq() { 
http.open('get', 'teste12.asp'); 
http.onreadystatechange = handleResponse;
http.send(true); 
setTimeout("sndReq()", 1000); // Recursive JavaScript function calls sndReq() every 2 seconds 
} 

function handleResponse() { 
if(http.readyState == 4){ 
var response = http.responseText; 
if (response != responseold || responsecheck != 1) { 
var responsecheck = 1; 
document.getElementById("messages").innerHTML = http.responseText; 
var responseold = response; 
} 
} 
} 
</script>

Obrigado pela sua atenção.

Editado Abril 9, 2009 por Inside

Alexandre.Ramos · Junho 28, 2016

Boa Noite Amigos

Existe a possibilidade de fazer tudo em uma unica pagina, tipo atualizar uma consulta ao banco de dados na mesma pagina do script html

Desde já agradeço

Valdenice Silva · Março 16, 2017

Boa tarde pessoal!!!

Preciso muito da ajuda de vocês.

Eu estou começando na área de Web e estou com um problema que não consigo resolver.

Eu criei um site no qual eu usei o jQuery e o plugin jQuery Cycle e toda vez que eu mudo de página nos botões do menu, ele pisca.

Eu gostaria de saber se alguém pode me ajudar a resolucionar esse problema.

Segue o meu código abaixo:

<!doctype html>
<html lang="en,fr">
<head>
   <meta charset="UTF-8" />
   <title>Sentimental Moments Event Decor</title>
   <link rel="stylesheet" type="text/css" href="CSS/Normalize.css" />
   <link href='http://fonts.googleapis.com/css?family=Lato:400, 700' rel='stylesheet' type='text/css' />
   <link rel="stylesheet" type="text/css" href="CSS/Estilo.css" />

$(function(){

   var liWidth = $("slide ul li").outerWidth(),
       speed   = 3500,
       rotate = setInterval(auto, speed);

   //Mostra os botões
       $("section#slide").hover(function(){
           $("section#buttons").fadeIn();
           clearInterval(rotate);
   }, function(){
       $("section#buttons").fadeOut();
       rotate = setInterval(auto, speed);
   });

   //Next
   $(".next").click(function(e){
       e.preventDefault();

       $("section#slide ul").css({'width':'99999%'}).animate({left:-liWidth}, function(){
       $("#slide ul li").last().after($("#slide ul li").first());
       $(this).css({'left':'0', 'width': 'auto'});
       });
   });

   //Voltar
   $(".prev").click(function(e){
       e.preventDefault();

       $("#slide ul li").first().before($("#slide ul li").last().css({'margin-left':-liWidth}));
       $("section#slide ul").css({'width':'99999%'}).animate({left:liWidth}, function(){
           $("#slide ul li").first().css({'margin-left':'0'});
           $(this).css({'left':'0', 'width':'auto'});

});
});

function auto(){
$(".next").click();

}

});

   </script>
</head>
<body>
   <div id="header">
       <div class="linha">
           <header>
               <div class="coluna col12 sidebar"></br>
                   <nav>
                       <ul class="menu inline sem-marcador">
                           <li><a href="index.html"><strong>HOME</strong></a></li>
                           <li><a href="about.html"><strong>ABOUT US</strong></a></li>
                           <li id="selection"><a href="photo.html"><strong>PHOTO GALLERY</strong></a></li>
                           <li><a href="inventory.html"><strong>INVENTORY</strong></a></li>
                           <li><a href="contact.html"><strong>CONTACT</strong></a></li>
                           <li><a href="photo1.html"><strong>EN</strong></a></li>
                       </ul>
                   </nav>
               </div>
       </div>
           <div class="cycle-slideshow">
               <img src="IMG/book3.jpg" width="600" Alt="" /><img src="IMG/book4.jpg" width="600" Alt="" /><img src="IMG/book5.jpg" width="600" Alt="" /><img src="IMG/book6.jpg" width="600" Alt="" />
           </div>
       <div class="text">
           <div class="linha" >
               <div class="coluna col12">
               <center><h2><strong><em>OUR CREATION IS YOUR HAPPINESS!!</em></strong></h2></center>
               </div>
           </div>
       </div>
           </header>
   </div>
</div>
   <div class="image">
       <div class="linha">
           <div class="coluna col12">
               <p>Have a beautiful decoration, with designs that will further enhance the space of your event.</br> Sentimental Moments Event Decor through a competence, creates beautiful scenery, using quality flowers, as well as furniture and details that will only give life to the ceremony and the party.</p>
               <p>We are specialized in personalised vintage and rustic decor.</p></br>

               <h3>VINTAGE:</h3>
                   <p>The vintage style is influenced in several ways by the decoration dating from the period after the Second World War.</br> In Europe, it is a difficult time to rebuild everything that has been trampled on by the war, physically and spiritually.</p>
                   <p>The vintage style thus brings an extremely interesting atmosphere which is at the same time marked by the nostalgia of the past and by the optimism of the renewal.</p>
                   <p>Check out some work done in the gallery!</p>
               <section id="slide">
                   <section id="buttons">
                       <a href="#" class="prev">«</a>
                       <a href="#" class="next">»</a>
                   </section>
                       <ul>
                           <li>
                               <img src="IMG/cage2.jpg">
                           </li>
                           <li>
                               <img src="IMG/flower5.jpg">
                           </li>
                           <li>
                               <img src="IMG/flower6.jpg">
                           </li>
                           <li>
                               <img src="IMG/flower2.jpg">
                           </li>
                           <li>
                               <img src="IMG/light1.jpg">
                           </li>
                           <li>
                               <img src="IMG/light3.jpg">
                           </li>
                           <li>
                               <img src="IMG/wood4.jpg">
                           </li>
                           <li>
                               <img src="IMG/bottle.jpg">
                           </li>
                       </ul>
               </section>
            </div>
       </div>
   </div>
   <div class="footer">
       <div class="linha">
           <footer>
               <div class="coluna col12">
                   <span>Copyright © 2017 - Sentimental Moments Event Decor. All rights reserved.</span>
               </div>
           </footer>
       </div>
   </div>
</body>
</html>

OBS: Tudo que está em negrito é o jQuery e o plugin que tem como <div class="cycle-slideshow">

Entrar

Atualizando a pagina sem Refresh

Pergunta

Link para o comentário

Compartilhar em outros sites

12 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns