Flash "Slush Box"

Posted At : March 24, 2005 3:40 PM | Posted By : Mike Nimer
Related Categories: CFForm

Ron Pasch from Prisma-IT has put together a great example of a dual select box, or as some call it a "slush box".

This example connects two lists in a flash for and allows you to transfer items back and forth, between lists.

Update: Ray Camden has taken this example updated it and wrapped it up in a custom tag. Download it here

<cfsavecontent variable="addScript">
if(lb1.selectedIndices != undefined)
{
var r:Array = lb1.selectedIndices.sort(16|2);
for( var i=0; i<r.length; i++ )
{
lb2.addItem(lb1.getItemAt(r[i]));
lb1.removeItemAt(r[i]);
}
}
</cfsavecontent>

<cfsavecontent variable="selectAll">
var bah:Array = Array();
for(var i=0; i<select1.length; i++)
{
bah[i] = i;
}
select1.selectedIndices = bah;

var bah:Array = Array();
for(var i=0; i<select2.length; i++)
{
bah[i] = i;
}
select2.selectedIndices = bah;
</cfsavecontent>
<cfdump var="#form#">
<cfform format="flash" width="500" onSubmit="#selectAll#">
   <cfformgroup type="horizontal">
      <cfselect name="select1" width="200" size="10" multiple="Yes">
         <option value="1">Sue Hove</option>
         <option value="2">Simon Slooten</option>
         <option value="3">Ron Pasch</option>
      </cfselect>
      <cfformgroup type="vertical">
         <cfinput type="Button" name="addi" value=">" height="25" width="30" onclick="var lb1=select1;var lb2=select2;#addScript#">
         <cfinput type="Button" name="deli" value="<" height="25" width="30" onclick="var lb1=select2;var lb2=select1;#addScript#">
         <cfinput type="Button" name="adda" value=">>" height="25" width="30" onclick="var lb1=select1;var lb2=select2;#selectAll##addScript#">
         <cfinput type="Button" name="dela" value="<<" height="25" width="30" onclick="var lb1=select2;var lb2=select1;#selectAll##addScript#">
      </cfformgroup>
      <cfselect name="select2" width="200" size="10" multiple="Yes"></cfselect>
   </cfformgroup>
   <cfinput type="submit" name="btn" value="Submit">
</cfform>

Comments (18) |

Print |

Send |

del.icio.us |

Digg It! |

Linking Blogs | 2196 Views

Comments

[Add Comment]

I've built code like this before, but one thing tripped me up. How do you handle _sending_ the data? I see nothing in the code that handles sending to the form action section what items are in the left and right boxes.

Now sure you could write AS code to stuff b oth things in 2 hidden fields. That would work. But I'd love to see a solution that is packaged. Ie, I'd like to drop in a custom tag, cf_slush, and not have to worry about adding code to my onSubmit.

# Posted By Raymond Camden | 3/26/05 10:52 AM

There is a #selectall# variable which you put in the cfform onsubmit attribute. I just updated the example to show this (before it was there but not called onsubmit)

# Posted By Mike Nimer | 3/26/05 12:37 PM

Mike - you should add a link to my custom tag version. :)

# Posted By Raymond Camden | 4/1/05 3:56 PM

I had the #selectall# in the onsubmit all along. Guess mike forgot to add it in the live example ;)

Custom Tag could be easily made out of this (as I see raymond already did)
I've also added to the script to disable the form when people click the submit button, to make sure nothing is changed after you submit it and the Post request can just do it's job...

# Posted By Ron Pasch | 5/1/05 10:20 PM

This is really cool. I was wondering though. After I select stuff and submit it and it goes to the DB. How can I repopulate the right listbox with the selections from the DB? I want to select a name from a grid and then show the items selected in the right listbox.

# Posted By George Smith | 6/13/05 3:18 PM

I have been looking for this for a while. Thanks! I also have put in some code of my own. To keep the list sorted (my list is 360 items or so...), I put this in the addScript section after the for block lbl.sortItemsBy("label","ASC");
lb2.sortItemsBy("label","ASC");

# Posted By Jeffrey Cox | 6/15/05 9:53 AM

How to you use the "selected" attribute of the tag? refering to my question above, about filling the right box OnChange of a cfgrid. Is this possible?

# Posted By George Smith | 7/20/05 1:57 PM

I was having a major problem with slush which was when I select the item and its moved to the right box, and the requried=yes, then it turns to red and requires to click on the item.

I wanted to be default selected when item moved from left to right.

The solution is I inserted the following line after line # 62.

#attributes.name#_select2.selectedIndex = i;

and that will move the focus and select the last item moved from left to right.

# Posted By Asim Manzur | 7/21/05 9:14 AM

I have the code just like the samples. Everything works great using my own query about (1000 records). BUT when I put the: onSubmit="#selectAll#" the browser freezes up and after about a minute it says: an unusually long running script..... keep going yes or no.
Not sure what I am doing wrong. If I use the sample above it works, I think maybe its because there are to many records, I am only putting 3-10 records in the select2. So I wouldnt think its a problem with the records. Any thoughts? Oh yeah if I use the shift and pointer I can select all and send the items to the DB just fine, just need the auto select to work. Thanks

# Posted By George Smith | 8/3/05 2:11 PM

Is there a way that, if I choose to pre-populate select2, I cannot display those items in select1? For example, if I have a list of users that I want to edit, select1 is populated with all my users and select2 has a few of my users listed. I want those that are listed in select2 currently not to be shown in select1 (of course, unless I move them back).

# Posted By Lynn Lyne | 8/25/05 10:38 AM

Needfornews.com New great news aggregator. With it You won't need anything else to read news.
http://needfornews.com/feed.php?d=16757

# Posted By News Agg | 3/27/08 11:16 AM

http://www.bringr.com/story/20180/

# Posted By fsfsf | 4/1/08 1:32 PM

http://www.bringr.com/story/20180/

# Posted By fsfsf | 4/1/08 1:32 PM

most popular trends on one site
http://docwebnews.com /

# Posted By docwebnews.com | 4/7/08 10:32 AM

Thousands of hot movies that you dare to watch. Movies are playable on various devices including iPod, PDA (HandHelds), PC, DVD & DivX players. Lowest prices on the web ever. Start downloading movies from $1.99 only! Absolutely no limits. You can download as much as you want with incredibly high speeds. No additional software required. Click on a link, download a movie and watch it on your favourite player.

http://copydvdworld.com/

# Posted By watch film online | 4/14/08 5:37 AM

http://qualitydrugstore.biz/product_caverta.htm
http://qualitydrugstore.biz/product_silagra.htm
http://qualitydrugstore.biz/product_florinef.htm
http://qualitydrugstore.biz/product_actos.htm
http://qualitydrugstore.biz/product_deltasone.htm
http://qualitydrugstore.biz/product_singulair.htm
http://qualitydrugstore.biz/product_tenormin.htm

# Posted By waz | 4/18/08 11:06 AM

Thanks for posting
interesting site
http://cheapnewsguide.com

# Posted By cheapnewsguide.com | 5/1/08 8:20 AM

8bd3b9

# Posted By dgf | 5/5/08 9:44 AM

[Add Comment]