DataTable in tab in modal dialog gives "p.nTHead is null"

WernerCloete

Good morning

I'm creating a table, via JavaScript, in a tab in a modal dialog. I'm adding the <thead> and <tbody> sections and, when I view the generated source, everything appears to be in order, but I get the "p.nTHead is null" error when I try to convert the table to a DataTable.

Are there any other properties (e.g. parent, etc.) that I must manually set before I may convert the table?

allan

Can you link to a page showing the issue please? I'm not sure what would cause that error.

Allan

WernerCloete

Good day.

I am unable to send you a link as I'm still developing the system.

I have, since I posted my original message, upgraded my DataTables JavaScript and the error message has now changed to "TypeError: o.nTHead is null".

The table is generated inside a panel, activated with a paginator, in a modal dialog. The tab is not active when the dialog is displayed.

JavaScript:

        for (var i = 0; i < item_types.length; i++)
        {
          var type = JSON.parse(filecache.get("inventory", item_types[i]));

          html += "<h5 class=\"text-info\">" + type["name"] + " entries</h5> \
                   <table id=\"" + item_types[i] + "_items\" class=\"table table-striped table-hover table-condensed table-responsive item-table\"> \
                     <thead> \
                       <tr>";

          for (var j = 0; j < type["fields"].length; j++)
          {
            html += "<th>" + type["fields"][j]["display"] + "</th>";
          }

          html += "</tr> \
                 </thead> \
                 <tbody>";

          for (var j = 0; j < item["items"].length; j++)
          {
            if (item["items"][j]["template_id"] == item_types[i])
            {
              html += "<tr>";

              for (var k = 0; k < item["items"][j]["fields"].length; k++)
              {
                html += "<td>" + item["items"][j]["fields"][k]["value"] + "</td>";
              }

              html += "</tr>";
            }
          }

          html += "</tbody> \
                 </table>";
        }

Generated HTML:

<table id="5a7076370e93a555230714f5_items" class="table table-striped table-hover table-condensed table-responsive item-table">
  <thead>
    <tr>
      <th>Surname</th>
      <th>Names</th>
      <th>ID Number</th>
      <th>Address (home)</th>
      <th>Address (work)</th>
      <th>Phone (home)</th>
      <th>Phone (work)</th>
      <th>Phone (mobile)</th>
      <th>E-mail address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Test Surname</td>
      <td>Test Name</td>
      <td>1234567890</td>
      <td>Test Address 1</td>
      <td>Test Address 2</td>
      <td>1234567890</td>
      <td>1234567890</td>
      <td>1234567890</td>
      <td>user@domain.com</td>
    </tr>
  </tbody>
</table>

Is there anything else that you need?

WernerCloete

Oh, sorry, I forgot to add the JavaScript that I use to convert the table:

    $("form#item-editor table.item-table").each(function()
    {
      $(this).DataTable(
      {
        "order": [[ 0, "asc" ]]
      });
    });

kthorngren

Maybe you can put your code into a test case for debugging:
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

allan

There isn't anything obviously wrong with the HTML structure, so as Kevin says, I think we'd need a test case.

Allan

WernerCloete

Thank you for your assistance so far.

I tried using the code snippet, from https://debug.datatables.net/, and it generated results at https://debug.datatables.net/ocinof

I'm not sure if this will help as there are 2 tables on the page, when loaded, but the problem tables are in a dialog and the dialog code is generated when the user clicks on a row in one of the original tables.

I copied and pasted the code snippet into the debug window after I clicked on the row and the dialog was generated.

allan

Sorry no. We really would need to see the error.

Allan

WernerCloete

Pooper scooper...

I'll see what I can put together for you.

My problem, with the code preparation, is that data is pulled, on the fly, from the server and then the dialog is generated, containing the tables inside (tab) panels.

I'll see if I can extract the code in a way that will make sense and then post it here.

Hold thumbs!

WernerCloete

I tried copying and pasting the JavaScript code and generated HTML into this edit window, but I got a "Body is 19052 characters too long." error message...so I've now attached 2 files, containing the JavaScript and HTML.

When the user clicks on a row, in the main table on the page, the

showInventoryObject(object_id, item_id, from_cache)

method is called. The method calls

addInventoryObjectModal()

which generates the base dialog code and appends it to the page body. It then calls

createObjectEditor(object_id, item)

to generate the code for the dialog's body and appends the generated code.

This method also generates the pagination control and tabs, some of them containing tables (line 446). The table conversion happens at line 81 (datatables.code.txt).

The table code is located at lines 79 and 113 (datatables.html.txt).

I hope that this will help.

kthorngren

We are asking for you to use one of the tools list here:
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

To build a test showing the issue so it can be debugged. I tried copying your code into one of these tools but it didn't seem to run correctly.

Kevin

WernerCloete

Good morning, everyone

I tried using JSFiddle, but I could not get it to work (various iframe related warnings and other error messages).

I then tried saving the page, cleaning up the code (stripping out headers, footers, etc. that are not required) and running it again...and it worked after I replaced remote data calls with actual JSON data, as supplied by the back-end.

I'll keep digging to see if I can determine where the problem now lies.

WernerCloete

Good day, everyone

I found the problem, but it did not make sense at first.

On my page there were 2 tables. I used the first to open the dialog (when the error occurred) and the second was there to test multiple types of data coming through.

The second table, however, did not have any headers (the <thead> block was empty) and this resulted in a "TypeError: e[j] is undefined" error. I did not worry about this, too much, as I was focusing on the first table and displaying the entries.

The "TypeError: e[j] is undefined" error disappeared, when I removed the second table, and the tables, within the dialog, are now converting and showing properly.

Can you explain this knock-on effect, please?

allan

Without seeing the page - not really I'm afraid. All I can really say is that the second table had the error, and how that you've removed that table, the error is gone.

Allan