MASS EFFECT checkboxes with jQuery and CF!

If you've struggled with emulating GMail or Yahoo style Select All functionality for tabular forms and you're in love (or just curious) about jQuery and ColdFusion then this post is for you! If you love MASS EFFECT and you just want to see where someone has come up with a legitimate reason to use the words MASS EFFECT in code then this post if for you too!

So first off, I'm not building yet another browser based mail client. However, there are other uses for list style forms that feature a checkbox Select - such as applying a massive update to many records at once. In this case we'll be looking at applying a mass Status update to a potentially large number of Warehouse Containers.

For this example to work properly you'll probably want to pay close attention to how you've auto-generated the names of your checkboxes because your form processor will thank you for doing so!

The following code shows a simple cfloop on a query that's dynamically building controls based on user search results that were collected from a parent form...

We also have a checkbox control named selectAll which will essentially control our toggle...

So basically when we click Select All we want for all checkbox controls that uniquely identify a Warehouse Container to be Selected or Deselected. The following bit of jQuery will handle that quite easily for us.

One thing that you need to make certain of is that you explicitly exclude any checkboxes that you don't want included in this toggle. If you notice I'm doing just that so that we don't change the value of my searchJobs, onlyFinishedMaterial or searchPosition checkboxes that live in the parent search filter page shown in the image below. Please note that you can most certainly avoid conflicts like this by using specific CSS classes for each type of checkbox but for my purposes addressing the controls using input[type=checkbox] was a good fit.

So far we've dynamically named our checkboxes and we have a way to turn them on and off - buy WHY? Well, we need to be able to mass update all selected Containers to have the same Status. Please keep in mind that this form also has other controls on it that are NOT allowed to be mass updated so that's why you see the standard Save button on the bottom right in the photo shown above.

In the following image and code snippet, you'll see where I'm invoking a cfwindow to allow the end user to select the new Status...

The code for the cfwindow is pretty simple as it will ultimately fire up JavaScript functions on the parent page and if the user is really sure that they're sure that they're certain :0 they want to update Mass Effect style then they can go ahead and "Make it so"...

Back on parent page land we've got the following series of JavaScript functions that will start the process of talking to our form processor if the user decides to go ahead with the update...

You may have noticed that I've snuck a global in there and that I'm referencing some form variables. massEffectInProcess will help me maintain state if I'm working with the non-Select All style update and newMassStatusVal is a hidden form field that my form processor will use here in just a sec!

Moving onto the How, I've got a form processor that we'll call using ColdFusion.Ajax.submitForm and it will actually process both of the aforementioned scenarios - a "Mass Effect Status Update" (yes, I'm an XBOX Gaming Nerd and I love the Mass Effect games) or the more common "I just updated 3 or 4 of these decimals so please save my changes".

Notice in the code below that I'm parsing the inputs and I'm also looking for a boolean named massEffect that will instruct my code as to whether or not we're performing a Mass Status Update...

This started off as a short entry and then turned into a bigass pile of solution. At least this way I won't forget it and I know that I've got it safely stored in my very own BlogCFC in case I can't remember how to cast this spell next month! I will add that there are a lot of other pieces to this application that are definitely outside of the scope of checkbox magic, but hey ~ I've shown you how to play Mass Effect with jQuery and ColdFusion. So remember folks - ALL YOUR CHECKBOXES ARE BELONG TO US.