Cannot read property parentNode of null

yishayh

Hi,

Maybe we're doing something wrong, but when having multiple datatables in the page (some of them hidden in tabs) we get exceptions in the following lines of codes.

Original line of code:
if ( s.nTable == this || s.nTHead.parentNode == this || (s.nTFoot && s.nTFoot.parentNode == this) )

Code after we "fixed" it:
if ( s.nTable == this || (s.nTHead && s.nTHead.parentNode == this) || (s.nTFoot && s.nTFoot.parentNode == this) )

Original line of code:
aDataSort = aoColumns[ srcCol ].aDataSort;
Code after we "fixed" it:
if (aoColumns[ srcCol ] == null)
continue;
aDataSort = aoColumns[ srcCol ].aDataSort;

Some technical information:
1. We have an angular directive We wrote for datatable.
2. We are using datatable version 1.10.9
3. We use the following extensions and plugins (not where we get the exception, but they are included in the page sources):
buttons
select
colReorder
rowReorder
fixedColumns
fixedHeader
bootstrap
editor
editor.bootstrap
columns.filter
buttons.flash
buttons.html5
buttons.print
jzip
pdfmake
vfs_fonts

Are we doing something wrong?
Many thanks,
Yishay

yishayh

Maybe this can help focusing on the issue, after applying the above "fixes" to the code, all the datatable which are embedded in tabs suddenly have a default empty datatable in their dataTables_scrollFootInner part
The table is duplicate of the table in the body, but without the data (and only tfoot, although our datatable template looks like the one attached)

allan

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan

yishayh

Hi Allan,

this happens to us in a none public site, with very complex infrastructure and I'm not sure how to reproduce the problem with a clean example.
Is there an option to schedule a call (skype, gotomeeting, etc) so I can show the problem to someone?

Many thanks,
Yishay

allan

Yes, we could schedule a meeting under the support options.

edit Can you show me the HTML of your table?

Allan

yishayh

Hi Allan,

the template is very simple:

< table class="table table-bordered table-striped table-condensed flip-content edit-table" >
    < thead>
    < / thead>
    < tbody>
    < / tbody>
    < tfoot>
    < / tfoot>
</table>

The output example is too long, how can I send you a file with the HTML?

Thanks,
Yisha

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Could you use PasteBin or similar please.

Allan

yishayh

Sure,
http://pastebin.com/Gc48G0Yp
Yishay

allan

Thanks. That looks like the rendered code. Could you send me the HTML before it is "enhanced" by DataTables and also the Javascript initialisation you are using? I see the change you've mage and can't see any issue with it, but would like to understand why it is causing issues as it currently is (i.e. reproduce it myself so it can be added to tests).

Thanks,
Allan

yishayh

Hi Allan,

I'm not sure which part of the code we have will suffice.
Can We schedule a skype/gotomeeting and I will show you everything on my computer?

Thanks,
Yishay

yishayh

Hi Allan,

anyway you can help me focus what you need so I can send it to you to help with the issue?

Thanks,
Yishay

allan

The HTML before it is rendered as I requested above would be the first starting point. Also the Javascript initialisation.

Allan

yishayh

Hi Allan,

We don't have an HTML in the page, all the information comes from the server in AJAX and I included the template before:

<table class="table table-bordered table-striped table-condensed flip-content edit-table" >
    <thead>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    </tfoot>
</table>

Did you meant something else?

Thanks,
Yishay

allan

Okay - I hadn't understood that before, sorry. Can you show me the code and data you use to populate the table in that case?

yishayh

Hi Allan,

actually in the table I attached in http://pastebin.com/Gc48G0Yp the data was empty only headers.
We build the headers and the data from the messages in the client side in the ajax method. Will the JSON we receive help you?

Thanks,
Yishay

allan

Unfortunately the pastebin link has been removed so I can no longer see it.

Could you post it up again and also show me the JSON?

Allan

yishayh

Hi Allan,

I don't remember what was the original html, but here is a new one:
http://pastebin.com/JWVmbR82
And this is the JSON:
{"draw":4,"recordsTotal":0,"recordsFiltered":0,"data":[{"DT_RowId":"1","DT_RowClass":null,"rowId":"0.2930487782533674","NameMetaData":{"requiredForNew":true,"orderable":false,"folder":{"requiredForNew":false,"orderable":false,"dataType":"FolderWrapper","recordId":"a2f20000000UaKFAA0","projectId":"a0D2000000Y33OpEAJ","hasFiles":true},"dataType":"FieldWrapper","visible":true,"label":"Name","apiName":"Name","value":"A-2548","type":"String","referenceObjectApiName":null,"fieldNameData":"Name","autocomplete":true,"allowNew":null,"serverResponseRowIndexes":["1","Name"]},"Name":"A-2548"}]}

I think that maybe the problem is with the fact that we inject our own html element into to the dataTables_scrollHead and dataTables_scrollFoot.

Thanks,
Yishay

yishayh

Hi Allan,

If you didn't already done so, could you please download the example on your side (for the case passtebin decide to remove it again).

Thanks,
Yishay

allan

Thanks - yes. I've got it in a tab now.

I think that maybe the problem is with the fact that we inject our own html element into to the dataTables_scrollHead and dataTables_scrollFoot.

After the DataTables' initialisation? If so, that's the issue. There is no API option to allow a footer to be created after the table has been initialisated. It needs to be inserted before that point since DataTables will only attempt to detect the footer at that point. Likewise with the header.

Allan

yishayh

Hi Allan,

I understand, and I think you found the problem.
I will check it and get back to you.

Many thanks as always,
Yishay

yishayh

Hi Allan,

I removed the footer, and it did help fixing the newer problem with tab hidden datatables, but the first issue still happens (I still need the "fix" from the start of the post).
I want to send you an image of the corrupted datatable, maybe it will help you in assisting me.
To summarize it:
1. The problem is with datatables which are hidden in tabs.
2. There is an exception in a code that addresses header parentNode.
3. When preventing the exception the datatable are rendered, but It seems as if another datatable is rendered inside them.
4. Some of the tables are shown in tabs which appear when the page goes up and they are fine, but if you go to another tab and return (we refresh the datatables on shown.bs.tab.dtReCalc - I can attached the code if it helps).

Thanks again,
Yishay

allan

What is the exception and what is the code that is accessing the table at that point. Could you use imgur or similar to host the image? (I need to sort out something similar for the forum!)

Thanks,
Allan

yishayh

Sure, no problem:
http://imgur.com/share/a/XApNZ

allan

I'm afraid I just get an Imgur sign in page and if I do sign in - no image.

yishayh

Second try:
http://imgur.com/a/FLyJ8

allan

I don't see any exception error message in those images. I also don't see any code. Can you copy and paste the error message and the code you are using please.

Allan

yishayh

Hi Allan,

there is no error, because I prevent it (when there is an error you don't see it, and you don't see the datatables because of the exception),
What you can see in the second picture (the one with the issue) that there is an entire datatable injected inside the datatable from the first picture (which is the correct one).

Thanks,
Yishay

allan

Thanks for the clarification. I can indeed see the error in the second picture now you have pointed it out, but without any code I'm afraid I have no idea why that is happening. I would need the HTML for the table(s) and the Javascript code you are using to initialise the table to be able to offer any help. Without that, I'm afraid I have no way of knowing what is causing the issue.

Allan

yishayh

Hi Allan,

Did you had a chance to check this in the links I sent you?

Many thanks,
Yishay

allan

Sorry - I haven't had the chance to look into this one yet. I suspect it might take a couple of hours to figure it out properly, and haven't been able to set aside time for that yet.

Allan

yishayh

I appreciate it.
Have a nice day,
Yishay