Ajax.reload callback function doesn't wait until xhr completes.

grozni

I'm trying to update a select field based on the returned data from ajax.reload but the json data (and the table.api data) is outdated in the callback function:

Setup function (initComplete works correctly):

restaurantTable = $('#restaurantTable').DataTable({
    ajax: {
        url: "/url",
        dataSrc: "results"
    },
    columns: columns,
    initComplete: function(settings, json) {
        var columns = this.api().columns();
        this.api().column( "restaurant:name" ).data().sort().unique().each( function ( value ) {
            $("#restaurants").append( $('<option value="'+value+'">'+value+'</option>') );
        } );
    }
});

Reload function

restaurantTable.ajax.reload( function ( json ) {
    console.log("firing");//outputs before load is complete
    $("#restaurants").find('option').not(':first').remove();
    $("#restaurants").val("");
    restaurantTable.search( searchField.val() );
    restaurantTable.draw();
    //the select option list is blank
    restaurantTable.column( "restaurant:name" ).data().sort().unique().each( function ( value ) {
        selectField.append( $('<option value="'+value+'">'+value+'</option>') );
    } );
}, true );

I also tried pulling directly from the json parameter and that is even weirder in that it actually populates the select field with the previous ajax json response, not the current one

restaurantTable.ajax.reload( function ( json ) {
    restaurantTable.draw();
    $("#restaurants").find('option').not(':first').remove();
    $("#restaurants").val("");
    var arr = [];
    $.each(json.results, function(index, value) {
        if ($.inArray(value.restaurant, arr) === -1) {
            arr.push(value.restaurant);
            $("#restaurants").append( $('<option value="'+value.restaurant+'">'+value.restaurant+'</option>') );
        }
    });
}, true );

I can't find anything on this, any help is appreciated!

kthorngren

I built a quick test case with your first option. Seems like it should work.
http://live.datatables.net/sadupuwe/1/edit

Note that I changed the column used for the select just to show a change. I also added ajax.dataSrc as a function just to output when it executes in comparison to the ajax.reload. Also added the draw event to output when it executes. Both the ajax.dataSrc and draw events occur before the ajax.reload event.

Note that $("#restaurants").find('option').not(':first').remove(); leaves the first option from the original table load.

You probably don't need or want the restaurantTable.draw(); in the callback function.

Have you tried console.log( value ); inside the loop to see what values are processed?

Kevin

bobh

I see the same behavior that @grozni describes in that the callback function to reload() seems to receive the previous json results.

Too reproduce the example, the ajax url must be sending different data for this to be apparent.

bobh

@grozni, might I suggest using the xhr.dt event. Although I could not find a solution to the issue above, I instead used the approach of processing JSON by listening to and acting on this event.

$('#restaurantTable').on( 'xhr.dt', function(e, settings, json, xhr){
   // act on data
});

Note that this event is called before DataTables has processed the new data from the server, so the returned data will not have been drawn on page when this event fires.
https://datatables.net/reference/event/xhr

I hope this helps

grozni

Thanks for responding.
I have used console logs and was able to confirm that the event fires before the XHR event concludes, and does not pull the latest JSON. I used XHR tracking where I could to get around it but it's still really inconvenient and complicating matters alot. I need to be able to do certain things after the data is loaded and drawn. Perhaps it's worthy of a bug report

colin

Hi @grozni and @bobh ,

Are you seeing this issue in the test case the Kevin linked to? If not, please could you modify it to demonstrate the issue. And in both cases, please could you provide steps on how to reproduce.

Cheers,

Colin

johnsonj

Following this thread. I have the same issue. I am using inline editing and have a requirement to reload the table every hour but maintain the inline edits after the reload. The edits are not saved to the database.

allan

To confirm, you need to reload the new data from the database, merging it with local edits? If so, you'd need to keep a list of the local edits (which you can do with postEdit) and then merge the local changes into the newly loaded Ajax JSON data.

What you do when you get a change in the original value from both the server and the client that conflict - well, that will be down to your business logic.

Allan