ajax jquery update page without refreshing

Question

I currently have the below function which updates the data in a div when the page is refreshed and this works fine however i want to edit the function to make it constantly update say every 2 seconds without having to refresh the page. How would i go about doing this?

<script>
    $(document).ready(function ajaxLoop() {
        //-----------------------------------------------------------------------
        // Send a http request with AJAX Jquery
        //-----------------------------------------------------------------------
        $.ajax({
            url: 'getOrderStatus.php', // Url of Php file to run sql         
            data: "",
            dataType: 'json', //data format      
            success: function ajaxLoop(data) //on reciept of reply
                {
                    var OrdersSubmitted = data[0].SUBMITTED; //get Orders Submitted Count
                    var OrdersFulfilled = data[0].FULFILLED; //get Orders Fulfilled count
                    //--------------------------------------------------------------------
                    // 3) Update html content
                    //--------------------------------------------------------------------
                    $('#OrdersSubmitted').html("SUBMITTED:" + OrdersSubmitted);
                    $('#OrdersFulfilled').html("FULFILLED:" + OrdersFulfilled); //Set output html divs
                }
        });
    });
</script>

Answer 1

You can chain setTimeout calls to achieve this:

$(document).ready(function() {
    function updateOrders() {
        $.ajax({                                      
            url: 'getOrderStatus.php',                                  
            dataType: 'json',
            success: function ajaxLoop(data) {
                var OrdersSubmitted = data[0].SUBMITTED;
                var OrdersFulfilled = data[0].FULFILLED;
                $('#OrdersSubmitted').html("SUBMITTED:"+ OrdersSubmitted);
                $('#OrdersFulfilled').html("FULFILLED:"+ OrdersFulfilled);

                setTimeout(updateOrders, 2000);
            } 
        });
    });

The alternative is setInterval(), however if the requests slow down this can lead to calls being queued, which will eventually lead to memory issues.

Answer 2

You need to add a repeating event to call your updateOrders function. Like:

function startUpdateOrdersTimes() {
    setInterval(function() {
        updateOrders();
    }, 2000);
    //Call now (otherwise waits for first call)
    updateOrders();
}

Answer 3

Using "window.setInterval" (https://developer.mozilla.org/en/docs/Web/API/window.setInterval) you can repeatedly execute a function at a specified time interval.

function SomeFunction()
{
    $.ajax({...});
}

window.setInterval(SomeFunction,2000);

This would execute SomeFunction every 2 seconds

Hope this helps

Answer 4

timerupdateorders = setInterval(function() {
    ajaxLoop();
}, 2000);

You may use

clearInterval(timerupdateorders);

to end the timer