Why error '_DT_CellIndex' error on reload of exactly same table?

glowfish

Debugger code (debug.datatables.net):

https://debug.datatables.net/owopek

Error messages shown:

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
at _fnCreateTr (eval at t.exports (addScript.js:20), <anonymous>:3105:23)
at _fnAddData (eval at t.exports (addScript.js:20), <anonymous>:2423:4)
at HTMLTableRowElement.eval (eval at t.exports (addScript.js:20), <anonymous>:2451:11)
at jquery.js:208
at Function.map (jquery.js:463)
at S.fn.init.map (jquery.js:207)
at _fnAddTr (eval at t.exports (addScript.js:20), <anonymous>:2449:14)
at loadedInit (eval at t.exports (addScript.js:20), <anonymous>:1281:6)
at HTMLTableElement.eval (eval at t.exports (addScript.js:20), <anonymous>:1306:5)
at Function.each (jquery.js:381)

Description of problem:

The (data) table is configured and loaded just once. Everything works fine.

However, I experience an issue in different test cases with server-side processing when two ajax calls are returned to one table (due to a reload): Steps:
1) A page with the table is loaded (ajax call did not yet return, i.e. processing label is shown)
2) Immediately some other page is loaded in browser
3) And again immediately the page with the table is loaded.
Due to the ajax calls taking lets say 10 seconds, both ajax calls return not before the table page is loaded for the second time (i.e. after step 3). Now, after some seconds, the first ajax call returns (without any errors) and after another short period the second ajax call also returns - leading to the error.

It seems to me that the table somehow handles the first, outdated returning ajax call leading to a status where the returning second, current ajax call is creating problems.

Both, the ajax success callback function and the initComplete callback function are executed when the first ajax call returns. Thats how I found out that the table is obviously somehow handling the first, outdated ajax call and not just ignoring it (which would be the desired behaviour). Interestingly, the first ajax call does not lead to any rows added to the table. The second ajax call indeed adds rows to the data table but then throws the error and stucks with the processing label. The error is thrown in a line of code within the initComplete callback where the DataTable() function is called on the table html element.

The two tables are exactly the same tables. Same data, same columns.

As mentioned, desired behaviour would be the first ajax call to be ignored and the second ajax call to be processed properly.

kthorngren

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

This is usually caused by having colspan or rowspan within the tbody of the table. It can also be caused by using a Datatable option that accesses a missing column.

Only the developers can look at your debug image so I'm not sure what your code looks like. Sounds like you might be introducing a race condition by having two outstanding Ajax requests.

I'm not clear on your problem description. Step 3 says the page with the tale is loaded. Are you saying that the whole page is refreshed or you are using ajax.reload()?

Both, the ajax success callback function and the initComplete callback function are executed when the first ajax call returns.

The ajax docs state this about using the success function:

success - Must not be overridden as it is used internally in DataTables. To manipulate / transform the data returned by the server use ajax.dataSrc (above), or use ajax as a function (below).

The error is thrown in a line of code within the initComplete callback where the DataTable() function is called on the table html element.

What is in the initComplete function that is failing?

Kevin

glowfish

Hi Kevin and thx for the taking care of the issue!
I was able to solve the problem. It was originated in data table HTML elements with same IDs obviously resulting in confusion on which API call return to handle.
Thx again,
Konstantin