Google.load() of jQuery - doesn't work with DataTables.net

Question

I have web pages (here an example) with the old Google charts API (the old static images) and I'd like to move it to the new Google visualisation charts API.

I also use jQuery, jQuery UI, Google JS maps and DataTables.net (all hosted at the Google and Microsoft CDNs):

<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"]]
        });
});

So I am trying to use google.loader(); instead of the script-tags:

<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"]]
        });
});

Unfortunately this doesn't work (here an example page) - the DataTables doesn't "wrap" the table anymore.

The error message in the Google Chrome console is:

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

Does anybody please have an idea, what I'm doing wrong?

I've asked at the DataTables.net forum too...

UPDATE:

I've switched from hosting dataTables.net file locally at my server to Microsoft's CDN, as it doesn't change anything in my problem (which is I guess: the jQuery library being loaded by google.load() after the dataTables.net)

Answer 1

You have the dataTables script loading before Google loads jQuery. So when the dataTables script runs, there is no jQuery object and you get that error.

You will need to load dataTables after jQuery. I highly doubt Google hosts that file, but in the google callback at the first line you can then load dataTables using jQuery.getScript

You will need to delay your use of dataTables until jQuery has fully pulled the script in, so move your real code into getScript's success callback

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