Run function on page ready and re run every 30 seconds

Question

I have the following script which works to a point. What I am trying to do is run the function on page ready and then run it again every 30 seconds.

[code]

$( document ).ready(function() {
$('#table').empty();
$.ajax({
    type: 'POST',
    url: 'check_current_requests2.php',
    data: $('#departcount').serialize(),
    dataType: "json", 
    success: function (data) {
    if (data) {
        var len = data.length;
        var txt = "";
        if (len > 0) {
            for (var i = 0; i < len; i++) {
                if (data[i].Department && data[i].DepartCount) {
                    txt += "<tr><td>" + data[i].Department + "</td><td>" + data[i].DepartCount + " </td></tr>";
                }
            }
            if (txt != "") {
                $("#table").append(txt);
            }
        }
    }
},
error: function (jqXHR, textStatus, errorThrown) {
alert('error: ' + textStatus + ': ' + errorThrown);
}
});
return false;
});

[/code]

Does anyone have any idea on how I can do this.

Many thanks in advance.

possible duplicate of [run a function in time interval in jquery](http://stackoverflow.com/questions/6081443/run-a-function-in-time-interval-in-jquery) — user2314737, Jul 15 '15 at 20:55

jfriend00 · Accepted Answer · 2015-07-16T01:57:17.803

Just put the code into a function. Then call that function from $(document).ready() and call it from a setInterval().

$( document ).ready(function() {
    var interval;

    function run() {
        $('#table').empty();
        $.ajax({
            type: 'POST',
            url: 'check_current_requests2.php',
            data: $('#departcount').serialize(),
            dataType: "json", 
            success: function (data) {
                if (data) {
                    var len = data.length;
                    var txt = "";
                    if (len > 0) {
                        for (var i = 0; i < len; i++) {
                            if (data[i].Department && data[i].DepartCount) {
                                txt += "<tr><td>" + data[i].Department + "</td><td>" + data[i].DepartCount + " </td></tr>";
                            }
                        }
                        if (txt != "") {
                            $("#table").append(txt);
                        }
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('error: ' + textStatus + ': ' + errorThrown);
                // cancel interval if getting an error so you don't get repeated errors
                clearInterval(interval);
            }   
        });
    }

    // run it initially
    run();

    // run it every 30 seconds
    interval = setInterval(run, 30 * 1000);
});

As I've added to the code, I also recommend that you cancel the interval if you get an error so you don't get a case where the page keeps putting up an error alert every 30 seconds.

Fading in the new rows is a bit tricky. You could do that like this:

$( document ).ready(function() {
    var interval;

    function run(skipFade) {
        $('#table').empty();
        $.ajax({
            type: 'POST',
            url: 'check_current_requests2.php',
            data: $('#departcount').serialize(),
            dataType: "json", 
            success: function (data) {
                if (data) {
                    var len = data.length;
                    var txt = "";
                    var style = "";
                    if (!skipFade) {
                        style = ' style="display: none;"';
                    }
                    if (len > 0) {
                        for (var i = 0; i < len; i++) {
                            if (data[i].Department && data[i].DepartCount) {
                                txt += "<tr"+ style + "><td>" + data[i].Department + "</td><td>" + data[i].DepartCount + " </td></tr>";
                            }
                        }
                        if (txt != "") {
                            $("#table").append(txt);
                        }
                        if (!skipFade) {
                            $("#table .fader").fadeIn(function() {
                                $(this).removeClass("fader");
                            });
                        }
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('error: ' + textStatus + ': ' + errorThrown);
                // cancel interval if getting an error so you don't get repeated errors
                clearInterval(interval);
            }   
        });
    }

    // run it initially
    run(true);

    // run it every 30 seconds
    interval = setInterval(run, 30 * 1000);
});

Here's a demo of the fadeIn concept in a simpler environment: http://jsfiddle.net/jfriend00/p3fts2n4/

works perfectly. one last question, is there a way to re run with a FadeIn. — DCJones, Jul 15 '15 at 21:08

Run function on page ready and re run every 30 seconds

1 Answers1