dynamicField: My First "Official" jQuery Plugin
Posted on January 12, 2010 at 1:48 PM in ColdFusion, jQuery
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:
- <input name="phone_1" id="phone_1" type="text" />
- <input name="phone_2" id="phone_2" type="text" />
- <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.
- <cffunction name="buildDynamicFieldList"
- hint="Returns a list of dynamic form fields matching the provided base name"
- returntype="void" output="false" access="public">
- <cfargument name="baseArgName"
- hint="The base argument name"
- required="yes" type="string" />
- <cfargument name="args"
- hint="The arguments struct"
- required="no"
- type="struct" default="#form#" />
- <cfscript>
- var rtn = "";
- var doLoop = true;
- var i = 0;
- while ( doLoop ) {
- i++;
- if ( structKeyExists(arguments.args,arguments.baseArgName & i) ) {
- rtn = listAppend(rtn,arguments.args[arguments.baseArgName & i]);
- } else {
- doLoop = false;
- }
- }
- return rtn;
- </cfscript>
- </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.
- <cfset thePhones = buildDynamicFieldList("phone_") />
- <cfloop list="#thePhones#" index="thisPhone">
- <cfquery datasource="#application.dsn#">
- INSERT INTO
- myTable (phone_number)
- VALUES
- (<cfqueryparam cfsqltype="cf_sql_varchar" value="#thisPhone#" />);
- </cfquery>
- </cfloop>
Documentation & Download
Visit the demo pages for documentation and to download the dynamicField plugin.
Latest Articles
- No recent entries.
Categories
- ColdBox (21) [RSS]
- ColdFusion (92) [RSS]
- Fusebox (3) [RSS]
- General (22) [RSS]
- jQuery (15) [RSS]
- Kalendar (1) [RSS]
- Linux (1) [RSS]
- Mura CMS (1) [RSS]
- Railo (1) [RSS]
- Rants (5) [RSS]
- Transfer (8) [RSS]
- Uni-Form Tag Library (36) [RSS]
Quick Links
Blogs I Read
Calendar
S | M | T | W | T | F | S |
---|---|---|---|---|---|---|
« Jan | ||||||
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 |
Subscribe
Enter a valid email address.
On 4/26/10 at 10:28 AM, Bryon said:
Can this plugin support that capability to create groups of form field elements? That would be great if it could.
On 4/26/10 at 1:42 PM, Matt Quackenbush said:
Part of my "issue" is that I need to figure out how to effectively handle it within the confines of the Uni-Form markup, which is what all of my forms are based upon. As of the moment, I've not really gotten my head around that. Or, perhaps more specifically, I've not yet gotten my head around how to handle it for a wide range of markup styles. Such a thing would not be nearly as useful if it forced one (anyone) into a single markup style. Anyways, I just don't have the time available to me to focus on it. :-(
On 12/9/10 at 6:33 PM, Cesar said:
Thanks for this wonderful plugin. I been using it for a couples of weeks, nevertheless I came across a issue I cannot still figure out. Let's say we have a dynamic field set used to form a sql query. The first dynamic field is a dropdown with "("; the thing is when the "Add Row" button is pressed the new first field must be another dropdown with the values "AND, OR" in order to form a sql where statement with the corresponding AND or OR operator.
There is a simple way to achieve this task with the dynamicField plugin?
On 12/26/10 at 6:28 PM, cale said:
On 2/11/11 at 4:48 PM, William said:
I grabbed your plugin and I am trying to use it. I get an error "Uncaught TypeError: Cannot call method 'replace' of undefined" when it tries to execute this;
baseName: f.children("input")
.attr("name")
.replace(/^(.+[_-])([0-9]+)$/,"$1"),
Do the class, id, name attr matter explicitly? This looks like a nice plugin.
Will
On 2/11/11 at 4:55 PM, Matt Quackenbush said:
But check to make sure you have the attribute(s) in question.
HTH
On 2/16/11 at 2:27 AM, netgenerator said:
On 3/8/11 at 7:42 PM, sdfor said: