ajax function auto reload

Question

Hello i am getting data from a php file in json format,all works fine.I would however desire that this function reloads every say 3000millisecs thus updating the data.

How do I achieve this?

function loadFbill(hsid)
{
// Display a loading icon in our display element
    $('.list-item-display').html('<span><img src="img/progress.gif" /></span>');

    // Request the JSON and process it
    $.ajax({
        type:'GET',
        url:""+xhr_path+"js_on.php",
        data:"hid="+hsid+"&subscribers=paid",
        success:function(feed) {
            // Create an empty array to store images
            var thumbs = [];

            // Loop through the items
            for(var i=0, l=feed.response.length; i < l && i < 6; ++i) 
            {
                // Manipulate the image to get thumb and medium sizes

                var payee = feed.response[i].result_paid;
                var transaction_m = feed.response[i].result_payment_details; 
                var ptime = feed.response[i].result_time;
                var plan = feed.response[i].result_plan;
                var payee_num = feed.response[i].result_num;
                var localhs = feed.response[i].result_hs;
                var transaction_date = feed.response[i].result_payment_date;
                var diff_date = feed.response[i].result_time_diff;

                // Add the new element to the array
                thumbs.push("<div class=list-item><div class=list-datetime><div class=time>"+ptime+"</div></div><div class=list-info><img src=img/pesa/ps_"+transaction_m+".jpg height=28 width=28 class=img-circle img-thumbnail/></div><div class=list-text><a href=# class=list-text-name> "+payee+" </a><p>"+payee_num+"  <span class=icon-calendar></span> "+transaction_date+" <span class=icon-calendar-empty></span>"+diff_date+"<span class=icon-globe></span> "+localhs+" </p></div><div class=list-controls> "+plan+"</div></div>");    
            }


            // Display the thumbnails on the page
            $('.list-item-display').html(""+thumbs.join('')+"");

            // A function to add a lightbox effect
            addLB();
        },
        dataType:'json'
    });

}

Answer 1

You can simply add setTimeout into ajax request callback function:

function loadFbill(hsid) {
    // Display a loading icon in our display element
    $('.list-item-display').html('<span><img src="img/progress.gif" /></span>');

    // Request the JSON and process it
    $.ajax({
        type: 'GET',
        url: "" + xhr_path + "js_on.php",
        data: "hid=" + hsid + "&subscribers=paid",
        success: function (feed) {

            // ... all your code untouched

            setTimeout(loadFbill, 3000); // <-- and reload again
        },
        dataType: 'json'
    });

}