Question

In the following script utilizing jQuery and slickGrid, I keep getting an error saying Slick is not defined (5 out of range 4) or Slick is not defined (6 out of range 4) – Both in FireBug, and in Chrome I get:

Uncaught ReferenceError: Slick is not defined
$.ready.$.css.opacity
f.Callbacks.o jquery-1.7.2.min.js.php:2
f.Callbacks.p.add jquery-1.7.2.min.js.php:2
e.fn.e.ready jquery-1.7.2.min.js.php:2
(anonymous function)
e.extend.globalEval jquery-1.7.2.min.js.php:2
e.extend.globalEval jquery-1.7.2.min.js.php:2
f.fn.extend.domManip jquery-1.7.2.min.js.php:4
e.extend.each jquery-1.7.2.min.js.php:2
f.fn.extend.domManip jquery-1.7.2.min.js.php:4
f.fn.extend.append jquery-1.7.2.min.js.php:3
f.fn.extend.html jquery-1.7.2.min.js.php:4
e.extend.access jquery-1.7.2.min.js.php:2
f.fn.extend.html jquery-1.7.2.min.js.php:4
$.ajax.success AJAX.js:26
f.Callbacks.o jquery-1.7.2.min.js.php:2
f.Callbacks.p.fireWith jquery-1.7.2.min.js.php:2
w jquery-1.7.2.min.js.php:4
f.support.ajax.f.ajaxTransport.send.d jquery-1.7.2.min.js.php:4
FBL.ns.handleStateChange

However, if I comment out var grid = new Slick.Grid("#myGrid", data, columns, options);, the script runs fine. I have confirmed all the scripts are loading, going so far as to fire alerts in each one. Also in Firebug/Chrome, I read the loaded scripts, and they appear correct. Is there anything I could be overlooking? The page code is as follows:

<link type="text/css" rel="stylesheet" href="css/slick.grid.css" />
<link type="text/css" rel="stylesheet" href="css/surge.slickGrid.css" /> 
<link type="text/css" rel="stylesheet" href="css/jquery.calendarPicker.css" />  
<link type="text/css" rel="stylesheet" href="css/cupertino/jquery-ui-1.8.20.custom.css" />

    <div style="position:relative; overflow:visible; margin:25px 0 0 0;">
        <div id="loader" style="position:absolute; z-index:997;top: 62px; left:200px;"><img src="images/loading.gif" border="0" /></div>

        <div id="dateInput" style="visibility:hidden;"><p><label for="datepicker">Date: </label><input type="text" id="datepicker" size="30"/></p>

    </div>
        <div id="myGrid" style="width:900px;height:200px;visibility:hidden;"></div> 
    </div>

      <div class="options-panel">
        <h2>Instructions:</h2>
        <ul>
          <li>Select the date by clicking the date image above the table</li>
          <li>Enter your event data (you can enter multiple events for that date)</li>
          <li>To add another event, hit your <em>TAB</em> key and a new row will be created</li>
          <li>When you're all done for this date, click the <em>Commit Changes</em> button to have your events saved to the site</li>
        </ul>

        <h2>Options:</h2>

<button>Commit Changes</button>
      </div>



<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js.php"></script>
<script>
$.getScript("js/slickGrid/slick.grid.js");
    $.getScript("js/slickGrid/surge.core.js");
        $.getScript("js/slickGrid/surge.slickGrid.js"); 
            $.getScript("js/jquery.calendarPicker.js"); 
                $.getScript("js/jquery.json-2.3.min.js");   


</script>

<? //Instantiate   slickGrid jQueryUI widget ?>
<script>
$(document).ready(function(){
    alert('Ready');
    //======== if I comment the following line out, the script completes without error =======
    var grid = new Slick.Grid("#myGrid", data, columns, options);


    $(function() {
        $( "#datepicker" ).datepicker();

            $( "#datepicker" ).datepicker( "option", "showAnim", "clip" );
    });
});

$(document).ready(function() {
    //Hide loading image div and show loaded jQuery modules
   $('#loader').hide();
   $('#dateInput').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},"slow");
   $('#myGrid').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},"slow");

});
</script>   
    <hr />EOP

Updated Script load sequence

$.holdReady(true);
$.getScript("js/slickGrid/jquery.event.drag-2.0.min.js",function(){
    $.getScript("js/slickGrid/slick.core.js",function(){
        $.getScript("js/slickGrid/slick.grid.js",function(){
            $.getScript("js/slickGrid/surge.core.js",function(){
                $.getScript("js/slickGrid/surge.slickGrid.js",function(){
                    $.holdReady(false);
                    alert('Done Loading slicks'); 
                        var grid = new Slick.Grid("#myGrid", data, columns, options);
                        alert('After Grid created');
                        $('#myGrid').slickGrid({
                            forceFitColumns: true,
                            columns: [
                                { id: "venue", name: "Venue", field: "f_venue"},
                                { id: "eventName", name: "Event Name", field: "f_eventName" },
                                { id: "time", name: "Time", field: "f_time" },
                                { id: "pricing", name: "Pricing", field: "f_price" },
                                { id: "visible", name: "Visible", field: "f_visible", width: 20 }
                            ],
                            data: [
                              { f_venue: "Finn's", f_eventName: "Roy Rogers", f_time: "9pm", f_price: "$10 before 10", f_visible: 1 },
                            ]
                        });
                        alert('after data population');

                        var json = $.toJSON( $('#myGrid').slickGrid('data'));

                    }).fail(function(jqxhr, settings, exception) {  document.write('FAILED: '+exception); });
            }).fail(function(jqxhr, settings, exception) {  document.write('FAILED: '+exception); });
        }).fail(function(jqxhr, settings, exception) {  document.write('FAILED: '+exception); });
    }).fail(function(jqxhr, settings, exception) {  document.write('FAILED: '+exception) });//console.log( textstatus );
}).fail(function(jqxhr, settings, exception) {  document.write('FAILED: '+exception) });//console.log( textstatus );

I am trying to load a series of .js files that are dependent on the script preceding it having successfully finished loading. Thus, I’m using .getScript() (I am open to ANY other ideas, cause this is getting difficult to troubleshoot) to load the script, on success it loads the next or echos error to the screen, and this repeats until the last script, which should then display the grid and allow the $(document).ready() event to fire. Problem is, neither of these things happen. The $.holdReady() appears to do nothing, and while the alert(‘done loading slicks’) fires properly, and web developer console reports no more errors, and scripts loading in the sequence I want, the grid isn’t displaying, and the $(document).ready() event fires as though the $.holdReady() wasn’t even there. Any further insight into this implementation would help. I know requireJS is built for exactly this (dependencies), but I really cannot figure out how to utilize it properly in this context.

UPDATE – All Working Now Except $.holdReady()

All working now except the .holdReady(). I’ve made that a moot point by instantiating the grid at the center of the nest, so it only runs when all scripts have completed successfully. Works good, and lighter weight than requireJS.. Although.getScript() will not cache and will ALWAYS reload the file from the server. Could relace those calls with $.ajax() calls and enable caching for a pretty big performance increase on files you don’t change often.

I’m posting the final nested script in case some people are having trouble getting slickGrid working for them (the documentation SUCKS for such a great product!).

<script>$.holdReady(true);</script>  
<script  type="text/javascript" language="javascript" src="js/slickGrid/lib/firebugx.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js.php"></script>
<script src="js/slickGrid/plugins/slick.cellrangedecorator.js"></script>
<script src="js/slickGrid/plugins/slick.cellrangeselector.js"></script>
<script src="js/slickGrid/plugins/slick.cellselectionmodel.js"></script>
<script src="js/slickGrid/slick.formatters.js"></script>
<script src="js/slickGrid/slick.editors.js"></script>

<script>

    $.getScript("js/slickGrid/jquery.event.drag-2.0.min.js",function(){
        $.getScript("js/slickGrid/slick.core.js",function(){
            $.getScript("js/slickGrid/slick.grid.js",function(){

                        $.holdReady(false);
                        var grid;

                        var columns = [
                        { id: "VisitDate", name: "VisitDate", field: "VisitDate", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
                        { id: "VisitTime", name: "VisitTime", field: "VisitTime", width: 100, editor: Slick.Editors.Text },
                        { id: "PrimaryComplaint", name: "PrimaryComplaint", field: "PrimaryComplaint", width: 100, cssClass: "cell-right", editor: Slick.Editors.Text },
                        ];

                        var data = [
                            {
                            "VisitDate": "11/30/2009",
                            "VisitTime": "0117",
                            "PrimaryComplaint": "General malaise "
                            },
                            {
                            "VisitDate": "02/08/2010",
                            "VisitTime": "0930",
                            "PrimaryComplaint": "General malaise "
                            }
                        ];

                        var options = {
                        editable: true,
                        enableAddRow: true,
                        enableCellNavigation: true,
                        asyncEditorLoading: false,
                        forceFitColumns: true
                        };

                        // grid = new Slick.Grid($("#acs-work"), returnObj.source, columns, options);
                        //var $tabs = $('#tabset').tabs();
                        //var selected = $tabs.tabs('option', 'selected') + 1; // => 0[edit]
                        //var panelstr = "#panel" + selected;
                        //to load dynamic data
                        // PROTO: grid = new Slick.Grid($(panelstr), returnObj.source, columns, options); 
                        grid = new Slick.Grid("#myGrid", data, columns, options); 



                            $('#loader').hide();
                           $('#dateInput').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},"slow");
                           $('#myGrid').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},"slow");

            }).fail(function(jqxhr, settings, exception) {  document.write('FAILED: '+exception); });
        }).fail(function(jqxhr, settings, exception) {  document.write('FAILED: '+exception) });//console.log( textstatus );
    }).fail(function(jqxhr, settings, exception) {  document.write('FAILED: '+exception) });//console.log( textstatus );

Answer 1

$.getScript runs an ajax http request which is not guaranteed to resolve and run before the document is “ready”. Therefore it is entirely likely (probable) that your $(document).ready(function(){...}); code is getting run before those 5 $.getScript commands are completed.

I’ve never used $.getScript. Instead to make the site load faster just move all your javascript to the footer. That way the page will load before it fetches the javascript. This will have the same effect as using $.getScript in that the page will render before it loads the javascript, but its not doing it asynchronously.

$.getScript I would assume, is for when you want to fetch a script via ajax after a user action or something similar, rather than to make the page load faster (which is what I’m assuming you’re using it for).