Sortable list with jQuery and Coldfusion

February 21, 2008

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(attributes.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/

4 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

Leave a comment

If you found this post useful, interesting or just plain wrong, let me know - I like feedback :)

Please note: If you haven't commented before, then your comments will be moderated before they are displayed.