Error: "Editor - Uncaught TypeError: Cannot read property 'contents'"

seltris

Reference: https://datatables.net/forums/discussion/31895/editor-uncaught-typeerror-cannot-read-property-contents-of-undefined

I'm referencing the forum thread above because I'm facing an issue that seems related to the solution proposed for the encountered error described in the subject.

My version: 1.5.6

The proposed solution suggests to replace "this" with "table.cell(this).index()". This seems to solve the reported error but instead, after the table has been re-drawn, the last edited row of the table disappear.

Here's the plnkr sample: plnkr.co/edit/t5HYWS7ZuLrcqnrkoI8L

How to reproduce the problem:
1. Click on the "Description" cell of the row number 1. Change the description and click outside (blur event) without pressing the return keyboard button.
2. Click on the "Count" cell of the row number 1. Change the count value and click outside in order to submit the value, as for the step 1, without pressing return.
3. Click on the "Save" anchor button, on the row number 1 (first cell). The row number 1 should disappear.

I hope the provided instructions will let you able to reproduce the issue I'm talking about.
Thanks in advance for your help.

B.R.
Giovanni

allan

Hi Giovanni,

Thanks for the link. I've followed the instructions above, but at step three the row doesn't disappear for me. I see another Ajax request that redraws the table, but the row stays in place.

he proposed solution suggests to replace "this" with "table.cell(this).index()".

This is probably because server-side processing is enabled in your example and a redraw will cause all elements in the tbody to be recreated - thus this would no longer refer to a table cell in the table after the redraw.

Allan

seltris

Hi allan,
the strange behaviour I noticed, is that if you blur the textbox remaining on the same row the problem actually occurr.

OS: Windows 10 (64 bit)
Browers on which I tested: Firefox 50.0, Chrome 54.0.2840.99, Edge 38.14393.0.0

Here a sample demonstration of what happens:
sendvid.com/zyjfx443

As you can see, at the end of the operations, the grid shows only 9 rows, and the one we just edited disappear.

Giovanni

allan

This appears to be the code that is running when you click the save button:

                // save
                app.data.save();
                
                // reload
                module.dt.ajax.reload();

So I guess the question is, why does ajax.reload() remove the row. Does it actually execute your custom ajax function? And if so, does it get the dummy data?

Allan

seltris

Yes it does (for both questions).
I previously checked this point adding a console.log call in the ajax function.

Attached the result of the console log. As you can see the "data" array is always filled with 10 items, and in the last one I can see the edited data.

I really can't undestand why in this situation the row has been removed.

Thanks for your help.

allan

I'm afraid I would really need a link to the page showing the issue so I can debug the problem. You can send me a PM with the link by clicking my name above and then the "Send message" button if you like.

I still haven't been able to reproduce the issue with the plunkr I'm afraid.

Allan