Sortable list with jQuery and Coldfusion

An updated version of this post is available here

jQuery has a really nice plugin called “sortable” that lets you reorder a list using drag and drop. It’s really easy to get it up and running. In your display page you would have:

<cfoutput>

<ul id="sortable">
  <cfloop query="qrySections">
    <li id="section_id_#qrySections.section_id#">#qrySections.section_title#</li>
  </cfloop>
</ul>

<form action="#CGI.SCRIPT_NAME#" method="post" id="frm-sort">
  <input type="submit" name="save" id="save" value="save" />
  <input type="hidden" name="sort_serialized" id="sort_serialized" value="" />
</form>

</cfoutput>

<script type="text/javascript">
<!-- <![CDATA[
$(function(){
  $.getScript("js/jquery.dimensions.js", function(){
    $.getScript("js/ui.mouse.js", function(){
      $.getScript("js/ui.draggable.js", function(){
        $.getScript("js/ui.droppable.js", function(){
          $.getScript("js/ui.sortable.js", function(){
            // required plugins have all loaded
            $("#sortable").sortable({});
          });
        });
      });
    });
  });
});
$('#frm-sort').submit(function(){
  $('#sort_serialized').val($('#sortable').sortable('serialize'));
});
// ]]> -->
</script>
<noscript>Please enable javascript to sort sections</noscript>

Then in your Coldfusion script that handles the form submission:

<cfif StructKeyExists(attributes, "sort_serialized")>

  <cfset variables.lst_section_id = ReReplaceNoCase(form.sort_serialized, "(&){0,1}section_id\[\]=", ",", "all") />

  <cfloop from="1" to="#ListLen(variables.lst_section_id)#" index="index">

    <cfquery name="qryOrder" datasource="#Application.Datasource#">
      update [Sections] set
        section_order = <cfqueryparam value="#index#" cfsqltype="cf_sql_integer" />
      where section_id = <cfqueryparam value="#ListGetAt(variables.lst_section_id, index)#" cfsqltype="cf_sql_integer" />
    </cfquery>

  </cfloop>

</cfif>

That’s it. To get the jQuery files visit http://ui.jquery.com/

• Posted in:
• jQuery
• ColdFusion

12 comments

1. Why won't this work with tr's without dumping in a UL or div or span??
   
   Comment by Kevin Quillen – February 27, 2008
2. Hi Kevin - it won't work with a table because you have the td tag inside the tr. If you want to sort table rows have a look at www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
   
   Comment by aliaspooryorik – February 27, 2008
3. I'm just getting into jQuery, but is there a way to save the DOM object in CF? I'd like to create a portal app in jQuery and have CF remember the positions of divs, images, etc...
   
   Comment by mark – November 17, 2008
4. Hi Mark, the short answer is no. ColdFusion runs on the server, and jQuery in the browser. However, it is possible to store user preferences in the database by getting jQuery to send the data via cookies, querystring parameters or AJAX (JSON/XML).
   For what you're talking about I'd suggest that you forget about saving the settings on the server and concentrate on saving settings in cookies on the client browser and have jQuery read and write settings to them.
   Hope that helps!
   
   Comment by John Whish – November 17, 2008
5. Is there a way to have the database automatically updated upon each drag/drop so the user doesn't have to click on the submit button when they are finished dragging & dropping?
   
   Thanks!
   
   Comment by Maya – May 26, 2009
6. Hi Maya. Yes, the jQuery sortable plugin has a bunch of event handlers you can use listed here:
   docs.jquery.com/UI/API/1.7.1/Sortable />
   you might want to look at the update event:
   
   $('.selector').sortable({
   update: function(event, ui) { ... }
   });
   
   Comment by John Whish – June 02, 2009
7. I can't seem to find all of those js files on jquery.com?
   
   dimensions.js,mouse.js,draggable.js,droppable.js,sortable.js?
   
   Comment by Rob – September 24, 2010
8. Hey Rob, those are all part of JQuery UI now, so just get that and you'll be sorted (sorry for the pun!)
   
   jqueryui.com/download
   
   Comment by John Whish – September 27, 2010
9. Hello, for some reason is giving me this error:
   Variable ATTRIBUTES is undefined.
   
   Am I missing something?
   
   Comment by Dani – November 09, 2011
10. Hi Dani,
    This is quite an old post and I do have a newer version (using AJAX) which I blogged here:
    www.aliaspooryorik.com/blog/index.cfm/e/posts.details/post/sorting-lists-with-jquery-ui-ajax-and-coldfusion-285
    
    If you change the "attributes" to "form" it should work. I'll update the article to link to the new post and use form variables instead.
    
    Comment by John Whish – November 09, 2011
11. Hello, it's me again.
    the code: <cfif StructKeyExists(attributes, "sort_serialized")> is basically checking if the form has been submitted, right? Is there any particular part of the code that this code should be located?
    Right now is giving me the following error:
    
    Variable ATTRIBUTES is undefined.
    
    The error occurred in xxxxx\admin\viewImagesSlider.cfm: line 149
    
    147 : &lt;/script&gt;
    148 :
    149 : <cfif StructKeyExists(attributes, "sort_serialized")>
    150 :
    151 :           <cfset variables.lst_section_id = ReReplaceNoCase(attributes.sort_serialized, "(&){0,1}section_id\[\]=", ",", "all") />
    
    Thank you very much for your help.
    
    Comment by Dani – November 09, 2011
12. Hey, I didn't realized you answered!
    Thank you!
    
    Comment by Dani – November 09, 2011