56

I'm using Google Ajax API and they suggest I use google.setOnLoadCallback() to do various things related to their API but I'm using also jQuery's $(document).ready() to do other JS things, not related to Google API.

Is it safe to mix these two approaches in one document? I did not notice any problems yet but I suppose it's a matter of scale.

zgoda
  • 12,775
  • 4
  • 37
  • 46
  • Do you mean that you are using the [Google API loader](https://developers.google.com/loader/) which can be found in the file [jsapi](https://www.google.com/jsapi)? – surfmuggle Jun 23 '13 at 09:45

4 Answers4

69

You pretty much have to do this:

google.setOnLoadCallback(function() {
  $(function() {
    // init my stuff
  });
});

You can't do $(document).ready() without $ (the jQuery object) being available, so that needs to go inside the callback. And you can't be sure the document is ready inside the callback, so you have to do ready() too.

fragilewindows
  • 1,394
  • 1
  • 15
  • 26
cletus
  • 616,129
  • 168
  • 910
  • 942
  • 1
    You mean we should mention ready function inside the google callback function? – rdp Apr 26 '13 at 07:50
  • @dilip I think (starting at the $) that's just an alternate syntax for $(document).ready(/* init my stuff */), so yes. – ABCD.ca Apr 01 '14 at 04:25
  • 1
    This seems more complicated than necessary. Just use $(function(){//do stuff here}); instead of the google.setOnLoadCallback(). – Vincent Jun 03 '14 at 21:22
49

Sorry to be raising this from the dead, but 1) It still comes up as an 'answer' to this problem and 2) I've found a better solution.

There is an optional 3rd argument on the google.load function that takes an object of configuration options. One of the options is callback. It also gets rid of the need for a separate setOnLoadCallback call.

E.g. 

google.load('visualization', '1.0', {
    'packages': "charttype", 
    'callback': $jQ.proxy(me.setupChart, me)
});

So:

<script src="https://www.google.com/jsapi"></script>
<script>
$(document).ready(function () {
    function mapsLoaded() {
        etc etc etc
    }

    google.load("maps", "2", {"callback" : mapsLoaded});
});
</script>

See: https://developers.google.com/loader/#Dynamic

Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
Dawn
  • 941
  • 6
  • 11
6

If your JavaScript code resides in its own js file and not inside the HTML document you could also do this in the document:

<script>
        google.load("jquery", "1.7.0");
        google.load("jqueryui", "1.8.16");
        google.setOnLoadCallback(function() {
             var script = document.createElement("script");
             script.setAttribute("type", "text/javascript");
             script.setAttribute("src", "my.js");
             document.getElementsByTagName("html")[0].appendChild(script);
        });
</script>

This loads my.js after all other stuff is loaded from google. In your my.js file you can then do $(document).ready(...). So your application code is independent from "loaded by google" or "loaded directly from your server".

andy
  • 1,035
  • 1
  • 13
  • 35
4

Why mix when you can do it all with $(document).ready()? Just get rid of the google.setOnLoadCallback function and use jQuery's $(document).ready().

This:

google.setOnLoadCallback(chartEnrollment);

becomes

$(document).ready(chartEnrollment);
fragilewindows
  • 1,394
  • 1
  • 15
  • 26
Vincent
  • 1,741
  • 23
  • 35
  • Or in naked JS: `document.addEventListener("DOMContentLoaded", chartEnrolment);` – Daniel Sokolowski Oct 22 '14 at 04:31
  • 1
    So there is a guarantee that the criteria for when `chartEnrolment` would be called when set as a callback via `google.setOnLoadCallback` will always be met when it is set via `$(document).ready()`? Can you give a reference for this? – Brian Diggs May 23 '16 at 15:48