$ is not defined error using jQuery and Google Code Repository

Question

I'm trying to duplicate the tabs demo from the jQuery website. The sample page I'm working with is: http://yazminmedia.com/playground/jquerytabs.html

I'd like to use the Google Code Repository to take advantage of the caching. I have the following code in the head of my page:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");

$(function() {
  $("#tabs").tabs();
});
</script>

However, I keep getting the following error - "$ is not defined" for the following line:

$(function() {

Does anyone have any idea what might be going on that is causing the error?

Thanks!

Answer 1

google.load injects a script element right after itself. So the order in which script tags appear is:

// google loads first
<script src="http://www.google.com/jsapi"></script>

// ask "google" to load jQuery and jQuery UI
<script>
    google.load("jquery", "1");
    google.load("jqueryui", "1");

    // try to use $
    $(function() {
        $("#tabs").tabs();
    });
</script>

// But, jQuery gets included here (after its usage)
<script src="jquery.min.js"></script>

// and jQuery UI gets included here
<script src="jquery-ui.min.js"></script>

Since the usage of $ appears before jQuery is included in document order, $ will not be defined in the second step.

A solution is to break apart the script tags, so that google.load statements appear in their own script tags. So instead if you replace your code with:

<script>
    google.load("jquery", "1");
    google.load("jqueryui", "1");
</script>

<script>
    $(function() {
        $("#tabs").tabs();
    });
</script>

The order of script tags in the document now will be:

// first google loads
<script src="http://www.google.com/jsapi"></script>

// then we ask "google" to load jQuery and jQuery UI
<script>
    google.load("jquery", "1");
    google.load("jqueryui", "1");
</script>

// jQuery loads
<script src="jquery.min.js"></script>

// jQuery UI loads
<script src=".../jquery-ui.min.js"></script>

// now our script can run smoothly
<script>
    $(function() {
        alert($("h1").text());
    });
</script>

Note that the script element containing your jQuery code now appears after jQuery, so your code should work and $ or jQuery should be defined from that point thereon.

---

However, instead of relying on the behavior of google's loading order, a better solution is to either use the direct links for the libraries, or use a callback.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script>
    // your jQuery code follows
</script>

Or, use the onLoad callback:

google.load("jquery", "1");
google.load("jqueryui", "1");

google.setOnLoadCallback(function() {
    // jQuery should be define here
    $(function() {
        alert($("h1").text());
    });
});

Answer 2

For some reason I got the same error

I got away with it by adding this script to every page

<script language="javascript" type="text/javascript">
    $j = jQuery.noConflict();
</script>

then using

$j("#tabs").tabs();