Broadchoice Community Platform 2.0.11 Released

As I Twittered on Monday, the new release of the Broadchoice Community Platform (our hosted content management system) was in QA and had hit zero bugs. QA completed successfully so today we pushed the new release to production. It's mostly a bug fix and minor enhancements release but it contains one new feature I wanted to talk about from a technical point of view.

The Community Platform has a number of "modules" (applications) that you can add to a page and one of those is a list of documents for download (or external links). You add the module to the page and then select documents (from your document library) to add to that module. In previous releases, authors had to add documents in the order that they wanted them to appear on the (generated) web page. We looked at a number of UI options for allowing authors to "rank" the documents within the module but felt most of them were fairly clunky, involving entering ranking numbers to reorder things or up/down arrows requiring authors to move documents one position at a time. Ugh!

Ray pointed me at one of the cool jQuery UI interactions: sortable. It allows you to mark a "container" tag (e.g., a div) as sortable and then users can drag'n'drop the "child" elements into the order they want. You can attach event handlers that fire at various points in the drag'n'drop operation.

Here's how we do it:


<div id="sortable">
<cfloop query="documents">
<div id="doctag_#documents.id#" onMouseOver="setCursor(this,'move')" onMouseOut="setCursor(this,'auto')">
#documents.name# ... etc ...
</div>
</cfloop>
</div>
That's all you need in the HTML. Then you add the following JavaScript:

$('#sortable').sortable({
update: function(event,ui) {
jQuery.get('/updateRank.cfm?' + $('#sortable').sortable('serialize'));
}
This causes two things to happen:
  1. jQuery marks the sortable div contents as being, well, sortable!
  2. jQuery adds an event handler for update - when the drag'n'drop operation completes - that invokes a URL on the server, passing in the serialized data from the children of the sortable div, i.e., the id values as a list in the new order: doctag[]=1,3,4,2. It assumes an underscore as a separator.
The server side code simply updates the module data to put the documents in the specified order.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
John Farrar's Gravatar Now this is either very scary or jQuery UI is pretty awesome. Design and layout are not the normal sphere of Sean the engineer. Version 1.7 is slightly different than the previous ones and caused some minor issues with the jQuery UI book... and they are reported to be working on a compadibility release for that. Yet, this is wonderful stuff. Glad you took the time to share it... and let me tease you a bit about touching the UI side of the world. :)
# Posted By John Farrar | 3/12/09 1:10 PM
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002. Contact Blog Owner