FcbkSelector Plugin

Inspiration from Facebook

I have been quite taken by many of the interface elements that Facebook has developed into their service and think that many of them could serve businesses well in their own applications.

An application that I've been working on has called for a Facebook interface element that I've quite enjoyed for selecting multiple items. The element allows you to check off items that are represented visually as blocks, and it allows you to filter by what's been selected or by a search string.

fcbkSelectionList jQuery Plugin

After a little web surfing, I found a jQuery plugin called fcbkListSelection. It seemed like a great start toward getting this going in my own application. All I needed to do was figure out how to get it working with ColdFusion on Wheels.

Mixing it with ColdFusion on Wheels

This interface element has been a perfect match for a feature coming up in ColdFusion on Wheels version 1.1 called nested properties. To summarize quickly, nested properties allow you to validate and save a model object and its associated children all in the same database transaction.

After setting a nested property in your model, you can use a new form helper called hasManyCheckBox() to represent a check box bound by your many-to-many association.

I wanted for the selection to be powered by check boxes, particularly those generated by hasManyCheckBox(). Here's a sample of the HTML that I wanted to see jQuery transform into the UI element:

1<div id="user-selector">
2    <div>
3        <input id="group-userGroupMemberships-2-2-_delete" name="group[userGroupMemberships][2,2][_delete]" type="checkbox" value="0" />
4        <input id="group-userGroupMemberships-2-2-_delete-checkbox" name="group[userGroupMemberships][2,2][_delete]($checkbox)" type="hidden" value="1" />
5        <label for="group-userGroupMemberships-2-2-_delete">
6            <img alt="" src="http://www.gravatar.com/avatar/76e890c5d1f6e828bcc11c2efa6aa00c.jpg?size=50&rating=g" />
7            Default Admin
8        </label>
9    </div>
10    <div>
11        <input checked="checked" id="group-userGroupMemberships-3-2-_delete" name="group[userGroupMemberships][3,2][_delete]" type="checkbox" value="0" />
12        <input id="group-userGroupMemberships-3-2-_delete-checkbox" name="group[userGroupMemberships][3,2][_delete]($checkbox)" type="hidden" value="1" />
13        <label for="group-userGroupMemberships-3-2-_delete">
14            <img alt="" src="http://www.gravatar.com/avatar/1ae57d1ff583049035455afb1b031f80.jpg?size=50&rating=g" />
15            Chris Peters
16        </label>
17    </div>
18    <div>
19        <input id="group-userGroupMemberships-1-2-_delete" name="group[userGroupMemberships][1,2][_delete]" type="checkbox" value="0" />
20        <input id="group-userGroupMemberships-1-2-_delete-checkbox" name="group[userGroupMemberships][1,2][_delete]($checkbox)" type="hidden" value="1" />
21        <label for="group-userGroupMemberships-1-2-_delete">
22            <img alt="" src="http://www.gravatar.com/avatar/156ec2337695f08bee55f29107906227.jpg?size=50&rating=g" />
23            System Robot
24        </label>
25    </div>
26</div>


Compare It with fcbkListSelection

Unfortunately, this is what fcbkListSelection expects in terms of markup:

1<ul id="user-selector">
2    <li>
3        <input name="userGroupMembership" type="hidden" value="1" />
4        <img alt="" src="http://www.gravatar.com/avatar/76e890c5d1f6e828bcc11c2efa6aa00c.jpg?size=50&rating=g" />
5        Default Admin
6    </li>
7    <li>
8        <input checked="checked" name="userGroupMembership" type="hidden" value="3" />
9        <img alt="" src="http://www.gravatar.com/avatar/1ae57d1ff583049035455afb1b031f80.jpg?size=50&rating=g" />
10        Chris Peters
11    </li>
12    <li>
13        <input name="userGroupMembership" type="hidden" value="2" />
14        <img alt="" src="http://www.gravatar.com/avatar/156ec2337695f08bee55f29107906227.jpg?size=50&rating=g" />
15        System Robot
16    </li>
17</ul>


What's with that? A list and hidden fields? Do you know what that looks like when JavaScript is disabled? Here it is:

There is absolutely nothing that you can do with this when JavaScript isn't available or doesn't load properly.

Much Better with Check Boxes

I at least wanted check boxes to appear in the event that JavaScript wasn't available, which is exactly what hasManyCheckBox() affords:

My Solution: FcbkSelector Wheels Plugin

With my upcoming FcbkSelector plugin for ColdFusion on Wheels, you get quite a bit of improvements over what the fcbkListSelection plugin offers:

• Accessible check box markup for users without JavaScript loaded (no inaccessible unordered lists).
• An optional search box that allows users to filter the items by a search string.
• Ties directly to Wheels 1.1's new nested properties feature.
• Can use the widget more than once on a web page, bound to different HTML id's.

It took quite a bit of rewiring of the jQuery plugin to get it working properly with accessible check box markup. When you select an item in the list, the JavaScript actually checks the associated check box instead of playing around with a hidden field.

I'm pretty proud of this, so check it out!

View the Demo »