Yeah, so I'm really dumb.  For a long time, I've used DreamWeaver pretty much exclusively as an IDE for my web projects.  There's something that makes sense here, as it has pretty good HTML and CSS features, and some limited ColdFusion and XML niceties.  However, it is the suck when it comes to JavaScript editing.

Today I discovered Aptana.  Of course, I've used Aptana before...by used, I mean, of course, that I downloaded the free version and played around with it (especially the built in AIR support).  However, I had never really used it to modify JavaScript.

Well, there is a new love in my life!  Aptana is smart enough to take my JavaScript, spaghetti-code as it is, and self-document all of the functions and variables that I have set.  They may not seem like a big deal, but when you have several hundreds of lines of JS code with inline comments, it can be a big pain to scroll around trying to find this or that.  

With Aptana, this kind of stone-age button pecking is over.  Aptana has a nice, built-in "Outline" toolbar that helpfully shows all of the functions in the selected file, along with any declared variables.  Plus, each function and variable is linked so that you can quickly and easily jump to the appropriate function/variable in an instant.  

Yes, so I am a noob to be just now figuring this out.  But you have to admit, it's pretty flippin' cool :)

If you've ever tried to use Spry data sets with a default implementation of Thickbox (a jQuery-based version of the familiar Lightbox), you've probably noticed that it doesn't work.

The reason for this, of course, is simple: out of the gates, thickbox.js fires off an initialization function (tb_init) through jQuery's ready().  What this means, technically, is that thickbox has already started its processing and element fishing before Spry's data sets have been fully loaded and rendered.  What this means, practically, is that Thickbox won't work.

Though frustrating, there is a fairly simple way to work around this.  

Conceptually, what we'll be doing is to bypass jQuery's ready() function and load tb_init manually AFTER we know Spry's data sets have fully loaded and rendered.

First, we need to figure out when the data sets are done processing.  This is pretty simple, because Spry comes with a handy way of sniffing this out.

We'll start by setting up a new data region observer.  Our observer will watch the data set and when it reaches the "state" that we define, we can manually fire the thickbox.js processing.

So here's our new observer:

the_Observer= new Object()
the_Observer.onPostUpdate = function() {
   // Here's where the thickbox function call will go...    
};

Spry.Data.Region.addObserver("the_region", the_Observer);

Nothing too complicated here.  We create a new Spry region observer, tell it to watch for the "onPostUpdate" state, and then we can load in whatever processing we want to the function we've defined for that state.

The next step, then, is to load in the thickbox initialization function.

To do this, start by going to the thickbox.js file.  Copy the following lines:

tb_init('a.thickbox, area.thickbox, input.thickbox');
imgLoader = new Image();// preload image
imgLoader.src = tb_pathToImage;

Once you have them copied, go ahead and comment out the entire $(document).ready function, including the lines you just copied.  Save and close.

Go back to your other page and paste the three lines into our observer function.  The final result will look something like this:

the_Observer= new Object()
the_Observer.onPostUpdate = function() {
    // See?  Here's the init function for thickbox...
    tb_init('a.thickbox, area.thickbox, input.thickbox');
     imgLoader = new Image();// preload image
     imgLoader.src = tb_pathToImage;
};

Spry.Data.Region.addObserver("products", the_Observer);

That's all there is to it.  Now your Thickbox content should work correctly.