Today, I was working on some javascript using JQuery 1.3.2 and the lightbox plugin Colorbox.

Whilst most things were working perfectly, one special case I had wasn’t playing well.  From the following code I was getting a number of errors:

  $.fn.colorbox({
    iframe: true,
    href: 'url.php',
    innerWidth: 250,
    innerHeight: 400
  });

This was returning the following under different test conditions:

  $overlay is undefined
  settings is undefined
  a is undefined

etc etc etc.

This was causing me to start pulling me hair out as nothing I was doing from following the documentation was working. After a while I noticed that the colorbox.js file was being included AFTER my application js file which contained the calls to colorbox.

‘No problem’ I thought, as it’s all wrapped up nicely in $(document).ready… at least, until I started doing some digging.

Over the past few years I’ve read that ready() returns when your page is ready to rock, which is not correct. ready() tells you when the DOM is ready to be manipulated. Unfortunately for us, loading JS files does not constitute part of this process. Therefore, my application code was trying to do stuff before my colorbox code had loaded properly.

This leads me to think that it would be really handy in jQuery to have some sort of complete() event, whereby it returns when the DOM is ready(), AND all of the required elements on the page have finished loading.

In future, I’ll definitely be more careful with calling JS code from external files.

Bookmark It

Yup, 1.2.6 is now out (and is still just primarily a bug fix drop for 1.2),  and the events handling functionality is 103% faster.  But wait, that’s just the headline:

• CSS Selectors are 13% faster
• .offset() is 21% faster
• The DImensions plugin is now part of the core
• toggle() can now accept more functions
• attr() has had an overhaul
• You can now unbind bound toggle() and one() functions
• .index() supports jQuery collections
• jQuery.makeArray can convert ANYTHING into an array
• beforeSend() can cancel AJAX calls
• You can now define your own animation speeds with the jQuery.fx.speeds object

For more information please see the release notes.

Bookmark It

jQuery 1.2.3 has been released.  Just a couple of small bug fixes and new functions in this release – but most important of all, it’s now fully compatible with Adobe AIR.

Also released if v1.5a of jQuery UI, and the new jQuery enchant library (which deals primarily with effects).

For more information please visit the jQuery blog here.

Bookmark It

Yesterday, while presenting at the UKCFUG, a question was asked:

“How can I get ColdFusion to return me jSON encoded data, when I am still on version 7 and then use that data in jQuery?”

Well, I said I would blog the answer so it would be nice and clear, and this is that blog post.

In a nutshell, anything javascript loves jSON, the Javascript Object Notation (javascript speaking natively in simple terms). However, while in ColdFusion 8 you can easily get CFC’s to return jSON encoded data, ColdFusion 7 did not include this, so we need to get a little more imaginative. Whilst not impossible by any means, it is definitely a little more tricky than in CF, so use that if you can.

To start off with, you obviously need some sort of function to get you your data to return to jQuery. Something like this should do:

[viewcode] src=”2008/02/cf7_datasource.txt” geshi=cfm[/viewcode]

Now, thats a pretty simple function, nothing special at all. So how is this invoked? Well, one way of doing it is to create a gateway CFM file that calls your method and returns the result to the page (and this is by no means the only way). However, for this to render the data on the page it needs to convert it to something that takes the form of a string (jSON perhaps?). This is where you need to look at 3rd party code as there is no serializeJSON function in CF7.

Luckily, there is just such a bit of code, jSON.cfc . By using this we can convert pretty much anything into a jSON string for display. Like so:

[viewcode] src=”2008/02/cf7_datagateway.txt” geshi=cfm[/viewcode]

So, now we have a URL that gives me some jSON data. All that is left is to write the jQuery to get this data and handle it. Luckily for us, that’s real simple too:

[viewcode] src=”2008/02/cf7_jsonscript.txt” geshi=javascript[/viewcode]

Put all this together (with Firebug in Firefox) and you should see the variable you set in CF appearing in your browser.

Now as I said, there are other ways of doing this, so have a think about what you’re trying to do and you could probably find at least five other ways.

If you want to download jSON.cfc, it can be found here:

jSON CFC

Bookmark It

I’ve just been spending a load of time with the jQuery UI library and more specifically the sortables extension. What this allows you to do is specify a list of items on your page as sortable, and then every item becomes draggable to re-sort the list as per the demo’s here.

However, I’ve found an issue with the extension in that the update property doesn’t fire when the sorting is done by the user (which is said to have been fixed in the next release). For me, this is a showstopper as I need to know the new order immediately, which means I’ve had to go elsewhere for my sortable lists.

Enter script.aculo.us, the UI extension for the good ol js framework prototype. This supplies much of the same functionality of jQuery UI, but in a much larger package (127K vs jQuery’s 70Kb for the same functionality). So how do you work sortables in script.aculo.us?

Well, see the following code:

[viewcode] src=”2008/01/sortables.txt” geshi=js [/viewcode]

This will provide you with pretty much the same functionality as the jQuery option, but will successfully fire the update function when sorting is completed. For more information see here.

Bookmark It