On Programmers, Programming Languages, and Frameworks | Home | ColdFusion Structures: Differences in Version 7 and 8

Filed under Lab on November 28, 2007 by Chris Dary

Introducing : jQuery MultiSelect

Ben Sgro, one of the newest editions to the cadre of arc90 developer extraordinaires, has created a new version of our MultiSelect tool, this time written in jQuery. It has been added to the Arc90 Tools section at the Arc90 Lab.

jQuery MultiSelect, much like its predecessor, is an easy way to turn an HTML select into a stylish drop down that supports multiple selections in a compact view.

If you are not familiar with jQuery, their homepage slogan is "The Write Less, Do More, Javascript Library". The following source code comparision reinforces that claim.

Javascript MultiSelect jQuery MultiSelect
Lines of code* 422 225

 

Not only does the new version have a significantly smaller source code footprint, it is also easier to follow than the original. This is partially due to the powers of jQuery, allowing complex DOM manipulation and method chaining to accomplish tasks with less code while still maintaining readablity.

* Our lines of code comparision was done by removing all comments that occupied one or more lines. Whitespace does count in the total.

Post a Comment Digg Del.icio.us

Trackback Pings (TrackBack URL for this entry)

http://www.arc90.com/cgi-bin/mt4/mt-tb.cgi/88.

Comments

I applaud Ben on redeveloping my original MultiSelect tool to work with jQuery. It's definitely one of the best JavaScript libraries available. I was actually thinking of porting it myself the other day, so I'm glad that it is getting new life.

I do however think that a comparison on the number of lines is inadequate in the measure of footprint. You should actually measure the bytes of the file, and you do have to take into account that the jQuery version also requires the jQuery library (which if you are already using it, is not a big deal, but does add a considerable amount of bytes to the overall footprint) and the original version is completely self contained and can be added to any site no matter what JavaScript code may already exist.

Posted on November 29, 2007 3:13 PM by Joel Nagy

Joel -

You're absolutely right. The lines of code comparison doesn't take into account all of the factors that go into comparing a port from one codebase to another. There are many things to consider when writing a plugin to a framework (lack of standalone operation and size being the biggest I think, as you point out), and since we don't really bring them up in the post, you're definitely justified in your comments. :)

The multiselect idea is a really great one, and the initial implementation really got us a long way. It's used in multiple products at Arc.

We also have a couple of plugin ideas that I'm sure will be cool for you to see, so keep your eye on the labs and such!

Posted on November 29, 2007 5:00 PM by Chris LoSacco

Hey guys,

Curiosity got the best of me, and I did a little research:

jQuery 1.2 + jQuery MultiSelect (packed) = 32K

Joel Nagy's Original MultiSelect (packed) = 11K

Joel Wins!

Posted on November 29, 2007 5:16 PM by Chris Dary

> Joel wins!

Indeed. Well, it was fun to use jQuery to do this, it made working with javascript enjoyable.

Thanks for the feedback!

Posted on November 29, 2007 9:39 PM by Ben Sgro

I like this plugin but it could be better if you add an option to clean the selected values on form reset.

And select options by code could be useful too for those ajax forms.

Posted on January 18, 2008 5:23 AM by Ignatius

It appears there's a bug with this plugin? I was suprised to see that the plugin submits parameters with a different name than the multi-select it intends to unobtrusively replace. Check line 320: it creates checkboxes with:

name="multiSelect-options-' + id + '[]"

when it should simply use:

name="' + name + '"

(which was perhaps the original intention since there is an unused 'name' local variable in scope).

Otherwise, very cool. Surprising though that this bug hasn't been noticed? Or perhaps am I missing something?

Posted on January 18, 2008 8:00 PM by Randy

I also notice an issue with IE6.
If I put whatever under the dropdown we see the classic IE bug where stays on the top of the the layer. This bug is also in Joel Nagy's code.

Posted on April 4, 2008 7:49 AM by Jukka-Pekka Keisala

I'm trying to use the bgIframe plugin to solve the bug pointed by Jukka-Pekka Keisala, but I can't.

Anyone knows how to solve this?

Posted on April 14, 2008 9:52 AM by Eva

Thanks for sharing this code. What you guys did is wonderful. A few observations...

1) hovering over the dropdown (displaying the title) no longer shows the selections of the dropdown like it does in Joel Nagy's code

2) Also the Select All shows the number of actual selections plus one (counting the select all selected) unlike Joel Nagy's code where it correctly shows the number. One could make a case for displaying "All selected" on the dropdown if all selected instead of an arbitrary number especially for a big lists.

Again great script, this really is a great UI upgrade over what people had been using multiselect listboxes for.

Posted on April 30, 2008 1:46 AM by anthony ryan delorie

@Randy - Thanks for the feedback. We'll have to update the code.

@Jukka-Pekka Keisala - Thank you also for your feedback. If you have a patch for this bug, please email it to me. You will be provided the proper credit!

@ Anthony Ryan Deloir - Thank you for pointing this out. If you happen to you have a patch, please email it to me. Otherwise we'll try and do the updates to the code soon.

Thank you all!

Posted on April 30, 2008 9:26 AM by Ben Sgro aka sk aka mr-sk

@Anthony Ryan Deloir, @Ben - Just change the following in the updateSelectTitle function (line 442):

var selectCount = $(':checkbox:checked', selectList).length+1 - (this.checked ? 1 : 1);

To this:

var selectCount = $('li:not(.selectall) :checkbox:checked', selectList).length+1 - (this.checked ? 1 : 1);

Including the "li:not(.selectall) " solves the problem.

Bye!

Posted on May 19, 2008 3:04 AM by Jose

@ Jose - Thanks! I'll update the source.

Posted on May 20, 2008 10:18 AM by Ben Sgro aka sk aka mr-sk

I've found a bug on arc90_mutliselect90.js

When click on "Select All" it counts the "select all" element.

Then you have to replace the line 450 : "var selectCount = $('li:not(.selectall) :checkbox:checked', selectList).length+1 - (this.checked ? 1 : 1);"

by : "var selectCount = $('li:not(.a9selectall) :checkbox:checked', selectList).length+1 - (this.checked ? 1 : 1);"

Posted on August 6, 2008 1:13 PM by BONANNI Aurélien

Cool Plugin. Is there a method or an easy jquery way to select options after the multiselect is instantiated and they are no longer option tags?

Thanks! Steven

Posted on September 18, 2008 1:05 PM by Steven

I would just figure out what ID's the function is naming the new checkboxes in the dropdown and call $('#theMultiSelectId').click();

Posted on September 18, 2008 1:16 PM by Chris

Hi and before all thanks for this js code. Its appears that if we selected the text (not the checkbox), the parameter wich is transmit is the text between TEXT and not the value.
If we select the checkbox, the script works well.

Have you upgrade the script since Randy tell you the bug or not ? Please, send me a mail if you did.

Thanks !

Posted on October 8, 2008 5:21 PM by DarkNeo

i'm sorry but in my previous message there's an error (i put html code and it don't displays) "[..]wich is transmit is the text between <option value="..">TEXT<option/> and not the value.[..]"

Posted on October 8, 2008 5:23 PM by DarkNeo

Sorry, I didn't see the latest version.

Posted on October 8, 2008 7:23 PM by DarkNeo

Post a Comment:

On Programmers, Programming Languages, and Frameworks | Main | ColdFusion Structures: Differences in Version 7 and 8