Ir para conteúdo
Fórum Script Brasil
  • 0

Atualizando a pagina sem Refresh


Eduardo Assis

Pergunta

12 respostass a esta questão

Posts Recomendados

  • 0

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 !

Link para o comentário
Compartilhar em outros sites

  • 0

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.

Link para o comentário
Compartilhar em outros sites

  • 0

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í !

Link para o comentário
Compartilhar em outros sites

  • 0

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 por Inside
Link para o comentário
Compartilhar em outros sites

  • 0

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)

Link para o comentário
Compartilhar em outros sites

  • 0

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 por Inside
Link para o comentário
Compartilhar em outros sites

  • 0

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" />

    <script type="text/javascript" src="jQuery/jquery.js"></script>
    <script type="text/javascript" src="jQuery/jquery.cycle2.min.js"></script>
    
    
    <script type="text/javascript">

    $(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">&laquo;</a>
                        <a href="#" class="next">&raquo;</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 &copy; 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">

 

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...