ajax.reload() not working as expected

ashiers

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();
});

WebCodex

This is what you need to read:

https://datatables.net/reference/api/ajax.reload()

allan

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.data as 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 the ajax.reload() examples for how to do that.

Allan

ashiers

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?

table.ajax.reload(function(json){
   ajax: {
                "url": "../TableViewServlet",
                'dataType': 'json',
                "type": "POST",
                "data": {
                    "userid": 1,
                    "year": year,
                    "month": month
                }
    }
});

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.

allan

Sorry - I should have said - see ajax.data for examples!

The last three examples on that page show how that property can be used as a function.

Allan

ashiers

OK...so now we're getting somewhere. So, if I change the initial code to this:

table = $('#appointments').DataTable( {
    dom: "Brtip",
    ajax: {
                "url": "../TableViewServlet",
                'dataType': 'json',
                "type": "POST",
                "data": function ( d ) {                     
                     d.userid = 1,
                     d.year = year,
                     d.month = month
                },               
    },
        ...
});

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?

allan

Assuming you update the values in year and month, then yes, that is correct.

Whenever you call ajax.reload() to reload the table, that function will be executed.

Allan

ashiers

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.

allan

Guess what...the table is not reloading.

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.

If it did, I would get the printout to the console: "Table initialisation complete"

No it wouldn't. The event handler is listening for the init event. The initialisation has already happened. That event is only triggered once in the life time of the table. Listen for the xhr event if you want to know when DataTables completes an Ajax request.

Allan

ashiers

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.