jquery - .holdReady（）呼び出しにもかかわらず、jQueryがdocument.ready（）に到達します。Slickgridエラー-Slickが定義されていません（範囲4から5）エラー-依存関係

Question

jQueryとslickGridを使用する次のスクリプトでは、次のようなエラーが発生し続けます。FireBugSlick is not defined (5 out of range 4)とSlick is not defined (6 out of range 4)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()アラート（「doneloading slicks」）が適切に発生し、Web開発者コンソールがエラーを報告せず、スクリプトが必要な順序で読み込まれている間、グリッドが表示$(document).ready()されず、イベントは次のように発生します。でも$.holdReady()そこにもいませんでした。この実装へのさらなる洞察が役立つでしょう。requireJSがまさにこれ（依存関係）のために構築されていることは知っていますが、このコンテキストでそれを適切に利用する方法を実際に理解することはできません。

更新-を除いてすべてが現在機能しています$.holdReady()

を除いて、すべてが機能してい.holdReady()ます。ネストの中央でグリッドをインスタンス化することで、その重要なポイントを作成しました。これにより、すべてのスクリプトが正常に完了した場合にのみ実行されます。うまく機能し、requireJSよりも軽量です。getScript()キャッシュせず、常にサーバーからファイルをリロードします。これらの呼び出しを$.ajax()呼び出しと再結合し、キャッシュを有効にして、頻繁に変更しないファイルのパフォーマンスを大幅に向上させることができます。

一部の人々がslickGridを機能させるのに問題がある場合に備えて、最終的なネストされたスクリプトを投稿しています（このような素晴らしい製品のドキュメントはSUCKSです！）。

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

score 2 · Accepted Answer

$.getScriptドキュメントが「準備完了」になる前に解決および実行されることが保証されていないajaxhttpリクエストを実行します。したがって、これらの5つのコマンドが完了$(document).ready(function(){...});する前に、コードが実行されている可能性が非常に高くなります（可能性があります）。$.getScript

私は使ったことがありません$.getScript。代わりに、サイトの読み込みを高速化するには、すべてのJavaScriptをフッターに移動するだけです。そうすれば、JavaScriptをフェッチする前にページが読み込まれます。$.getScriptこれは、JavaScriptをロードする前にページがレンダリングされるという点で、を使用するのと同じ効果がありますが、非同期では実行されません。

$.getScript私は、ページの読み込みを速くするのではなく、ユーザーアクションなどの後にajaxを介してスクリプトをフェッチしたい場合のためだと思います（これはあなたがそれを使用していると仮定しています）。

jquery - .holdReady（）呼び出しにもかかわらず、jQueryがdocument.ready（）に到達します。Slickgridエラー-Slickが定義されていません（範囲4から5）エラー-依存関係

1 に答える 1

Related

Reference