Absolutely freaky weird AJAX behaviour

Dinu

Hello,

I am in the process of replacing legacy DataTables with the new state-of-the-art... art. However I've run into something I have never seen. Ever.

Setup: latest DT, jQuery 1.12.4, latest Chrome and Firefox

I set up a DT for ajax loading via

.DataTable({ajax:'http://foo.bar/baz?a=&b=',serverSide:true,...})

When I load the page, it does adjust the table CSS and whatnot, in a show of good faith. But it does nothing towards the XHR load. Not in the console, not in the network tab, nowhere. It just sits idle.

However, if I change the code to add .api.ajax.reload() just after DataTable creation, then it loads the json... twice.

The funny part starts here: Now if I remove the .api.ajax.reload() call that I added previously and refresh, IT KEEPS WORKING, with the same code that wasn't working before! At least until I close its tab, that is. Then it stops working and it needs to be re-primed again.

This weird behavior takes place in Chrome and Firefox.

I've checked and it leaves no cookies behind so it could explain the kind of "memory" I'm seing in working in subsequent refreshes after reload() is called.

I've spent some 4 hours already on this, please help, it's the Twilight Zone!

Dinu

Aaaaand, 5 minutes after asking, as it's known to happen, I have the answer:

I'm using stateLoadCallback to save parameters back and fro the url hash. Now, it seems (and the bug seems to reside in DT), if stateLoadCallback returns nothing, DT crashes. If it returns null, everything works like a charm. The strange behavior was due to a # getting appended to the url. If there was a #, the function returned null, and it worked. Without the #, the function didn't return anything and it crashed.

allan

if stateLoadCallback returns nothing, DT crashes. If it returns null, everything works like a charm.

It might seem a bit weird, but this is actually intentional! As of 1.10.13 if you don't return anything (which is the same as returning undefined) then DataTables expects you to execute the callback function given to the state load function. That can be used for Ajax loading state.

However, if you return a value (including null) then that is taken to be the state (ignored if it is null).

The stateLoadCallback reference documentation explains this a little more. It was really a bit of a hacky way to support both async and sync state loaders with the same function.

Allan