jQuery AJAX call function on timeout

Question

I am trying to reload my jQuery DataTables without refreshing the page in an attempt to capture new data.

Here is my initial ready function that begins the process:

 $(document).ready(function()
 {
   $.ajax({
     url:'api/qnams_all.php',
     type:"GET",
     dataType:"json"
   }).done(function(response) {
       console.log(response.data);
       renderDataTable(response.data)
   }).fail(function() {
       alert( "error" );
   }).always(function() {
       alert( "complete" );
   });  
 });

I'm sending the data to this function:

 function renderDataTable(data)
 {
   var $dataTable = $('#example1').DataTable({
     "data": data,
     "iDisplayLength": 25,
     "order": [[ 6, "desc" ]],
     "bDestroy": true,
     "stateSave": true
     // there's some more stuff, but I don't think necessary to show
   });
 }

I'm trying to utilize the answer found here: How to refresh table contents in div using jquery/ajax

As follows:

 setTimeout(function(){
   $( "#example1" ).load( "mywebpage.php #example1" );
 }, 2000);

Using all of the above code, when the page first loads, it looks like this:

But after the refresh, it looks like this:

The picture immediately above does indeed reload without the page refreshing, but I'm not sure why it looks like the picture above.

Swapping out the content of the table will blow away the stuff added by DataTable. — epascarello
– epascarello, Commented May 26, 2016 at 19:58

D.Dimitrioglo · Accepted Answer · 2016-05-26 19:59:07Z

3

I think this example will be usefull

//Reload the table data every 30 seconds (paging reset)
var table = $('#example').DataTable( {
    ajax: "data.json"
} );

setInterval( function () {
    table.ajax.reload();
}, 30000 );

more details - here

answered May 26, 2016 at 19:59

D.Dimitrioglo

3,6632 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

IMTheNachoMan Over a year ago

@HoodCoderMan, I would check this solution first as I think it'll be better.

John Beasley Over a year ago

If I'm looking at this correctly, am I to add on to var $dataTable = ('#example1').DataTable({ "data": data, "ajax": data.json, ..... }); Is this correct?

D.Dimitrioglo Over a year ago

for your example will be something like this: var $dataTable = $('#example1').DataTable({ ajax: "api/qnams_all.php" });

John Beasley Over a year ago

@D.Dimitrioglo Using the above method, and the text you suggested, I almost got it working. But now, the problem I have is when the page first loads, all of the records are duplicated. Any thoughts?

D.Dimitrioglo Over a year ago

You should debug your code to find out a reason why are the records duplicated. There is an draw event witch fired once the table has completed a draw. $('#example1').dataTable(); $('#example1').on( 'draw.dt', function () { console.log('DataTable has drawn!'); });

IMTheNachoMan · Accepted Answer · 2016-05-26 20:00:33Z

0

Create a function to load/render data then call it in document ready and after 2 seconds:

function loadAndRender()
{
    $.ajax(
    {
        url:'api/qnams_all.php',
        type:"GET",
        dataType:"json"
    }).done(function(response)
    {
        console.log(response.data);
        renderDataTable(response.data)
    }).fail(function()
    {
        alert( "error" );
    }).always(function()
    {
        alert( "complete" );
    });  

}

function renderDataTable(data)
{
    var $dataTable = $('#example1').DataTable(
    {
        "data": data,
        "iDisplayLength": 25,
        "order": [[ 6, "desc" ]],
        "bDestroy": true,
        "stateSave": true
        // there's some more stuff, but I don't think necessary to show
    });
}

$(document).ready(loadAndRender);

setTimeout(loadAndRender, 2000);

answered May 26, 2016 at 20:00

IMTheNachoMan

5,9336 gold badges61 silver badges116 bronze badges

3 Comments

John Beasley Over a year ago

Can I use the loadAndRender function to replace the document ready function at the top?

IMTheNachoMan Over a year ago

You define the two functions first. Then you call the loadAndRender one twice: first on document ready and then after 2 seconds.

IMTheNachoMan Over a year ago

I would probably check D.Dimitrioglo's solution first. I don't know anything about DataTables but it appears his might be the better way to do it.

Collectives™ on Stack Overflow

jQuery AJAX call function on timeout

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related