JQuery Uncaught TypeError: Cannot read property 'reload' of undefined

I want to reload the datatable after I insert the new data in the database. I have written this code of HTML.

   Title Price     item_title;?> item_price;?>

But it gives me that error in the console.log.

Uncaught TypeError: Cannot read property 'reload' of undefined on that line $("#Slider_table").DataTable().ajax.reload();

$('#add_items').on('click', function(e)< e.preventDefault(); var formData = new FormData($("#form1")[0]); //It automatically collects all fields from form $.ajax(< url: "Items/add_items", type: "post", data: formData, async: false, cache: false, contentType: false, processData: false, success: function(output) < $("#Slider_table").DataTable().ajax.reload(); >>); >);

2,732 3 3 gold badges 15 15 silver badges 33 33 bronze badges asked Apr 17, 2019 at 4:36 Waqas Ahmad Waqas Ahmad 416 1 1 gold badge 4 4 silver badges 18 18 bronze badges reload is available in version 1.10.0,what version you are using? Commented Apr 17, 2019 at 4:42 Commented Apr 17, 2019 at 4:42

'reload' of undefined means that it's not availability of reload. there's something wrong with .ajax at least.

Commented Apr 17, 2019 at 4:47 @Deepak i am using latest version Commented Apr 17, 2019 at 4:50

2 Answers 2

You have to store the datatable reference in one variable. And as per the code you have used you can't use datatable ajax reload method.

So you have to apply below solution:

Define table variable: var table;

and load the datatable like this on document ready function.

table = $("#Slider_table").DataTable(); $('#add_items').on('click', function(e)< e.preventDefault(); var formData = new FormData($("#form1")[0]); //It automatically collects all fields from form $.ajax(< url: "Items/add_items", type: "post", data: formData, async: false, cache: false, contentType: false, processData: false, success: function(output) < table.row.add($(output)).draw(); // Here in output you have to return table rows html from php >>); >);