$ is not defined error using jQuery and Google Code Repository
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:
<scr开发者_C百科ipt 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!
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());
});
});
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();
精彩评论