Digital Ninja

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.

• Google Code AJAX API's
• Awesome blog post about the pro's and con's

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.

This week I found myself taking another look at ExtJS. It's a JavaScript framework, I suppose one could say it's something along the lines of Prototype or MooTools. But as far as I've seen, the good folks at Ext have really taken this whole frame work thing a few steps farther down the road than the rest of the competition.

I'm working on a freelance project and we've really extended the amount of time and effort invested into the front end of the web site. Now it's time for me to pull the back end together and I'm trying to expedite my journey to the finish line without compromising quality. This is when I remembered the ExtJS library that's built into ColdFusion 8. I also remembered that the version that's coupled with Adobe's product isn't the most recent.

I hit up the Ext website and downloaded version 2.0. With the help of one of the sample script I quickly had a JavaScript powered grid pulling data in from a web service I had already written. The best part is how easy it was to adapt the sample. It was using a static XML file, which was usurped into a data store. Just a slight change in the code allowed me to use a URL call to my service as a JSON store.

The next step will be making it editable. I haven't built the service layers for that but it shouldn't take long. And I suspect that, given the incredibly rich set of features a JSON store object has in ExtJS it won't be difficult to have it talking back and making changes, and thereby a fully editable JS grid interface to my data.