jQuery достигает document.ready(), несмотря на вызов .holdReady(). Ошибка Slickgrid - ошибка Slick не определена (5 вне диапазона 4) - зависимости

В следующем скрипте, использующем jQuery и slickGrid, я продолжаю получать сообщение об ошибке Slick is not defined (5 out of range 4) или Slick is not defined (6 out of range 4) - как в FireBug, так и в Chrome я получаю:

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

Однако, если я закомментирую var grid = new Slick.Grid("#myGrid", data, columns, options);, скрипт будет работать нормально. Я подтвердил, что все сценарии загружаются, вплоть до срабатывания оповещений в каждом из них. Также в Firebug/Chrome я читаю загруженные скрипты, и они кажутся правильными. Есть ли что-то, что я мог упустить из виду? Код страницы выглядит следующим образом:

<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

Обновлена ​​последовательность загрузки скрипта

$.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 );

Я пытаюсь загрузить серию файлов .js, которые зависят от предшествующего ему скрипта, успешно завершившего загрузку. Таким образом, я использую .getScript() (я открыт для ЛЮБЫХ других идей, потому что это становится трудным для устранения неполадок) для загрузки сценария, в случае успеха он загружает следующий или выводит ошибку на экран, и это повторяется до последнего сценария, который затем должен отображать сетку и разрешать запуск события $(document).ready(). Проблема в том, что ни то, ни другое не происходит. Похоже, что $.holdReady() ничего не делает, и хотя предупреждение («загрузка сликов завершена») срабатывает правильно, а консоль веб-разработчика больше не сообщает об ошибках, а скрипты загружаются в нужной мне последовательности, сетка не отображается, и событие $(document).ready() горит так, как будто $.holdReady() вообще не было. Любое дальнейшее понимание этой реализации поможет. Я знаю, что requireJS создан именно для этого (зависимостей), но я действительно не могу понять, как правильно использовать его в этом контексте.

ОБНОВЛЕНИЕ. Теперь все работает, кроме $.holdReady()

Все работает, кроме .holdReady(). Я сделал это спорным, создав экземпляр сетки в центре гнезда, поэтому он запускается только после успешного завершения всех сценариев. Работает хорошо и легче, чем requireJS. Хотя .getScript() не будет кэшировать и ВСЕГДА будет перезагружать файл с сервера. Можно заменить эти вызовы вызовами $.ajax() и включить кэширование для довольно значительного повышения производительности файлов, которые вы не часто меняете.

Я публикую окончательный вложенный скрипт на случай, если у кого-то возникнут проблемы с запуском slickGrid (документация ОТСТОЙКА для такого замечательного продукта!).

<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 );