javascript - TypeError: Cannot set property 'treeGrid' of null -


i using jqxtreegrid widget , running typeerror: cannot set property 'treegrid' of null error.

i've come across sources said div table being attached not being found console.log div , found.

any other suggestions might causing issue?

view <div id="treegrid"></div>   script var tablediv = $("#treegrid");     var tabledata = <%=raw @array_with_data.to_json%>;     var treesource, treedata;      treesource = {         datatype: "json",         datafields: [             { name: "id", type: "number" },             { name: "foo_id", type: "number" },             { name: "foo_name", type: "string" },             { name: "bar_id", type: "number" },             { name: "bar_name", type: "string" },             { name: "noob_name", type: "string" }         ],         hierarchy: {             keydatafield: { name: "id" },             parentdatafield: { name: "foo_id" }         },         id: "id",         localdata: tabledata     };      treedata = new $.jqx.dataadapter(treesource);     treedata.databind();      // build table tree table:     tablediv.jqxtreegrid({         width: "100%",         source: treedata,         sortable: true,         filterable: true,         pageable: true,         selectionmode: "singlerow",         columns: [             { text: "id", datafield: "id", hidden: true },             { text: "foo id", datafield: "foo_id", columngroup: "foo", width: "20%" },             { text: "foo name", datafield: "foo_name", columngroup: "foo", width: "20%" },             { text: "bar id", datafield: "bar_id", columngroup: "bar", width: "20%" },             { text: "bar name", datafield: "bar_name", columngroup: "bar", width: "20%" },             { text: "noob name", datafield: "noob_name", columngroup: "noob", width: "20%" }         ],         columngroups: [             { text: "foo", name: "foo" },             { text: "bar", name: "bar" },             { text: "noob", name: "noob" }         ]     }); 

i had same problem.

my problem was, included jqxdatatable.js after jqxtreegrid.js

wrong:

<script type="text/javascript" src="/js/jqwidgets/jqxtreegrid.js"></script>   <script type="text/javascript" src="/js/jqwidgets/jqxdatatable.js"></script>  

correct:

<script type="text/javascript" src="/js/jqwidgets/jqxdatatable.js"></script>   <script type="text/javascript" src="/js/jqwidgets/jqxtreegrid.js"></script> 

when put before other include, worked