QuackFuzed [ Ramblings of a Con..ColdFuzed Mind ]

dynamicField: My First "Official" jQuery Plugin

Posted on January 12, 2010 at 1:48 PM in jQuery, ColdFusion

Anyone that knows me knows that I hate doing UI work. Why? Because I suck at it. Graphics, design, and layout are definitely not among my talents. Which is why I love jQuery so much. I can write a little bit of JavaScript - very little, in fact - add a plugin or two, and voila! I have a nice looking user interface for my application.

After using a few very handy form-related jQuery plugins and integrating them into my cfUniForm library, I decided it was time I go ahead and release a plugin of my own.

Awhile back I was building a form to handle one of my domain objects. Then I realized, "Oh, crap, I need to somehow model this one-to-many relationship in my form!" Off to Google and the jQuery plugin site I went. My search yielded... absolutely nothing. Hence dynamicField.js was born.

I will not bother with form code in this post, as there are samples on the demo pages, but I did want to offer up a little bit of server-side example code for those who happen to be using CFML.

For our example, let's use "Phone" as our dynamic field. We are going to use 'phone_' as the base name for our phone form fields, to which the plugin will automagically append a number to, representing the order of the provided phone numbers. So, for example, if there are three (3) phone numbers submitted, the plugin will create the following three fields:

1. <input name="phone_1" id="phone_1" type="text" />
2. <input name="phone_2" id="phone_2" type="text" />
3. <input name="phone_3" id="phone_3" type="text" />

When the form is submitted, the FORM struct in ColdFusion will have three keys (phone_1, phone_2, and phone_3) in it which contain our phone numbers. Since our code does not know how many will be submitted, we need to handle that dynamically. By utilizing a helper method such as buildDynamicFieldList() shown below, we can quickly and easily grab a list of the matching fields that were submitted and process them.

1. <cffunction name="buildDynamicFieldList"
2. hint="Returns a list of dynamic form fields matching the provided base name"
3. returntype="void" output="false" access="public">
4. <cfargument name="baseArgName"
5. hint="The base argument name"
6. required="yes" type="string" />
7. <cfargument name="args"
8. hint="The arguments struct"
9. required="no"
10. type="struct" default="#form#" />
12. <cfscript>
13. var rtn = "";
14. var doLoop = true;
15. var i = 0;
17. while ( doLoop ) {
18. i++;
20. if ( structKeyExists(arguments.args,arguments.baseArgName & i) ) {
21. rtn = listAppend(rtn,arguments.args[arguments.baseArgName & i]);
22. } else {
23. doLoop = false;
24. }
25. }
27. return rtn;
28. </cfscript>
29. </cffunction>

Once you have your list, simply loop over them and do whatever it is you need to do. Here is a very basic example of grabbing a list and inserting the phone numbers into a database table.

1. <cfset thePhones = buildDynamicFieldList("phone_") />
2. <cfloop list="#thePhones#" index="thisPhone">
3. <cfquery datasource="#application.dsn#">
4. INSERT INTO
5. myTable (phone_number)
6. VALUES
7. (<cfqueryparam cfsqltype="cf_sql_varchar" value="#thisPhone#" />);
8. </cfquery>
9. </cfloop>

Documentation & Download

Visit the demo pages for documentation and to download the dynamicField plugin.

Comments

(Comment Moderation is enabled. Your comment will not appear until approved.)

There are no comments for this entry.

[Add Comment]