Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

CappiLevi

Quando a página é carregada via Ajax, função javascript não é chamada

Por , em Javascript

Recommended Posts

CappiLevi    1

CappiLevi
Postado

Olá pessoal, tenho um problema que acredito que seja simples de se resolver, mas como eu estou começando a aprender Ajax agora para mim é difícil, pois tenho muitas dúvidas para esclarecer.

 

Bom, primeiro explicarei como o sistema funciona, depois publcarei o código...

 

No banco de dados SQL tenho um campo ID, inteiro, com auto increment, ou seja, está sempre incrementando um valor de x em x segundos (1,2,3,4...). Não necessariamente ao mesmo tempo.

 

O sistema é composto por 2 arquivos: sql.php, que é a página onde está o sistema e outra chamada conteudo.html. O que o sistema tem de fazer é verificar no banco de dados se ouve alguma alteração nas IDs e executar a seguinte tarefa: se a ID mudar, por exemplo, passar de 2 para 3, deverá atualizar a página conteúdo.html, se não, se a ID continuar em 2, não deverá atualizar a página. Ou seja, só deverá atualizar a página conteudo.html quando houver alguma alteração no campo ID.

 

Para verificar se a ID foi alterada o sistema deverá fazer uma verificação com Ajax de 5 em 5 segundos, fazendo consultas no banco de dados e verificando se a última ID é diferente da que foi obtida no teste anterior, se for, deverá atualizar a página conteúdo.html. Este sistema é muito utilizado em sites que utilizam Ajax e preciso muito de entender como funciona para colocar em prática alguns projetos...

 

O código está quase pronto... mas estou com um probleminha nos refresh utilizando Ajax. Veja o código abaixo:

 

O arquivo conteudo.html contém apenas algum html só para testar... por isso não vou publicá-lo aqui.

 

sql.php

 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">

/* As duas funções abaixo é só para iniciar o Ajax ou documento XML de acordo com o sistema ou browser que você estiver utilizando... bla bla bla... */

function getHTTPObject()
{
  if(window.XMLHttpRequest)
  {
    return new XMLHttpRequest();
  } 
  else
  {
    if(window.ActiveXObject)
    {
      var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];                  
      
      for(var i = 0; i < prefixes.length; i++)
      {
        try
        {
          return new ActiveXObject(prefixes[i] + ".XMLHTTP");
        } 
        catch (e) {}
      }
    }
  }
  
  function ajax(url,id_conteudo )
  {
    var xmlHttp = getHTTPObject();
    xmlHttp.onreadystatechange = function()
    {
      if (xmlHttp.readyState == 4) 
      {
        var retorno = xmlHttp.responseText;
        document.getElementById(id_conteudo).innerHTML = retorno; /* A variavel id_conteudo aqui guarda o valor que identifica qual a DIV que deverá ser
 atualizada (refresh_pag ou refresh_sql) */
      }
    }
    
    xmlHttp.open("GET", url,true);
    xmlHttp.send(null);
  }
		
  function atualiza_sql(ultima_id) /* Ok, vamos atualizar o sistema para verificar novamente se mudou ou não a ID. Aqui não atualizamos a página conteudo.html */
  {
    ajax('<?PHP echo $_SERVER["PHP_SELF"]; ?>?id='+ultima_id,'refresh_sql');
  }
  
  function atualizar_pags(atualizar,ultima_id)
  {		  
    if(atualizar == "sim") /* Se for para atualizar entra aqui */
    {
      ajax('conteudo.html"; ?>','refresh_pag'); /*  Atualiza ou mostra a página conteudo.html entre <div id="refresh_pag"> e </div> */
      ajax('<?PHP echo $_SERVER["PHP_SELF"]; ?>?id='+ultima_id,'refresh_sql'); /* Atualiza uma parte da página atual, somente o que está 
entre <div id="refresh_sql"> e </div> que é o local onde está o sistema...*/
    }
    else
    {
      setTimeout(atualiza_sql(ultima_id),5000); /* Se não for para atualizar, caso em que a ID continua a mesma, então damos um tempo de
 5 segundos até iniciar uma nova verifição, chamando a função atualiza_sql() lá em cima, passando agora apenas o parâmetro da ultima_id;*/
    }
  }

</script>

</head>
<body>
  <div id="refresh_sql">
    <?PHP 
    
    if($_GET["id"] == null)
    {
      $id_obtida = 0; // Quando a página é iniciada ele entra aqui. A variável $id_obtida irá guardar o valor da útlima ID obtida do 
banco de dados para depois comparar com outra varível ($ultiam_id), que explicarei mais a frente. Como não foi passado nada ainda pelo
 método GET com Ajax eu zerei a ID;
    }
    else
    {
      $id_obtida = $_GET["id"];
    }
    
    // Comando SQL, aqui seria a conexão com o banco de dados

    $ultima_id = $linha_ultima_id["ID"];

    // Aqui eu pego o valor no banco de dados da última ID, só que desta vez o valor pode ser diferente pelo fato de já ter passado algum 
tempo que pegamos este valor e guardamos na variável $id_obtida;
    // Não coloquei o código da conexão ao banco de dados porque não achei necessário, visto que o problema envolve Ajax... já testei e 
retorna o valor da última ID direitinho.

    if ($ultima_id > $id_obtida) // Agora comparamos as 2 IDs para ver se precisaremos atualizar a página conteúdo.html, se a nova ID ($ultima_id) for maior então
 passamos um parâmetro "sim" para indicar que a ID é diferente da ID anterior ($id_obtida), caso em que temos de atualizar a página conteudo.html
    {
      echo '<script>atualizar_pags("sim",'.$ultima_id.');</script>';
    }
    else
    {
      echo '<script>atualizar_pags("nao",'.$ultima_id.');</script>'; // Aqui é o contrário... só entrará aqui quando a $id_obtida for igual 
à $ultima_id, caso em que não precisaremos atualizar a página conteudo.html
    }
    ?>
  </div>
  <div id="refresh_pag"></div>
</body>
</html>

Coloquei comentários no código acima para evitar de eu explicar tudo denovo aqui. Bom, quando entramos na página ele faz tudo direitinho, atualiza o arquivo conteudo.html e da um refresh no sistema, iniciando uma nova verificação no campo ID.Na segunda vez que ele entra, ele pega direitinho o valor da $id_obtida anteriormente e da $ultima_id também, só que quando chega ali na parte onde tem as duas funções:

 

if ($ultima_id > $id_obtida) // Agora comparamos as 2 IDs para ver se precisaremos atualizar a página conteúdo.html ou não,
 passando a última_id obtida e outro parâmetro (sim, nao).
    {
      echo '<script>atualizar_pags("sim",'.$ultima_id.');</script>';
    }
    else
    {
      echo '<script>atualizar_pags("nao",'.$ultima_id.');</script>'; 
    }
    ?>

... ele entra normalmente onde tem de entrar mas não chama a função em javascript. Ou seja, quando faço o refresh do sistema que está entre <div id="refresh_sql"> e </div> somente o PHP funciona corretamente, pois na hora de chamar a função em javascript atualizar_pags() novamente ele não chama... e sim, já testei para ver se está entrando lá ou não com um alert em javascript. Ele só chega até o if else do PHP...

 

Lembrando que da primeira vez que o sistema é executado, ou seja, antes de ser utilizado o Ajax, ele entra na função sem problemas. Só não entra após o refresh da página com Ajax...

Compartilhar este post

Link para o post
Compartilhar em outros sites

CappiLevi    1

CappiLevi
Postado

Pessoal só vou alterar uma coisa na função a seguir... na pressa de publicar logo o tópico cometi um erro no código, e já não dava para editar.

Deixei ali umas aspas a mais e algum código PHP:

 

ajax('conteudo.html"; ?>','refresh_pag');

Bom, corrigindo fica assim:

 function atualizar_pags(atualizar,ultima_id)
  {               
    if(atualizar == "sim") /* Se for para atualizar entra aqui */
    { 
      ajax('conteudo.html','refresh_pag'); /*  Atualiza ou mostra a página conteudo.html entre <div id="refresh_pag"> e </div> */
      ajax('<?PHP echo $_SERVER["PHP_SELF"]; ?>?id='+ultima_id,'refresh_sql'); /* Atualiza uma parte da página atual, somente o que está 
entre <div id="refresh_sql"> e </div> que é o local onde está o sistema...*/
    }
    else
    {
      setTimeout(atualiza_sql(ultima_id),5000); /* Se não for para atualizar, caso em que a ID continua a mesma, então damos um tempo de
 5 segundos até iniciar uma nova verifição, chamando a função atualiza_sql() lá em cima, passando agora apenas o parâmetro da ultima_id;*/
    }
  }

Mas isso não resolve o problema, foi só na hora de publicar que eu havia alterado algumas coisinhas... Fico a espera de respostas. Obrigado! ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

CappiLevi    1

CappiLevi
Postado

Resolvi abrir um novo tópico sobre este assunto na sessão Ajax, pois já alterei grande parte do código...

 

http://forum.imasters.com.br/index.php?/topic/388539-sistema-em-ajax-sql-faz-travar-o-browser/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Perfil-Excluido    0

Perfil-Excluido
Postado

Olá pessoal, tenho um problema que acredito que seja simples de se resolver, mas como eu estou começando a aprender Ajax agora para mim é difícil, pois tenho muitas dúvidas para esclarecer.

 

Bom, primeiro explicarei como o sistema funciona, depois publcarei o código...

 

No banco de dados SQL tenho um campo ID, inteiro, com auto increment, ou seja, está sempre incrementando um valor de x em x segundos (1,2,3,4...). Não necessariamente ao mesmo tempo.

 

O sistema é composto por 2 arquivos: sql.php, que é a página onde está o sistema e outra chamada conteudo.html. O que o sistema tem de fazer é verificar no banco de dados se ouve alguma alteração nas IDs e executar a seguinte tarefa: se a ID mudar, por exemplo, passar de 2 para 3, deverá atualizar a página conteúdo.html, se não, se a ID continuar em 2, não deverá atualizar a página. Ou seja, só deverá atualizar a página conteudo.html quando houver alguma alteração no campo ID.

 

Para verificar se a ID foi alterada o sistema deverá fazer uma verificação com Ajax de 5 em 5 segundos, fazendo consultas no banco de dados e verificando se a última ID é diferente da que foi obtida no teste anterior, se for, deverá atualizar a página conteúdo.html. Este sistema é muito utilizado em sites que utilizam Ajax e preciso muito de entender como funciona para colocar em prática alguns projetos...

 

O código está quase pronto... mas estou com um probleminha nos refresh utilizando Ajax. Veja o código abaixo:

 

O arquivo conteudo.html contém apenas algum html só para testar... por isso não vou publicá-lo aqui.

 

Por acaso estou com o mesmo problema. Ao incluir um arquivo em php via ajax, com um refresh de x em x segundos usando setInterval, onde neste arquivo se encontra um ou mais chamadas à funções em javascript, simplesmente ele executa o php e os comandos SQL, mas não chama a função em javascript que está dentro do php, ou seja, ele faz direitinho os refresh de x em x segundos mas a página que está sendo atualiza só atualiza a parte do php, o javascript não.

 

Veja o exemplo abaixo:

 

index.php

 

<html>
<head>
// Aqui vai o sistema em Ajax para fazer o refresh de x em x segundos

function ajax(url,id_conteudo)
{
  // aqui vai a função ajax...
}

function alerta_teste()
{
  alert('teste');
}

function exemplo()
{
  ajax('index.php','atualizar');   // Parâmetros -> url da página atual e id da DIV que está lá em baixo
  setInterval('exemplo',3000);
}

</head>
<body>
  <div id="atualizar">
  <?PHP
  // Comando SQL ou PHP que certamente estará sempre sendo executado de x em x segundos

  // Aqui fazemos uma chamada à função javascript alerta_teste(), que só será chamada uma única vez,
  // quando a página for carregada... o que é estranho visto que ela está dentro de uma div que está sendo atualizada de x em x segundos...
  echo '<script>alerta_teste();</script>';
  ?>
  </div>
</body>
</html>

Primeiramente... o código acima é só para exemplificar a situação. Por favor não me venham publicar um sistema que faça aparecer na tela vários alertas repetidamente...

 

A questão é a seguinte... porque a função em javascript alerta_teste(), que está dentro do php, não é executada repetidamente como os comandos em php?

 

Eu vi que você abriu outro tópico, mas o assunto é outro, porque você alterou quase o código todo. Mas se alguém puder ajudar sobre este problema aqui seria bom, porque estou com o mesmo problema. http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito