Ask a Jedi: Moving items up and down...

So, a while ago I released a custom tag called Slush. It was a custom tag that would generate a Flash Form control allowing for left/right controls using select boxes. A user asked me if I had anything like that but with Up/Down type controls. In other words, he wanted to order items in a select box.

This isn’t too hard to do. I’ll show the code then talk about it a bit:

<FONT COLOR=MAROON><cfform format=<FONT COLOR=BLUE>"flash"</FONT> width=<FONT COLOR=BLUE>"600"</FONT> height=<FONT COLOR=BLUE>"200"</FONT>></FONT>

   <FONT COLOR=MAROON><cfsavecontent variable=<FONT COLOR=BLUE>"fix"</FONT>></FONT>
   var t2:Array = Array();
   for(var i=0; i < people.getLength();i++) {
      t2.push(people.getItemAt(i).data);
   }
   people_list.text = t2.join(<FONT COLOR=BLUE>","</FONT>);
   <FONT COLOR=MAROON></cfsavecontent></FONT>
   
   <FONT COLOR=MAROON><cfsavecontent variable=<FONT COLOR=BLUE>"moveUp"</FONT>></FONT>
      if(people.selectedIndex > 0) {
         var pos = people.selectedIndex;
         var temp = people.getItemAt(pos);
         people.addItemAt(pos-1,temp);
         people.removeItemAt(pos+1);
         people.selectedIndex = pos-1;
         <FONT COLOR=MAROON><cfoutput></FONT>#fix#<FONT COLOR=MAROON></cfoutput></FONT>
      }
   <FONT COLOR=MAROON></cfsavecontent></FONT>

   <FONT COLOR=MAROON><cfsavecontent variable=<FONT COLOR=BLUE>"moveDown"</FONT>></FONT>
      if(people.selectedIndex+1 < people.length) {
         var pos = people.selectedIndex;
         var temp = people.getItemAt(pos+1);
         people.addItemAt(pos,temp);
         people.removeItemAt(pos+2);
         <FONT COLOR=MAROON><cfoutput></FONT>#fix#<FONT COLOR=MAROON></cfoutput></FONT>
      }
   <FONT COLOR=MAROON></cfsavecontent></FONT>
   
   <FONT COLOR=MAROON><cfformgroup type=<FONT COLOR=BLUE>"horizontal"</FONT>></FONT>

      <FONT COLOR=MAROON><cfselect name=<FONT COLOR=BLUE>"people"</FONT> multiple size=<FONT COLOR=BLUE>"4"</FONT> width=<FONT COLOR=BLUE>"200"</FONT>></FONT>
      <FONT COLOR=NAVY><FONT COLOR=FF8000><option value=<FONT COLOR=BLUE>"1"</FONT>></FONT></FONT>Apple<FONT COLOR=NAVY><FONT COLOR=FF8000></option></FONT></FONT>
      <FONT COLOR=NAVY><FONT COLOR=FF8000><option value=<FONT COLOR=BLUE>"2"</FONT>></FONT></FONT>Beta<FONT COLOR=NAVY><FONT COLOR=FF8000></option></FONT></FONT>
      <FONT COLOR=NAVY><FONT COLOR=FF8000><option value=<FONT COLOR=BLUE>"3"</FONT>></FONT></FONT>Caladium<FONT COLOR=NAVY><FONT COLOR=FF8000></option></FONT></FONT>
      <FONT COLOR=NAVY><FONT COLOR=FF8000><option value=<FONT COLOR=BLUE>"4"</FONT>></FONT></FONT>Death Star<FONT COLOR=NAVY><FONT COLOR=FF8000></option></FONT></FONT>
      <FONT COLOR=MAROON></cfselect></FONT>

      <FONT COLOR=MAROON><cfformgroup type=<FONT COLOR=BLUE>"vertical"</FONT>></FONT>
         <FONT COLOR=MAROON><cfinput type=<FONT COLOR=BLUE>"button"</FONT> name=<FONT COLOR=BLUE>"moveUp"</FONT> value=<FONT COLOR=BLUE>"Up"</FONT> onClick=<FONT COLOR=BLUE>"#moveUp#"</FONT>></FONT>
         <FONT COLOR=MAROON><cfinput type=<FONT COLOR=BLUE>"button"</FONT> name=<FONT COLOR=BLUE>"moveDown"</FONT> value=<FONT COLOR=BLUE>"Down"</FONT> onClick=<FONT COLOR=BLUE>"#moveDown#"</FONT>></FONT>
         <FONT COLOR=MAROON><cfinput type=<FONT COLOR=BLUE>"submit"</FONT> name=<FONT COLOR=BLUE>"submit"</FONT> value=<FONT COLOR=BLUE>"Save"</FONT>></FONT>
      <FONT COLOR=MAROON></cfformgroup></FONT>
      
   <FONT COLOR=MAROON></cfformgroup></FONT>

   <FONT COLOR=MAROON><cfformgroup type=<FONT COLOR=BLUE>"horizontal"</FONT> visible=true height=<FONT COLOR=BLUE>"0"</FONT>></FONT>
      <FONT COLOR=MAROON><cfinput type=<FONT COLOR=BLUE>"text"</FONT> name=<FONT COLOR=BLUE>"people_list"</FONT> value=<FONT COLOR=BLUE>"1,<FONT COLOR=BLUE>2</FONT>,<FONT COLOR=BLUE>3</FONT>,<FONT COLOR=BLUE>4</FONT>"</FONT>></FONT>
   <FONT COLOR=MAROON></cfformgroup></FONT>
      
<FONT COLOR=MAROON></cfform></FONT>

<FONT COLOR=MAROON><cfdump var=<FONT COLOR=BLUE>"#form#"</FONT>></FONT>

First off - this isn’t a custom tag version, but it could be changed into it. The first thing you should note is the cfselect box. This is the container for options that we will sort. Next note the Up and Down button. They use the code defined above in the moveUp and moveDown cfsavecontent blocks. The action script is, genrally, understandeable. It’s pretty close to how you would do it in JavaScript.

So far - this is mostly trivial code. What isn’t trivial is how you pass the order to the server. By default, a select box with the multiple option will pass no data if you don’t select anything. I don’t want to force the user to Select All before hitting submit, so I made a little hack. I added an invisible form field called people_list. Whenever the drop down is reordered, I repopulate the value property using the code defined in cfsavecontent block named “fix”.

Thoughts? I’d be shocked if the folks at ASFusion.com don’t have a much more elegant solution, so check there as well.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Comments