Wednesday, 28 July 2010

Moving data between two ListBoxes - Difference between jQuery 1.3.2 and jQuery 1.4

Recently a new version of jQuery was released. This version is 1.4. As with any new version, ultimately you see what used to take you several lines of code, now rolled up into a single line of code. I'm going to demonstrate a question I've been asked many times on forums and that is how to move selected items from one elements side by side with two buttons between them. Here's what it looks like:



Move data between two listboxes
<form method="get">
<select id="SelectLeft" multiple="multiple">
<option value="1">Australiaoption>
<option value="2">New Zealandoption>
<option value="3">Canadaoption>
<option value="4">USAoption>
<option value="5">Franceoption>
select>
<input id="MoveRight" type="button" value=" >> " />
<input id="MoveLeft" type="button" value=" << " />
<select id="SelectRight" multiple="multiple">
select>
form>
jQuery 1.3.2
Below is the code to move the selected items from each element and remove the moved items:
$(moveTo).append(output.join(""));
selectedItems.remove();
Overall I think that's a good approach. In jQuery 1.4 we can make this better!
jQuery 1.4
In the new jQuery library, the team has introduced a new function called toArray. This retrieves all the DOM elements contained in the jQuery set, as an array. So here's the code below:
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js">script>
<script language="javascript" type="text/javascript">
$(function() {
$("#MoveRight,#MoveLeft").click(function(event) {
var id = $(event.target).attr("id");
var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";
var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";
var selectedItems = $(selectFrom + " :selected").toArray();
$(moveTo).append(selectedItems);
selectedItems.remove;
});
});
script>
The first thing you'll notice is the code has been reduced. Thanks to the toArray function, I have eliminated the need to loop through the selected items. Now they're returned as an array:
var selectedItems = $(selectFrom + " :selected").toArray();
And to add them to the