Sorting with jQuery, saving with ColdFusion
I was recently asked by a reader, how you could sort an HTML list, so that the database was updated each time you moved an item to a new position. Well, by using jQuery and jQuery UI together we can quite easily create a list that can be reordered using the sortable method, and attach an event listener to fire an AJAX post to a CFC on our server which will update the database. That all sounds complicated, but ColdFusion with jQuery make it quite simple, here's the code.
<html>
<head>
<title>jQuery UI Sortable</title>
<!--- get the jQuery library --->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<!--- get the jQuery UI library --->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">
</script>
<style type="text/css">
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; border:1px solid red; }
</style>
<script type="text/javascript">
$(function() {
// create a reference to our list
$sortable = $("#sortable");
// make our list sortable
$sortable.sortable();
// disableSelection is a handy (as yet undocumented feature)
// of jQuery UI that stop the user being able to select the text inside the element
$sortable.disableSelection();
// bind the 'sortupdate' event to our list
// sortupdate only fires when the user stops sorting the element
$sortable.bind('sortupdate', function(event, ui) {
console.log($(this).sortable('serialize'));
$.post(
"remote.cfc",
{method:"reorder", data:$(this).sortable('serialize')}
);
});
});
</script>
</head>
<body>
<ul id="sortable">
<!--- loop through items --->
<cfloop query="qrySections">
<li id="myprimarykey_#qrySections.id#">Item #qrySections.id#</li>
</cfloop>
</ul>
</body>
</html>
And the remote.cfc that updates the database:
<cfcomponent output="false">
<cfsetting showdebugoutput="false">
<cffunction name="reorder" output="false" access="remote">
<cfargument name="data" required="true" />
<!--- convert the serialized string to a comma delimited list --->
<cfset var idlist = ReReplaceNoCase( arguments.data, "(&)?myprimarykey\[\]=", ",", "all" )>
<cfset var position = 0>
<cfset var pk = 0>
<cfloop list="#idlist#" index="pk">
<cfset position++>
<cfquery datasource="mydsn">
UPDATE myTable set
sortorder = <cfqueryparam value="#position#" cfsqltype="CF_SQL_INTEGER">
WHERE id = <cfqueryparam value="#pk#" cfsqltype="CF_SQL_INTEGER">
</cfquery>
</cfloop>
</cffunction>
</cfcomponent>
- Posted in:
- jQuery
- ColdFusion
I tried the script, everything sorts fine in the browser, but the remote.cfc isn't firing up for the update.
Could there be perhaps a character off in the functions to call the cfc?
Once I get the cfc firing, I'll try an example with images, nothing more user friendly than simply moving images around.
Best regards,
Pardeep.
Comment by Pardeep – December 21, 2009
Comment by John Whish – December 21, 2009