Simple ajax.reload() example not working
Simple ajax.reload() example not working
randomname456
Posts: 2Questions: 1Answers: 0
in DataTables
Description of problem:
I'd like to make use of the documented ajax.reload function, but I can't get this function to work. It would be nice if anyone can point out my mistake, or show me a working example for using the ajax.reload function... I've created a (simple) test case that demonstrates the problem. You should open the console to see the exception appear.
Link to test case:
~~http://live.datatables.net/hojature/1/edit~~ --> Not sure this example is transferrable to others...
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="container">
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
<script>
// Server-side processing with object sourced data
$(document).ready(function() {
var table = $('#example').dataTable( {
"processing": true,
"serverSide": true,
"ajax": "/ssp/objects.php",
"columns": [
{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
// why doesn't reload work?
// it's done according to https://datatables.net/reference/api/ajax.reload()#Examples
table.ajax.reload();
} );
</script>
</body>
</html>
Error messages shown:
"TypeError: Cannot read properties of undefined (reading 'reload') at HTMLDocument.<anonymous>
Answers
It appears to be working in this example from this thread. Clicking on "Change" and you'll see the table change, then the "Reload" gets the original data back.
Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.
Cheers,
Colin
The link to your test case doesn't seem to work. There are two problems. The first is the
ajaxcall is asynchronous. The ajax process isn't complete whentable.ajax.reload();is executed which means Datatables initialization isn't complete and thetablevariable is stillundefined.The second is to use the Datatables API you need to use
$('#example').DataTable( ... );. Notice theD. See the [Accessing the API docs}(https://datatables.net/manual/api#Accessing-the-API) for more details.Here is an example using a button to reload the table:
http://live.datatables.net/merelato/1/edit
To execute code once Datatables initialization is complete use
initCompleteorinit.Kevin
It seems I cannot edit my own post above, so I'll add this separately:
I found the problem. The ajax functions can be called, via the api(). For the above example it should be like this:
table.api().ajax.reload();I'm sorry for wasting anyone's time.
Easily done, thanks for posting back,
Colin