AJAX data source throwing TypeError: b[a] is undefined
AJAX data source throwing TypeError: b[a] is undefined
(debug code ucolef )
I'm trying to get my tables working with an AJAX source (client-side processing). The table definition looks like this:
var bbTable = $('#bb_datatable').DataTable({
"sDom": "<'row bottom-buffer10' <'.col-sm-4'><'.col-sm-4'> <'.col-sm-4 pull-right' f>>t<'row'<'.col-sm-8'i r><'pull-right'>S>",
"columns" : [
{
'data': 'field_id_59',
'bVisible' : true
},
{
'data': 'field_id_60',
'bVisible' : true
}
],
"scrollY": "600px",
"scrollCollapse": true,
"paginate": false,
"order" : [],
"select": "single",
"buttons": [],
"ajax": {
"url": bb.ajaxPath,
"data": function ( d ) {
return $.extend( {}, d, {
"action": "fill-datatable",
"query_id": 28,
"col_prop_name_array": ['field_id_59', 'field_id_60']
} );
}
}
}
);
The AJAX call returns something that looks identical to the analogous examples on this site:
{
"data": [{
"field_id_59": "1",
"field_id_60": "BigBench Adminx"
}, {
"field_id_59": "2",
"field_id_60": "BigBench Mouse "
}]
}
...and datatables then throws the above error.
If, instead of "ajax: ", I specify the following, no error is generated:
"data": [{"field_id_59":"1","field_id_60":"Big Bench Adminx"},{"field_id_59":"2","field_id_60":"Big Bench Mouse"}],
Comparison of this problem to some previous posts in this forum suggests that Datatables doesn't like the JSON that is being returned. I know that I used to specify iTotalRecords and iTotalDisplayRecords in the JSON object that was returned but this seems to have been deprecated in 1.9x for client side processing?
Thanks in advance,
Rob
Answers
Are you able to run the non-minified version of DataTables and let me know where the error and line number is there? The debugger shows that the data has been correctly populated into the table - so I'm not sure why that error would occur.
Even better would be a link to a page showing the issue.
Allan
Thanks for the PM with the link.
So this is a fairly nasty little issue which is related to the async behaviour when Ajax loading data.
In your DataTable configuration you construct a Buttons instance (through the use of the
buttons
option) - however, that isn't actually constructed until the data is loaded!Also, immediately after the table is initialised, and before the data has loaded, another instance of Buttons is created.
So actually, rather than having two instances at the point when you call
bbTable.buttons(1, null)
(which would select the buttons in the second instance) there is only one. Hence the error.There is currently really only one option to fix this - move your button modification code into
initComplete
- i.e. modify the configuration only once the data has been loaded.I suppose another option is to not use
buttons
and instead create the Buttons instances outside of the DataTables initialisation, as you are with the second set at the moment.I'll have a think about how I can try to improve this - its a tricky one!
Allan
Thanks very much for pinpointing the problem, Allan. As to your last suggestion, if I omit the Buttons initialisation option and just create both Buttons instances outside the DataTables initialisation I get the same error--perhaps this is because the ajax data has not loaded by this point?
In any case, I wrote the code that way to make it a bit cleaner and component-like (a given page can have Edit buttons, Print buttons, either, or none). But I can also just insert the required Buttons definitions directly into the Datatables init definition, so I think I'll go that route for now.
Many thanks,
Rob
Interesting - I'll investigate why that didn't work, but good to hear you have a plan for now.
Allan