0

Boa tarde

Estou testando automatizar a busca por registro ao banco de dados com o script abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="public/css/teste.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <!-- <script src="public/js/exibi.js"></script>  -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $(function() {
            var refreshAutomatico = setInterval(function(){
                $('tabela').load(Teste());
              }, 5000);
        });  
  </script>
</head>
<body>
    <div class="container">
      <div class="row">
          <div class="col-sm-6">
              <div id="resposta">
                <table border="1" width="500">
                      <thead>
                          <tr>
                              <th>ID</th>
                              <th>Nome</th>
                              <th>Acesso</th>
                          </tr>
                      </thead>
                      <tbody id="tabela">
                      </tbody>
                </table>
              </div>
          </div>
      </div>
    </div>
<script type="text/javascript">
          $(document).ready(
            function Teste(){
            $.ajax({
            type:'post',		//Definimos o método HTTP usado
            dataType: 'json',	//Definimos o tipo de retorno
            url: 'consulta.php',//Definindo o arquivo onde serão buscados os dados
            success: function montaTabela(dados){
            console.log(dados);
            for(var i=0;dados.length>i;i++){
              //Adicionando registros retornados na tabela
              $('#tabela').append('<tr><td>'+dados[i].id+'</td><td>'+dados[i].nome+'</td><td>'+dados[i].acesso+'</td></tr>');
            }

            
            }
          });
          });

</script>  
</body>
</html>

Porém, está ocorrendo o erro abaixo:

Uncaught ReferenceError: Teste is not defined at teste.php:15

3
  • A primeira tag <script> é executada e o método Teste() ainda não foi instanciado, logo dá esse erro. Passa o método para dentro da segunda tag <script>.
    – iamdlm
    Commented 15/06/2019 às 20:39
  • Coloca os teus scripts depois da tag </body>, e aproveita ajustar a ordem de carregamento dos teus scripts.
    – Edilson
    Commented 15/06/2019 às 20:48
  • @Edilson tentei as duas soluções porem ainda continua dando o mesmo erro: tanto se eu colocar a function do bloco setInterval depois ou antes do bloco do ajax Commented 15/06/2019 às 20:56

2 Respostas 2

0

Tem muitos problemas no seu código. Primeiro que você não conseguiria acessar a função Teste() fora do $(document).ready porque a função não teria escopo no outro bloco de script.

Outro erro é que você está colocando o nome Teste na função anônima do $(document).ready, quando ela deveria ser um função dentro da function do .ready:

$(document).ready(function(){ // <-- função anônima do .ready
   function Teste(){}
});

Outro erro mais grave é que você está usando dois AJAX de uma só vez: .load e $.ajax.

O método .load() é um AJAX simplificado do jQuery. Portanto, quando você chama o .load() para chamar outra função com outro AJAX, é totalmente sem sentido.

Se você quer carregar dados para dentro do elemento #tabela, ou você usa .load() ou $.ajax. No seu caso, como se trata de JSON, use apenas o $.ajax pois ele é mais completo e possui opções, ao contrário do .load().

Também não é recomendado usar setInterval para fazer requisições de tempo em tempo. O ideal é fazer uma requisição após a outra somente quando uma tiver sido completada (trato disso na resposta neste link).

Outra coisa é que $(document).ready(function(){}); é o mesmo que $(function(){});, portanto não faz sentido usar dois ao mesmo tempo.

Seu código correto ficaria assim:

$(document).ready(function(){

   function Teste(){
      $.ajax({
         type:'post',       //Definimos o método HTTP usado
         dataType: 'json',  //Definimos o tipo de retorno
         url: 'consulta.php',//Definindo o arquivo onde serão buscados os dados
         success: function(dados){
            console.log(dados);
            for(var i=0;dados.length>i;i++){
               //Adicionando registros retornados na tabela
               $('#tabela').append('<tr><td>'+dados[i].id+'</td><td>'+dados[i].nome+'</td><td>'+dados[i].acesso+'</td></tr>');
            }
         }
      });
   }

   var refreshAutomatico = setInterval(Teste, 5000);
});
3
  • Bom dia @Sam obrigado pela explicação, porem ao executar com o seu código mesmo aumentando o tempo o mesmo esta puxando a primeira vez a informação e depois ela duplica Commented 16/06/2019 às 11:21
  • Bom dia. Acho que tem que esvaziar antes: $('#tabela').empty().append(....
    – Sam
    Commented 16/06/2019 às 11:38
  • Creio que vc deve usar .html() em vez de .append(). Assim vc nem precisa esvaziar a tabela antes: $('#tabela').html(...
    – Sam
    Commented 16/06/2019 às 18:48
0

Descobri que dessa forma ele puxa a informação e não duplica, porem não sei se seria a forma mais correta de executar tal código por isso fico a disposição para sugestões melhores

$(function() {
	var refreshAutomatico = setInterval(function(){
		$('#tabela').empty(); //Limpando a tabela
			$.ajax({
		  type:'post',		//Definimos o método HTTP usado
		  dataType: 'json',	//Definimos o tipo de retorno
		  url: 'consulta.php',//Definindo o arquivo onde serão buscados os dados
		  success: function montaTabela(dados){
			console.log(dados);
			for(var i=0;dados.length>i;i++){
			  //Adicionando registros retornados na tabela
			  $('#tabela').append('<tr><td>'+dados[i].id+'</td><td>'+dados[i].nome+'</td><td>'+dados[i].acesso+'</td></tr>');
			}
		  }
		});
		
	}, 50000);
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .