jQuery UI Sortable Tutorial
Here's a simple tutorial showing how to use jQuery UI's sortable plugin to update a database table's sort order field on the fly using ajax.
Here's the HTML markup used to define the content that will be sortable (note you don't need to use a
ul as most examples will show, you can use any container, and its children will be sortable in this case we used divs.):
<div id="fruit_sort"> <div id="fruit_1">Apple</div> <div id="fruit_2">Orange</div> <div id="fruit_3">Pear</div> </div>
In order to make the
fruit_sort container sortable, we need to run
$('#fruit_sort').sortable(); at a bare minimum.
But how can we update our database every time the list is sorted? To do this we must bind to the sortable update event. Accordign to the docs this event is triggered when the user stopped sorting and the DOM position has changed.
$(this).sortable('toArray').toString() in our example update event handler we are given a string list of all the item id's, it might look like
fruit_2,fruit_1,fruit_3. We can then send the new order to our server in an ajax request using
Finally to handle things on the server side (using ColdFusion in this demo) we might have some code that looks like this
<cfparam name="url.fruitOrder" type="string"> <!--- fruitOrder = fruit_1,fruit_2, etc...---> <cfset order = 0> <cfloop list="#url.fruitOrder#" index="item"> <cfset fruit_id = Val(ListLast(item, "_"))> <cfset order = order+1> <cfquery> UPDATE fruit SET sort_order = <cfqueryparam value="#order#" cfsqltype="cf_sql_integer"> WHERE fruit_id = <cfqueryparam value="#fruit_id#" cfsqltype="cf_sql_integer"> </cfquery> <cfoutput>#fruit_id#</cfoutput> </cfloop>
Like this? Follow me ↯Tweet Follow @pfreitag
jQuery UI Sortable Tutorial was first published on January 07, 2010.
- jQuery UI Autocomple IE 6 Select List z-Index Issues
- Using jQuery UI Autocomplete with Hidden ID's
- Getting Started with jQuery Mobile
- Ext CFC
- Quick Google CDN jQuery Tip
- jQueryUI Icon List Cheatsheet
- Howto Remove Skype Plugin Markup with jQuery
The FuseGuard Web Application Firewall for ColdFusion & CFML is a high performance, customizable engine that blocks various attacks against your ColdFusion applications.