jQuery callbacks "$ is not defined" - jQuery Usage Documentation Update needed

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Use the attached web page for an example to see the behavior

2. Open the page in Firefox/IE from your web server i.e. 
http://localhost/gjt.htm (so page load order is consistent.)

3. Delete line 8 from the file (closing script tag) and line 10 (opening 
script tag)

4. Run the page to see the error

> What is the expected output? What do you see instead?

Page errors out in Fiefox with "$ is not defined" because jquery.min.js 
has not yet completed loading.

5> Not put the lines 8,10 back in and re-load the 

Page works correctly because jquery.min.js completes loading into the DOM 
before the $(function(){...}); gets executed.

> What version of the product are you using? On what operating system?

This would happen with all versions of jQuery. Windows OS.

> Please provide any additional information below.

jQuery developers world-wide commonly use jQuery core callback function 
documented here http://docs.jquery.com/Core/jQuery#callback

Since access to these functions is limited to asset pre-loading in the 
HEAD section it is necessary for the load to complete before any other 
script begins execution.  I see two ways around this issue but would 
suggest that the first one is the correct approach.

Workarounds:

1> In the jQuery sample code (http://code.google.com/apis/ajaxlibs/) 
starting after line four I would add a close/open set of script tags.  I 
would also modify the comment on line three mentioning that it is 
necessary to ensure proper loading of the library befor attempting to 
access it's methods or functions.

2> (I dont like this suggestion as an alternative though) Tell all jQuery 
users that they must encapsulate their $(document).ready(); and $(); 
method calls within a google.setOnLoadCallback(function() {...});. 

Original issue reported on code.google.com by pir...@gmail.com on 1 Jun 2008 at 6:10

Attachments:

• gjt.htm

[GoogleCodeExporter]

Original comment by jrgeer...@gmail.com on 4 Jun 2008 at 12:55

• Added labels: APIType-Libs

[GoogleCodeExporter]

You can't use jQuery calls immediately after google.load('jquery') because the 
.load is asynchronous, and you 
need to use google.setOnLoadCallback(onloadFunc) to know when jquery is loaded 
through the loader.  
Alternately, you can use a direct script include of the file through us.

Original comment by lisba...@google.com on 6 Jan 2009 at 10:23

• Changed state: Invalid

[GoogleCodeExporter]

It seems to me there should be a synchronous option in google.load().

This problem only seems to occur for me Firefox. In IE, Opera, and Google 
Chrome the
problem does not occur. Isn't having the same behavior across all major 
browsers of
critical importance?

My script tags look something like this: 
<script src="http://www.google.com /jsapi?key=MyKey" 
type="text/javascript"></script>
<script src="js/master.js" type="text/javascript"><!--contains
google.load("jquery","1.3.2");--></script>
<script src="js/slide.js" type="text/javascript"><!-- contains calls to jquery 
$()
which produce errors in firefox --></script>

Original comment by son...@localtel.net on 18 Mar 2010 at 6:34