Simple ajax to reload a DIV every 30 seconds

Question

I am the following javascript to reload a div every 30 seconds, but it’s not working , or error.

Code:

$(document).ready(function() {

    var $div_novospedidos = $('#div_novospedidos');
    $div_novospedidos.empty(); //Limpando a tabela
    //setTimeout(function(){ location.reload(); }, 30000);
    setTimeout(newRequests(), 30000);


    function newRequests() {
        //$div_novospedidos.load("database3.php", function(data, status){
        $.get("database3.php", function(data, status) {
            var dados_pedido = data;
            const obj = dados_pedido;

            function executa_new() {
                try {
                    var dados = JSON.parse(data);
                    console.log(dados);
                    $.each(dados, function(i, item) {
                        numeroPedido = item.doc_number;
                        nomeCliente = item.client_name;
                        horarioPedido = item.clock;
                        var newReq = $('<div class="panel panel-default col-6 col-lg-4 ">');
                        var cols = "";
                        cols += '<p>HORARIO: ' + horarioPedido + '</p></div>';
                        cols += '<p>PEDIDO: ' + numeroPedido + '</p></div>';
                        cols += '<p>Cliente: ' + nomeCliente + '</p></div>';
                        newReq.append(cols);
                        $("#div_novospedidos").append(newReq);
                    });
                } catch (e) {
                    if (typeof dados != 'undefined') {
                        alert('Ocorreu um erro durante a chamada ' + e);
                    } else {
                        var zeroReq = $('<div class="panel panel-default col-6 col-lg-4 "><h1>SEM NOVOS PEDIDOS</h1>');
                        $("#div_novospedidos").append(zeroReq);
                    }
                }
            }
            if (typeof dados != 'undefined') {
                alert("SEM PEDIDOS");
            } else {
                executa_new();
            }
        });
    }

});

Answer 1

You are using the function setTimeout which is a function that puts a maximum exception time for a given function, so I understand you want your function to be executed more than once, in which case the correct command is setInterval

Thus remaining:

$(document).ready(function() {

    var $div_novospedidos = $('#div_novospedidos');
    $div_novospedidos.empty(); //Limpando a tabela
    //setTimeout(function(){ location.reload(); }, 30000);
    setInterval(newRequests(), 30000);


    function newRequests() {
        //$div_novospedidos.load("database3.php", function(data, status){
        $.get("database3.php", function(data, status) {
            var dados_pedido = data;
            const obj = dados_pedido;

            function executa_new() {
                try {
                    var dados = JSON.parse(data);
                    console.log(dados);
                    $.each(dados, function(i, item) {
                        numeroPedido = item.doc_number;
                        nomeCliente = item.client_name;
                        horarioPedido = item.clock;
                        var newReq = $('<div class="panel panel-default col-6 col-lg-4 ">');
                        var cols = "";
                        cols += '<p>HORARIO: ' + horarioPedido + '</p></div>';
                        cols += '<p>PEDIDO: ' + numeroPedido + '</p></div>';
                        cols += '<p>Cliente: ' + nomeCliente + '</p></div>';
                        newReq.append(cols);
                        $("#div_novospedidos").append(newReq);
                    });
                } catch (e) {
                    if (typeof dados != 'undefined') {
                        alert('Ocorreu um erro durante a chamada ' + e);
                    } else {
                        var zeroReq = $('<div class="panel panel-default col-6 col-lg-4 "><h1>SEM NOVOS PEDIDOS</h1>');
                        $("#div_novospedidos").append(zeroReq);
                    }
                }
            }
            if (typeof dados != 'undefined') {
                alert("SEM PEDIDOS");
            } else {
                executa_new();
            }
        });
    }

});

A little more about the functions:

They are two interesting functions of Javascript, with them we can define a time interval that an event will happen.

The syntax of the two functions is practically identical. What changes is how they act.

Syntax:

window.setTimeout('funcao()', intervalo_em_milisegundos);
window.setInterval('funcao()', intervalo_em_milisegundos);

The two functions will call a second function passed by parameter in the range also determined by parameter.

Being the setTimeout() calling the function only once. While the setInterval() calls the function "infinitely" always in the same time interval.

To pause the function is used clearInterval(). Passing as parameter the name of your range.

Ex:

var intervalo = window.setInterval(lerolero, 1000);
function lerolero() {
    window.alert("Popup");
}
clearInterval(intervalo);

Source: http://rogeriolino.com/2006/12/19/javascript-settimeout-e-setinterval/

Answer 2

You should apply the desired range of way synchronous, that is, calling the function newRequests() only after the return of Ajax. The way you are doing, you can overload your server and even crash your browser.

So add a setTimeout() after the return of Ajax within the function you want to call again.

Another thing is to separate the functions. Each function has its own application, and in this case, it is best to leave them separate.

Your code would look like this.

$(document).ready(function() {
    var $div_novospedidos = $('#div_novospedidos');
    $div_novospedidos.empty(); //Limpando a tabela
    newRequests();
});

function newRequests() {
    //$div_novospedidos.load("database3.php", function(data, status){
    $.get("database3.php", function(data, status) {
        var dados_pedido = data;
        const obj = dados_pedido;

        setTimeout("newRequests()", 30000);

        if (typeof dados != 'undefined') {
            alert("SEM PEDIDOS");
        } else {
            executa_new();
        }
    });
}

function executa_new() {
    try {
        var dados = JSON.parse(data);
        console.log(dados);
        $.each(dados, function(i, item) {
            numeroPedido = item.doc_number;
            nomeCliente = item.client_name;
            horarioPedido = item.clock;
            var newReq = $('<div class="panel panel-default col-6 col-lg-4 ">');
            var cols = "";
            cols += '<p>HORARIO: ' + horarioPedido + '</p></div>';
            cols += '<p>PEDIDO: ' + numeroPedido + '</p></div>';
            cols += '<p>Cliente: ' + nomeCliente + '</p></div>';
            newReq.append(cols);
            $("#div_novospedidos").append(newReq);
        });
    } catch (e) {
        if (typeof dados != 'undefined') {
            alert('Ocorreu um erro durante a chamada ' + e);
        } else {
            var zeroReq = $('<div class="panel panel-default col-6 col-lg-4 "><h1>SEM NOVOS PEDIDOS</h1>');
            $("#div_novospedidos").append(zeroReq);
        }
    }
}