I couldn't help it, I had to post on this topic even though it's kind of a hot topic and you'll find many other posts out there on this. Hot indeed, and yet I need to search around quite a bit for the answer to my error.
First, to follow me, here's some homework to read up on in case you're not down with Google's hosted AJAX API scripts and the google.load() function.
Basically, I ran into this thing where I was using the google.load() to first grab the jQuery core and then immediately afterwards (next line) grab the jQuery UI library. However, I was getting the following JavaScript console error everytime the page loaded:
$ is not defined
The line giving me the trouble was my document ready method, standard fare for jQuery:
$(document).ready(function(){
The problem was that the google.load() function that was off trying to get the core wasn't coming back and processing the core fast enough for the ui library. The jQuery object wasn't initialized yet. The solution was to wrap my jQuery ready method inside the setOnLoadCallback() function, thusly:
// Use the Google API Loader to bring in the jQuery libraries
google.load("jquery", "1.2");
google.load("jqueryui", "1.5.3");
google.setOnLoadCallback(function()
{
$(document).ready(function()
{
...ready code goes here...
The slight delay is actually the fault of the google loader, which kind of stinks because I think it's a pretty cool loader. According to the blog I referenced above, you never get this problem if you don't use the loader and go straight for the remote js library files via script tags. Those apparently obey ordered loading. So, I learned a little this evening. I hope it helps you, too.
Recent Comments