google.setOnLoadCallback with jQuery $(document).ready(), is it OK to mix?

Question

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.

Mineralogy

Do you mean that you are using the Google API loader which can be found in the file jsapi? – Petuntse

Answer 1

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.

Confabulation

You mean we should mention ready function inside the google callback function? – Trometer

@dilip I think (starting at the $) that's just an alternate syntax for $(document).ready(/* init my stuff */), so yes. – Karlene

This seems more complicated than necessary. Just use $(function(){//do stuff here}); instead of the google.setOnLoadCallback(). – Klaipeda

Answer 2

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

Phox

Answer 3

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

Wolf

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

Klaipeda

Or in naked JS: document.addEventListener("DOMContentLoaded", chartEnrolment); – Barefaced

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? – Afresh