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


Comment by Kevin Quillen – February 27, 2008
Comment by aliaspooryorik – February 27, 2008
Comment by mark – November 17, 2008
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
Thanks!
Comment by Maya – May 26, 2009
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
dimensions.js,mouse.js,draggable.js,droppable.js,sortable.js?
Comment by Rob – September 24, 2010
jqueryui.com/download
Comment by John Whish – September 27, 2010
Variable ATTRIBUTES is undefined.
Am I missing something?
Comment by Dani – November 09, 2011
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
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 : </script>
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
Thank you!
Comment by Dani – November 09, 2011