javascript - SlickGrid requires a valid container, #myGrid does not exist in the DOM -

i've been trying use slickgrid dataview json no avail. keep getting above error. "javascript runtime error: slickgrid requires valid container, #mygrid not exist in dom."

<div id="mygrid" style="width:100%;height:500px;"></div> 

and script file load json:

    var dataview = new slick.data.dataview(); var grid = new slick.grid("#mygrid", dataview, columns, options);  //sample data var columns = [     { id: "codeid", name: "codeid", field: "codeid", width: 50 },     { id: "name", name: "name", field: "name", width: 200 },     width: 100 } ]; var options = {     enablecolumnreorder: false,     multicolumnsort: true }; // wire model events drive grid dataview.onrowcountchanged.subscribe(function (e, args) {     grid.updaterowcount();     grid.render(); });  dataview.onrowschanged.subscribe(function (e, args) {     grid.invalidaterows(args.rows);     grid.render(); });   $.getjson(my_url, function (data) {         dataview.beginupdate();         dataview.setitems(data);         dataview.endupdate();  }); 

---

if don't use dataview , iterate throught json data , pass grid works fine when use dataview error above though have div id="mygrid".

i appreciate help.

thanks

i assuming loading js @ top of page , before "mygrid" exists.

in case, try use $( document ).ready() so:

$( document ).ready(function() { var dataview = new slick.data.dataview(); var grid = new slick.grid("#mygrid", dataview, columns, options);  //sample data var columns = [     { id: "codeid", name: "codeid", field: "codeid", width: 50 },     { id: "name", name: "name", field: "name", width: 200 },     width: 100 } ]; var options = {     enablecolumnreorder: false,     multicolumnsort: true }; // wire model events drive grid dataview.onrowcountchanged.subscribe(function (e, args) {     grid.updaterowcount();     grid.render(); });  dataview.onrowschanged.subscribe(function (e, args) {     grid.invalidaterows(args.rows);     grid.render(); });   $.getjson(my_url, function (data) {         dataview.beginupdate();         dataview.setitems(data);         dataview.endupdate(); }); }); 

js executed within $( document).ready() callback won't initialized until entire document loads.