1

When using list.js and tabletop for a sortable table taken from a Gdoc, I get the error: "Uncaught TypeError: Cannot read property 'childNodes' of undefined" on the first line of list.js.

Because the website I work for can only have JS uploaded, I need to write all my html using js or jquery, so it's a bit wonky. I think the error is being thrown because of the order I have everything, but I have tried moving things around to no avail. Everything is working other than the sorting.

Thanks!

HTML file

    <!DOCTYPE html>
   <html>
   <head>
      <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="list.js-master/dist/list.min.js"></script>
      <script type="text/javascript" src="src/tabletop.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body>

<div id="tablesetter"></div>

 </body>

<script type="text/javascript">

var url = 'url to gdoc here';

$(document).ready( function(){
  Tabletop.init( {key: url, callback: showInfo, parseNumbers: true} )})

function showInfo(data, tabletop){

  $("#tablesetter").append('<h2>Table Working</h2><table><thead><th class="sort" data-sort="university">University</th><th class="sort" data-sort="no">Billionaires</th><th class="sort" data-sort="no2">Billionaires Rank</th><th class="sort" data-sort="rank">U.S. News Rank</th></thead><tbody class="list"></tbody></table>');


 $.each(tabletop.sheets("Sheet1").all(), function(i, cat){

    var htmltable = $('<tr><td class="university">' + cat.university + '</td>');
          htmltable.append('<td class="no">' + cat.numberofbillionaires + '</td>');
          htmltable.append('<td class="no2">' + cat.rankedbybillionaires + '</td>');
          htmltable.append('<td class="rank">' + cat.usnewsranking + '</td></tr>');
          htmltable.appendTo("tbody");
  })

}

</script>
  <script type="text/javascript" src="options.js"></script>


</html>

JS file

var options = {
  valueNames: [ 'university', 'no' , 'no2' , 'rank']
};

var userList = new List('tablesetter', options);
Roger
  • 61
  • 1
  • 10

2 Answers2

1

The problem

var userList = new List('tablesetter', options); should be executed when the dom has an element of the list class; since in the question's code the list class default to list" , so such element should be <tbody class="list"> that is going to be appended to the #tablesetter only when the showInfo function receive data from google.

The solution

We ensure that the var userList = new List('tablesetter', options) statement executes after ( ie: at the end ) of the showInfo function; in other words move var userList = new List('tablesetter', options); from options.js just before the closing right bracket of the showinfo function.

More details

in the question's code when list.js tries to init() the dom is: the dom and list.list is still undefined when list.js defines it's getItemSource() functions: undefined list.list

with the proposed fix, at the var userList = new List('tablesetter', options); the dom is like: the dom

and when defines it's getItemSource() functions the list.list can use the tbody as aspected: enter image description here

Franco Rondini
  • 10,841
  • 8
  • 51
  • 77
0

If you look at this post, I'm sure your just missing some of the minimum requirements for list.js to function properly. Try to dynamically add the input with id and class of "search" as well with your other classes. Let me know if this helps.

https://stackoverflow.com/a/23078200/4812515

Community
  • 1
  • 1
alphapilgrim
  • 3,761
  • 8
  • 29
  • 58