Problem

Hi all, I am trying to refresh my table data on a set interval of 10 seconds... problem is that when I initially load the page there is a delay of 10 seconds before my table is shown...

Code

markup

<h2>Employee List</h2>
<!-- table -->
<table class="table table-striped table-hover table-responsive">
    <thead>
        <tr>
            <td>ID</td>
            <td>Emplyee Name</td>
            <td>Address</td>
            <td>Created at</td>
            <td>Action</td>
        </tr>
    </thead>

    <!-- table content dynamically generated by the javascript -->
    <tbody id="showdata"></tbody>
    <!-- end content -->

</table>
<!-- end table -->

jQuery

$(function(){


        pollServer();

        function pollServer(){

            window.setTimeout(function () {
                alert('hey');
                $.ajax({ // this is a json object inside the function
                    type: 'ajax',
                    url: '<?php echo base_url('employee/showAllEmployee'); ?>',
                    async: false,
                    dataType: 'json',
                    success: function(data){
                        console.log(data);
                        var html = '';
                        var i;
                        for(i = 0; i < data.length; i++){
                            html += '<tr>' +
                                        '<td>' + data[i].employee_id + '</td>' +
                                        '<td>' + data[i].employee_name + '</td>' +
                                        '<td>' + data[i].address + '</td>' +
                                        '<td>' + data[i].created_at + '</td>' +
                                        '<td>' +
                                            '<div class="pull-right">' +
                                                '<a class="btn btn-info btn-xs item-edit" href="javascript:;" data="' + data[i].employee_id + '">Edit</a>' +
                                                '<a class="btn btn-danger btn-xs item-delete" href="javascript:;" data="' + data[i].employee_id + '"><i class="fa fa-times"></i></a>' +
                                            '</div>' +
                                        '</td>' +
                                    '</tr>'
                        }
                        $('#showdata').html(html);
                    },
                    error: function(){
                        alert('Could not get Data from Database');

                    },
                    plete: function(){
                        pollServer();
                    }
                })
            }, 10000);
        }
    });

Question

How do I get my data on page load, and then ping the server every 10 seconds thereafter?

Problem

Hi all, I am trying to refresh my table data on a set interval of 10 seconds... problem is that when I initially load the page there is a delay of 10 seconds before my table is shown...

Code

markup

<h2>Employee List</h2>
<!-- table -->
<table class="table table-striped table-hover table-responsive">
    <thead>
        <tr>
            <td>ID</td>
            <td>Emplyee Name</td>
            <td>Address</td>
            <td>Created at</td>
            <td>Action</td>
        </tr>
    </thead>

    <!-- table content dynamically generated by the javascript -->
    <tbody id="showdata"></tbody>
    <!-- end content -->

</table>
<!-- end table -->

jQuery

$(function(){


        pollServer();

        function pollServer(){

            window.setTimeout(function () {
                alert('hey');
                $.ajax({ // this is a json object inside the function
                    type: 'ajax',
                    url: '<?php echo base_url('employee/showAllEmployee'); ?>',
                    async: false,
                    dataType: 'json',
                    success: function(data){
                        console.log(data);
                        var html = '';
                        var i;
                        for(i = 0; i < data.length; i++){
                            html += '<tr>' +
                                        '<td>' + data[i].employee_id + '</td>' +
                                        '<td>' + data[i].employee_name + '</td>' +
                                        '<td>' + data[i].address + '</td>' +
                                        '<td>' + data[i].created_at + '</td>' +
                                        '<td>' +
                                            '<div class="pull-right">' +
                                                '<a class="btn btn-info btn-xs item-edit" href="javascript:;" data="' + data[i].employee_id + '">Edit</a>' +
                                                '<a class="btn btn-danger btn-xs item-delete" href="javascript:;" data="' + data[i].employee_id + '"><i class="fa fa-times"></i></a>' +
                                            '</div>' +
                                        '</td>' +
                                    '</tr>'
                        }
                        $('#showdata').html(html);
                    },
                    error: function(){
                        alert('Could not get Data from Database');

                    },
                    plete: function(){
                        pollServer();
                    }
                })
            }, 10000);
        }
    });

Question

How do I get my data on page load, and then ping the server every 10 seconds thereafter?

• javascript
• jquery
• ajax
• polling

Share Improve this question Follow asked Jan 26, 2017 at 9:04 Jethro HazelhurstJethro Hazelhurst 3,29577 gold badges4242 silver badges8585 bronze badges 4

• You use setTimeout instead of setInterval – ppasler Commented Jan 26, 2017 at 9:06
• 3 lol - he does use setTimeout! – Jaromanda X Commented Jan 26, 2017 at 9:07
• are you getting data properly on console.log(data);? – Hikmat Sijapati Commented Jan 26, 2017 at 9:07
• @Hikmat absolutely, but only after 10 seconds.... the alert pops up after 10 seconds and the data shows in the table and the console – Jethro Hazelhurst Commented Jan 26, 2017 at 9:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

change pollServer as follows

function pollServer(){
    $.ajax({ // this is a json object inside the function
    // removed for clarity
        plete: function(){
            setTimeout(pollServer, 10000);
        }
    });
}

Just call the same function inside it's success callback with a timeout.

function pollServer() {
   $.ajax({
      ...
      success: function(data) {
         setTimeout(function() {
            pollServer();
         },10000);
      }
   });
}

// Call the function on load
pollServer();