1

古いGoogleChartsAPI（古い静止画像）を使用したWebページ（ここでは例）があり、それを新しいGoogle VisualizationChartsAPIに移動したいと思います。

また、jQuery、jQuery UI、Google JSマップ、およびDataTables.net（すべてGoogleおよびMicrosoft CDNでホストされています）を使用しています。

<style type="text/css" title="currentStyle">
        @import "/demo_table_jui.css";
        @import "https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css";
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=ru"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(function() {
        // ...
        $("#comments").dataTable( {
                "bJQueryUI": true,
                "sPaginationType": "full_numbers", 
                "aaSorting": [[0, "desc"]]
        });
});

だから私はgoogle.loader（）;を使おうとしています。スクリプトタグの代わりに：

<style type="text/css" title="currentStyle">
        @import "/demo_table_jui.css";
        @import "https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css";
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
google.load("maps", "3", {other_params: "language=ru&sensor=false"});
google.setOnLoadCallback(function() {
        // ...
        $("#comments").dataTable( {
                "bJQueryUI": true,
                "sPaginationType": "full_numbers", 
                "aaSorting": [[0, "desc"]]
        });
});

残念ながら、これは機能しません（ここではサンプルページ） -DataTablesはテーブルを「ラップ」しなくなりました。

GoogleChromeコンソールのエラーメッセージは次のとおりです。

jquery.dataTables.min.js:151
Uncaught ReferenceError: jQuery is not defined

誰かが私が間違っていることを考えてください。

DataTables.netフォーラムでも質問しました...

アップデート：

サーバーでローカルにdataTables.netファイルをホストすることからMicrosoftのCDNに切り替えました。これは、問題に何も変わらないためです（つまり、jQueryライブラリはdataTables.netの後にgoogle.load（）によってロードされます） ）。

4

1 に答える 1

3

GoogleがjQueryをロードする前に、dataTablesスクリプトをロードしています。したがって、dataTablesスクリプトを実行すると、jQueryオブジェクトがなく、そのエラーが発生します。

jQueryの後にdataTablesをロードする必要があります。Googleがそのファイルをホストしていることは非常に疑わしいですが、最初の行のgoogleコールバックで、次を使用してdataTablesをロードできます。jQuery.getScript

jQueryがスクリプトを完全に取り込むまで、dataTablesの使用を遅らせる必要があるため、実際のコードをgetScriptの成功コールバックに移動します

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1");
    google.load("jqueryui", "1");
    google.load("maps", "3", {other_params: "language=ru&sensor=false"});
    google.setOnLoadCallback(function() {
        jQuery.getScript('https://ajax/.../jquery.dataTables.min.js', function(success) {
             if(success) {
                 $("#comments").dataTable( {
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers", 
                    "aaSorting": [[0, "desc"]]
                 });
             }
        });
    });
</script>
于 2012-03-31T19:11:30.210 に答える