ajax.reload() not working as expected
ajax.reload() not working as expected
ashiers
Posts: 101Questions: 8Answers: 7
On the web page I have a select list with a list of months. When the DataTable is initialized I include the month and year values so that the controller returns all records for a given month. See below:
table = $('#appointments').DataTable( {
dom: "Brtip",
ajax: {
"url": "../TableViewServlet",
'dataType': 'json',
"type": "POST",
"data": {
"userid": 1,
"year": year,
"month": month
},
},
...
});
The select list has an id labelled "months". The event handler for it calls table.ajax.reload() but the table doesn't reload at all. Please advise.
$('#months').on('change', function (e) {
//var optionSelected = $("option:selected", this).text();
var valueSelected = this.value;
month = valueSelected;
//console.log("optionSelected: " + optionSelected + " valueSelected: " + valueSelected);
dt = moment(year + "-" + valueSelected + "-01", "YYYY-MM-DD")
daysinmonth = dt.daysInMonth();
firstday = dt.isoWeekday();
//Update the button-carousel
bc.reloadAllOptions({
days_in_month: daysinmonth,
starting_day: firstday
});
//Update the table
console.log("month: " + month);
table.ajax.reload();
});
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
This is what you need to read:
https://datatables.net/reference/api/ajax.reload()
If the
ajax.reload()method is being called, but the Ajax request isn't actually being sent out, we'd need a link to the page showing the issue to understand what the problem is.I don't immediately see the issue from the above.
Having said that - you are using
ajax.dataas a static object, so it will only ever be evaluated once. If you want to read new data on each reload, you'd need to use it as a function - see theajax.reload()examples for how to do that.Allan
The webpage has two drop down list boxes. One is for selecting a change in the month, the other is for selecting a change in the year. The event handler I'm showing is for the month. So yes, when I change the 'month' value from 11 to 12, then I want to reload the table with new data. The same will be true if the user changes the 'year'. So, based on what you're telling me, I need a function that reflects the new values for month and year. So, what does that look like? I'm guessing here...something like this?
What am I supposed to do with the json returned? If anything? I'm lost. I don't see an example of this sort of thing anywhere. The info at https://datatables.net/reference/api/ajax.reload() is really sparse and doesn't really help much for this scenario.
Sorry - I should have said - see
ajax.datafor examples!The last three examples on that page show how that property can be used as a function.
Allan
OK...so now we're getting somewhere. So, if I change the initial code to this:
Does that look right?
Do I still need to call table.ajax.reload() to make the table send another ajax call from the event handler for the select listbox?
Assuming you update the values in
yearandmonth, then yes, that is correct.Whenever you call
ajax.reload()to reload the table, that function will be executed.Allan
Ok. I've tried putting together what we've discussed so far, but can't get it working. For the heck of it, I've returned to http://live.datatables.net/toroxego/6/edit to demonstrate a quick and dirty example of what I'm trying to do. I've placed a select listbox with the months listed and some jquery event handler for the listbox with id "months". Theoretically, when you select a month from the listbox, the month variable should change it's value and the last command is table.ajax.reload(). Guess what...the table is not reloading. If it did, I would get the printout to the console: "Table initialisation complete". That doesn't happen. I know we're loading a text file with data, but that shouldn't make any difference, should it? All I want is for the table to execute another ajax call with the new value for month. That should happen when I call reload(). Please advise.
Looks like it is to me. I can see the Ajax request in the Chrome dev tools when I change the month. If you change the table to page 2 and change the month you can see it redraw to page 1.
No it wouldn't. The event handler is listening for the
initevent. The initialisation has already happened. That event is only triggered once in the life time of the table. Listen for thexhrevent if you want to know when DataTables completes an Ajax request.Allan
Thanks for the clarification. I was undoubtedly using the wrong event to suite my purposes. I've reworked the project and have managed to get it working properly. Thank you for your patience.