Can someone explain this error?

abickford

I am running into an error I don't understand. Below is the error message and trace:

datatables.min.js:71 Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'nTf')
    at Jb (datatables.min.js:71:305)
    at Aa (datatables.min.js:93:175)
    at f (datatables.min.js:142:112)
    at HTMLTableElement.<anonymous> (datatables.min.js:142:198)
    at Function.each (datatables.min.js:14:3003)
    at S.fn.init.each (datatables.min.js:14:1481)
    at S.fn.init.u [as dataTable] (datatables.min.js:132:187)
    at l.fn.DataTable (datatables.min.js:222:482)
    at DTtab (profile.js:818:11)
    at growth_tab (profile.js:428:1)
Jb @ datatables.min.js:71
Aa @ datatables.min.js:93
f @ datatables.min.js:142
(anonymous) @ datatables.min.js:142
each @ datatables.min.js:14
each @ datatables.min.js:14
u @ datatables.min.js:132
l.fn.DataTable @ datatables.min.js:222
DTtab @ profile.js:818
growth_tab @ profile.js:428
(anonymous) @ profile.js:5374
Promise.then (async)
genSel2display @ profile.js:5250
(anonymous) @ profile.js:3521
Promise.then (async)
genProfile @ profile.js:3496
changeContent @ profile.html:297

The "DTtab" is a general data table production function I wrote. This function works elsewhere in my program, and the code that produces the error outputs a data table. The issue I am having can be seen here:

    //selecting initial dropdown values
  $("#tabSelect1 option[value='1']").prop("selected", true);

   var dd1 = document.getElementById("tabSelect1");
   var btndown = document.getElementById("increment11");
   var btnup = document.getElementById("increment21");

DTtab("tabDiv1",tab_gr,tabVal,row_labels,ftrString,tblfoot,"popgrowth",fileName,tabtitle) 
  
  dd1.addEventListener('change', function() {
       if(dd1.value == "0") {
           DTtab("tabDiv1",tab_gr,tabVal,row_labels,ftrString,tblfoot,"popgrowth",fileName,tabtitle);
       } else {
           DTtab("tabDiv1",tab_pop,tabVal,row_labels,ftrString,tblfoot,"popgrowth",fileName,tabtitle);
       }
   });

   btndown.addEventListener('click', function() {
     tabVal = tabVal - 1;
     if(tabVal < 0) {
        tabVal = 5
     }
     if(dd1.value == "0") {
           DTtab("tabDiv1",tab_gr,tabVal,row_labels,ftrString,tblfoot,"popgrowth",fileName,tabtitle);
       } else {
           DTtab("tabDiv1",tab_pop,tabVal,row_labels,ftrString,tblfoot,"popgrowth",fileName,tabtitle);
      }
   });
  btnup.addEventListener('click', function() {
     tabVal = tabVal + 1;
     if(tabVal > 5) {
        tabVal = 0
     }
     if(dd1.value == "0") {
           DTtab("tabDiv1",tab_gr,tabVal,row_labels,ftrString,tblfoot,"popgrowth",fileName,tabtitle);
       } else {
           DTtab("tabDiv1",tab_pop,tabVal,row_labels,ftrString,tblfoot,"popgrowth",fileName,tabtitle);
      }
    });

The page objects (dd1, increment11, increment12) are in the DOM, and they are unique to the page. However, I get this error and cannot use the dom elements to change the table.

My first question is what is this "Cannot set properties of undefined (setting 'nTf')" referring to?
TIA
AB

kthorngren

My first question is what is this "Cannot set properties of undefined (setting 'nTf')" referring to?

I'm not sure but maybe Allan knows. For testing change the datatables.min.js you are loading to the non-minified version and you will get more details. However that might not be too useful.

The thing to do would be to place debugger breakpoints in profile.js at the lines noted in the traceback. Maybe start at genProfile @ profile.js:3496 and step through the code to find what is undefined. ITs hard to say from code snippets what might be undefined but with the debugger you should be able to find it. Then debug from there why there is something undefined causing the error. I suspect the problem is not something in Datatables. There are tutorials on the internet with techniques to debug undefined variables.

Kevin

allan

It is something to do with the table footer and it not relating to the structure of the host table. Can you show us the HTML for your table please?

Allan

abickford

Thanks for the solution. The colspan parameter in my table footer was picking up the wrong value.
All is well.
Cheers--
AB