jquery document ready with Google

Question

This is how I load jQuery:

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
function OnLoad() {
   insert jQuery goodness here
};
google.load("jquery", "1");
google.setOnLoadCallback(OnLoad);
</script>

But instead of function OnLoad() {, I'd like to use

$(document).ready(function() {}

so that it's like every example in every book and documentation snippet.

How can I define: $ = jQuery?

score 7 · Answer 1 · answered Mar 29 '10 at 20:16

7

Why not just abolish the google loady bit and do this, like us eccentric cool kids:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    alert("look ma I'm normal");
});
</script>

answered Mar 29 '10 at 20:16

karim79

339,989
67
413
406

Thanks karim. Why doesn't the Google documentation refer to the way all the cool kids do it? http://code.google.com/apis/ajaxlibs/documentation/#jquery – Phillip Senn Mar 29 '10 at 20:24
5

I don't know. What has always bothered me is that they do not really elaborate on the line "The google.load() approach offers the most functionality and performance." So I'm just expected to take for granted that using `google.load` will be *better*, and not find it's way into my refrigerator and modify the DNA structure of all my food. – karim79 Mar 29 '10 at 20:38

score 2 · Accepted Answer · answered Mar 29 '10 at 20:21

2

You should not have to do anyhting special. This is what we use and it just works:

<script src="http://www.google.com/jsapi?key=snip" type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1");
    google.load("jqueryui", "1");
</script>
<script type="text/javascript">
    $(document).ready(function() {
      //goodness
    });
</script>

Note that the jQuery script block comes after google.load()

answered Mar 29 '10 at 20:21

Bradley Mountford

8,195
4
41
41

That's interesting. What is ?key=(I assume you snipped your unique key). I didn't know Google had a key for jQuery. – Phillip Senn Mar 30 '10 at 00:05
1

They don't, but we load other things that do require a jsapi key. – Bradley Mountford Mar 30 '10 at 15:04

score 1 · Answer 3 · answered Mar 29 '10 at 20:14

Did you try doing jQuery goodness after you've loaded it?

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>
<script type="text/javascript">
    $(function(){ alert("!"); }); // same as $(document).ready(function(){});
</script>

You seem to be forced to use one of the jQuery versions listed here.

score 1 · Answer 4 · edited May 23 '17 at 12:19

1

Since all good answers here, but no one checked!? %-), i just post a jquery + google apis exercise!

you may find sometimes usefull! ;-)

Google Map - Current location

UPDATE:

ok, just for make things clear,

nothing special with setOnLoadCallback ; it's just a google way of doing:

inline body + js

<body onload="callback()">

OR clasic js

window.onload = callback;

OR

window.onload = function(){ callback(); };

OR jquery onload

$(window).bind("load", function(){});

OR

$(window).load( function() { /*do something onload */});

OR jquery DOM ready

$(document).ready(function(){ /*do something on dom ready */ });

OR

$(function() { /*do something on dom ready */});

All theese work the same of Google Load OR better Google Load load the same fo All theese! ;-)

NOTE: as Matthew Flaschen say, the Load method is not the same of Ready in the sense of, the first can be used for access elements after entire page is loaded (images and other objects that you have attached into the page), the second can be used for access elements after the DOM is ready! hope now is all clear! doh!

so the two method are not the same but in some circumstances you can use it for make similar things!

edited May 23 '17 at 12:19

Community

1
1

answered Mar 30 '10 at 00:43

Luca Filosofi

30,905
9
70
77

I don't understand your comment. You are thinking too far above me I guess. I'm just trying to get the syntax working like every example I've read in every book and every website. – Phillip Senn Mar 30 '10 at 02:49
no problem my friend! ;-) it's not a bad think about you! it's just a meditation about, why i'm to include a **google load**, if i can simply use the classic, never die, script linking way! about your **trying to get the syntax** pls, read the update! ;-) – Luca Filosofi Mar 30 '10 at 10:19
1

This is wrong. `ready` is not the same as onload. See http://api.jquery.com/ready/ . – Matthew Flaschen Mar 30 '10 at 10:53
The window `load` event fires when the page is fully loaded (including images), not when the window is opened. – Matthew Flaschen Mar 30 '10 at 12:22
thank's again Matthew, my bad! this was driving me crazy! ;-) – Luca Filosofi Mar 30 '10 at 12:31
Sorry, but it's still incorrect. Read over http://api.jquery.com/load/ and http://api.jquery.com/ready/. `load` fires after *everything* is fully loaded, while `ready` fires earlier, when just the DOM is available. – Matthew Flaschen Mar 30 '10 at 12:50
hey Matthew, i could not imagine this talk so long and interesting for me! ;-) but what is surprising is that until now I did not understand the difference between DOM itself and the whole page content and so the difference from onload as event handler! – Luca Filosofi Mar 30 '10 at 14:06
Luca, Thank you so much for your lengthy responses! You are helping me understand different syntaxes using JavaScript and jQuery. I'm going to accept Bradley's answer because his directly answered the problem I was having, but I want you to know I really appreciated you showing me the various options. – Phillip Senn Mar 30 '10 at 17:11

score 0 · Answer 5 · answered Mar 29 '10 at 20:21

Adminting setOnLoadCallback will execute the OnLoad function why not doing this :

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
function OnLoad() {
   insert jQuery goodness here
};
google.load("jquery", "1");

var OnLoad = $(document).ready(function() {};

google.setOnLoadCallback(OnLoad);
</script>

jquery document ready with Google

5 Answers5