stateLoadCallback async doesn't work when multiple Datatables present
stateLoadCallback async doesn't work when multiple Datatables present
lpenadiaz
Posts: 6Questions: 2Answers: 0
Since DataTables 1.10.13 we don't need to use the async: false in the ajax call from within the stateLoadCallback function. But this doesn't seems to work when you have a page with multiple Datatables in it. The error "Uncaught TypeError: Cannot read property 'parentNode' of null" will be thrown unless the option async: false is set in the $.ajax call.
Example: http://live.datatables.net/culalumo
Debug code: emomew
Is there a workaround for this? Or do we need to keep using the "old way"?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Hi @lpenadiaz ,
You actually found a bug. The problem happens because the callback isn't being called if the Ajax call fails or hasn't been completed, so the state for the first table hasn't been loaded (or at least it didn't think it had). Returning an object would also allow it to pass - see your modified code here - this is a valid workaround.
I'll raise a bug, since that shouldn't cause the second table to fail to load.
Cheers,
Colin
Thanks @colin for your answer. I actually tried returning a blank object as well, but it seems to initialize the DataTable object twice. Everything (search input, pagination, limit drop down, etc) seems to be duplicated.
I tried using Chrome 66, Firefox 59 and IE 11. They all show the same problem.
I think that's because it's calling the callback and returning the empty object. I've simplified it down to the example here. You can see that it looks fine when the callback is commented out, but once in, then you see those elements doubled up. So, I suspect if you have some logic to ensure that they're not both called, then it should work as expected.
C
That's what I thought as well. First, the object is initialized with an empty object. Then, when the callback function is called, it tries to initialize it all over again with the real object (the one returning from the ajax call). So, it looks like right now there might not be a real workaround to have it working as it should with multiple Datatables in a page.
I'll keep using the async way for now. Maybe the bug gets fixed by the next version. Thanks @colin for your assistance.
I'll look into it and post back here when I've got it sorted.
Allan
Fixed here. It will be in the nightly version in a few minutes and included in 1.10.17.
Thanks for letting us know about this one!
Allan
I'm afraid it's only a partial fix going on here.
I have a page with three datatables initiated - they work perfectly if I disable the stateSave/Load-functions, but I get very strange behavior when I re-add them.
First of all, the POST for save state is called multiple times, at least 5-6 times per table.
Second, it doesn't seem to work with ColVis and ColReOrder, they are completely broken. Please see the attached JSBin for example:
http://live.datatables.net/xivifowu/1/
Thanks for the link. That was using 1.10.16 rather than the nightly with the fix in it. Also, if an extra parameter is added to the load URL to differentiate it from the state saving URL (Chrome doesn't appear to show me the http verb by default anymore) then its a little easier to see what is going on: http://live.datatables.net/xivifowu/2/edit .
Specifically that there is only one load for each table, but there are multiple saves happening. Normally that isn't an issue with calling state save multiple times since it is locally done, but that is more apparent with Ajax (each draw will trigger a state save). A debounce function is probably a good idea in your state save callback.
Allan