yet another coldfusion blog

In my work on the Meld FormBuilder plugin, I've had to learn a lot of jQuery on the fly, and it has been a happy time.  The clumsy and often unfathomable series of JavaScript functions that would normally be required to do even the simplest of tasks has been make relatively painless because of jQuery, from selectors to JSON parsing to AJAX and so, so much more.

The FormBuilder is essentially a GUI form building tool, allowing users to drag-and-drop form elements into a form container, arrange them into pages and sections as needed, and of course enter settings like label, validation and defaults.  Because it is a single-page application, jQuery is an essential component in creating building out the interface.  Ajax queries call the ColdFusion back-end for field templates and data beans, and the data in these beans has to be mapped to the forms used to populate/update them.

To begin with, we have a FieldBean, who's "remote" data looks something like below (abbreviated):

{ "fielddata": { "fieldid": "4B030C2E-3D53-4DF8-A3535EF377B45DE5", "textlabel": "Unlabeled", "texttip": "", "isactive": "0", "isdisabled": "0", "styletype": "", "defaultvalue": "", "isunique": "0", "fieldtypeid": "1C32D7FF-0D5A-4B94-81623958DA776266", "orderno": "0" } }

Because there are many fields, and the data isn't saved to the server individually (the entire form is updated at once), and because the forms that manage each field are only templates, I needed a way to both load the current data values into the form, and then update that data as form values are changed (essentially an initial data assignment to the appropriate field, then a 'bind' so that changes to the form are immediately reflected in the data object).

To accomplish this, I first used the new HTML5 "data" attribute to create a bind key in the form fields (in this case, "data-bind"):

<ul class="form"> <li id="formblock-fieldlabel"> <label for="textlabel">Field Label </label> <input class="text" type="text" id="textlabel" value="" data-bind="textlabel"> </li> <li id="formblock-styletype"> <label for="styletype">Size </label> <select class="select" id="styletype" data-bind="styletype"> <option value="small">Small</option> <option value="medium">Medium</option> <option value="large">Large</option> </select> </li> <li id="formblock-defaultvalue"> <label for="defaultvalue">Default Value </label> <input class="text" type="text" id="defaultvalue" value="" data-bind="defaultvalue"> </li> <li id="formblock-texttip"> <label for="texttip">Tip Text </label> <textarea id="texttip" class="textarea small" data-bind="texttip">

The value of "data-bind" is usually the same as the field name, but I wanted to not only keep this flexible, but also create a very unique key for my jQuery selectors.  To accomplish this, I first select all of my fields in the form, then using the jQuery $.each() function I loop over them and activate the bindings.

function bindFields() { // the form that we are processing var $templateHTML = $(htmlForm); // an array of all input elements in the html form that have the "data-bind" attribute var $fieldArray = $("[data-bind]:input",$templateHTML); // a local reference to a data object (in this case, this.data would be the field data shown // earlier in this article var fdata = this.data; // will hold a reference to the current field var $field = ""; // will hold a reference to the current data item var item = ""; // will hold the fieldArray index var index = ""; // loop over the array of form fields $.each( $fieldArray, function( index ) { // a short reference to the form field $field = $($fieldArray[index]); // look to see if there is a value for a 'data-bind' reference if( $field.attr('data-bind').length ) { var item = $field.attr('data-bind'); // if the field type is text/textfield, it is a straight value assignment if ($field.attr('type') == 'text' || $field.is('textarea') ) { // set the default value for the form $field.attr('value', fdata[item]); // attach an event to listen for changes to the field $field.keyup(function(){ fdata[item] = $(this).attr('value'); }); } // for checkboxes, we need to use :checked else if ($field.attr('type') == 'checkbox') { // check the field if the data value is true/1 if( fdata[item] == 1) $field.attr("checked", "checked"); // assign the event to update the date value $field.click(function() { fdata[item] = $(this).is(':checked') ? 1 : 0; }); // for select statements, yet another assignment type } else if ($field.is("select")) { // this sets the currently selected dropdown value $field.val( fdata[item] ); // assign a change event to update your data object $field.attr("value", fdata[item]).change ( function() { fdata[item] = $(this).attr('value'); } ); } } } ); }

This function both populates the form with the current data in the data object and maintains a connection to the object through keyup, click and change jQuery events.

Selectors are just so sweet to use, and jQuery itself is just a dream.  As my collegue put it, "if you were doing this in plain JavaScript, it just wouldn't be worth doing."  And he's right, without jQuery I wouldn't have even considered tackling the project in the first place.

I should also mention that the Meld FormBuilder application is being built upon Ben Nadel's new (but slick) corMVC jQuery framework.  This really strikes me as a sort of "FW/1 for jQuery" in that it is simple and doesn't muddy the waters with a bunch of complicated functionality.  My version is admittedly a bastardization of his framework (I prefer using straight binding to load views rather than his 'url listener' methodology) but it is an excellent place to start for anybody building an even moderately complicated jQuery single-page/multi-view application.