"c is not a function" on ajax reload

blackquattroa4

Appreciate anyone can shed some light on what I did wrong, given following javascript code snippet

$('#mytable').DataTable({
   dom : '...some format string...',
   buttons : [`
      {
         text : 'Refresh',
         action : function(e, dt, node, config) {
            dt.clear().draw();
            dt.ajax.reload({
               ajax : {
                  url : '...my-url...',
                  type : 'GET',
                  data: { },
                  dataType: 'json'
               }
            });
         }
      }
   ],
   ajax : {
      url : '...my-url...',
      type : 'GET',
      data: { },
      dataType: 'json'
   },
}).on('xhr.dt', function (e, settings, json, xhr) {
   // code to populate datatable with json data
   $('#mytable').DataTable().draw('full-hold');
   json.data = [ ];  // nullify so we don't get errors
});

I observe table properly initialize and data is populated with above code; but when I hit 'Refresh' button, javascript console informs "c is not a function" error on 2nd line from bottom. Why!?

P.S. I am using 1.10.20

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Why are you trying to pass an ajax object in the ajax.reload() statement?

            dt.ajax.reload({
               ajax : {
                  url : '...my-url...',
                  type : 'GET',
                  data: { },
                  dataType: 'json'
               }
            });

The allowed parameters are ajax.reload( callback, resetPaging ). Both optional with callback being a function and resetPaging is a boolean. My guess is this is the error.

Kevin

blackquattroa4

thanks for the advise, I rewrite the ajax.reload() with call back function. Now I got a different problem. There's no error coming from javascript console, but I only see part of my data. i.e.

{"success":true", "data":[] }

however, in the browser network tab, I do see

{"success":true", "data":[ ... lots of stuff here... ] }

anyone knew why data is being truncated?

kthorngren

Maybe its this:

}).on('xhr.dt', function (e, settings, json, xhr) {
   // code to populate datatable with json data
   $('#mytable').DataTable().draw('full-hold');
   json.data = [ ];  // nullify so we don't get errors
});

Looks like you are clearing the JSON data. Why are you doing that?

And why do you have $('#mytable').DataTable().draw('full-hold');? The Datatable will be redrawn as part of the ajax.reload() process. If you want to stay on the same page then use the resetPaging parameter of the ajax.reload() API.

Kevin