jQuery 1.3 released!

jQuery 1.3 was released and the most useful new feature is the live event!

Previously in older versions when you dynamically added new DOM elements into you page your event handlers would not automatically be attached to those elements.

You run into this issue a lot if you use AJAX or are creating lots of elements on the fly. The only trick before this new feature was to rebind all those events whenever a new element was added.

With the live event, it automatically binds up all current and future elements matching the selector

So instead of using:

// Will only add the event handler to current matched elements in the DOM
$("div").click(function() { doSomething(); });

You can use

// Will add the event handler to all current and future matched elements in the DOM
$("div").live("click", function() { doSomething(); });

Check it out, it’s a great new feature.

Cross browser copy and paste - with jQuery.Copy

See my updated post Cross Browser Copy and Paste - with ZeroClipboard *updated* for a different plugin to avoid security issues with Flash 10

Thank god for jQuery and addons

The Scenario

I was working on a client project for SSW when the client reported a bug in the web app.

The bug involved a dynamically generated mailto link that got updated when you selected multiple employees. The client was reporting an error when he selected more than 10 employees to email. His Lotus Notes mail client popped up an error saying:

Error processing command line arguments

Testing this myself I found that Outlook 2007 could easily support the emails of 30-40 employees before the mailto link stopped working.

The Cause

It turns out that the mailto spec has a limit and the mail clients also have a limit. Lotus Notes only handles 240 characters in the mailto link and other modern mail clients like Outlook 2007 support the 2083 characters - the max length of a URL

This explains the discrepancy in testing.

The fix - JQuery to the rescue

Since this is a limitation of the HTML spec we needed another solution to meet the client’s requirement of “I want to be able to select multiple employees and send an email to all of them”

We could have created an email form that used SMTP to send out the email - but the client wanted to use Lotus Notes as his mail client.

We ended up changing the “email” button to copy all the emails (comma separated) onto the clipboard and popped open a new email window. All the client had to do was hit CTRL + V and paste the emails into the TO field. This was the quickest and most cost effective solution that gave the client the flexibility to use their own email client.

There is a JQuery plugin called jquery.copy that provided cross browser copy and paste by using a flash (swf) file. This is similar to how the syntax highlighter on my blog works.

Once you reference the jquery.copy.js file all you need to do to push data into the clipboard is run the following:

$.copy("some text to copy");

Nice and easy ;)

Note: you may need to change the path the the SWF file in jquery.copy.js to get this to work