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

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

WernerCloeteWernerCloete Posts: 16Questions: 2Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 46,577Questions: 1Answers: 6,502 Site admin

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

    Allan

  • WernerCloeteWernerCloete Posts: 16Questions: 2Answers: 0
    edited February 12

    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?

  • WernerCloeteWernerCloete Posts: 16Questions: 2Answers: 0

    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" ]]
          });
        });
    
  • kthorngrenkthorngren Posts: 2,806Questions: 19Answers: 623

    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

  • allanallan Posts: 46,577Questions: 1Answers: 6,502 Site admin

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

    Allan

  • WernerCloeteWernerCloete Posts: 16Questions: 2Answers: 0
    edited February 12

    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.

  • allanallan Posts: 46,577Questions: 1Answers: 6,502 Site admin

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

    Allan

  • WernerCloeteWernerCloete Posts: 16Questions: 2Answers: 0

    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!

  • WernerCloeteWernerCloete Posts: 16Questions: 2Answers: 0

    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.

  • kthorngrenkthorngren Posts: 2,806Questions: 19Answers: 623

    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

  • WernerCloeteWernerCloete Posts: 16Questions: 2Answers: 0

    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.

  • WernerCloeteWernerCloete Posts: 16Questions: 2Answers: 0

    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?

  • allanallan Posts: 46,577Questions: 1Answers: 6,502 Site admin
    Answer ✓

    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

Sign In or Register to comment.