在使用 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()虽然警报（'done loading slicks'）正确触发，并且Web开发人员控制台不再报告错误，并且脚本按我想要的顺序加载，但网格没有显示，并且$(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 );