Google.load () jQuery - not working with DataTables.net

Question

I have web pages (here an example ) with the old Google Chart APIs (old static images) and I would like to move this to the new Google Visualization Graphics API.

I also use jQuery, jQuery UI, Google JS maps and DataTables.net (all hosted on CD and GoogleNews):

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

Therefore, I am trying to use google.loader (); instead of 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 will not work (here is a sample page ) - DataTables no longer wraps the table.

Error message in the Google Chrome console:

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

Does anyone have an idea what I'm doing wrong?

I asked on the DataTables.net forum ...

UPDATE:

I went from hosting the dataTables.net file locally on my server to Microsoft CDN, as it doesn’t change anything in my problem (I suppose the jQuery library loads google.load () after dataTables.net)

Answer 1

You have a script data load before Google downloads jQuery. Therefore, when the dataTables script is run, there is no jQuery object, and you get this error.

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

You will need to delay the use of the Tables data until jQuery has pulled out the script completely, so move your real code to getScript 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>