QuackFuzed [ Ramblings of a Con..ColdFuzed Mind ]

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:

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.)

On 4/26/10 at 10:28 AM, Bryon said:

It would be great if this could handle groups of form elements. For example, say I want a phone number text field, but I would also like a drop down which is associated with that text field... say "Type" where it could be "Home", "Work", "Mobile", etc.

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:

@ Byron - I have not yet had an opportunity to dig into adding support for a "group" of form elements. I definitely plan to do so at some point, but I currently just have too many other things that are sucking up my time.

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:

Hello Matt,

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:

i agree with bryon... im also trying to write an app that has multiple phone numbers and a phone type for each phone number (work, mobile, office)

On 2/11/11 at 4:48 PM, William said:

Matt,

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:

@ Will - It sounds like you do not have a 'name' attribute on one (or more) of your inputs. The plugin is wired to require that attribute. As for the other attributes mentioned, I'm not sure off the top of my head. To be honest, I haven't looked at or even used the plugin in a very long time, so my mind has pushed a lot of other things ahead of it in the memory banks. ;-)

But check to make sure you have the attribute(s) in question.

HTH

On 2/16/11 at 2:27 AM, netgenerator said:

Hey nice plugin, thanks for sharing! I think I'll use it for my next project. Keep on coding :)

On 3/8/11 at 7:42 PM, sdfor said:

Thanks for your work! There may be issues with the remove when I use the plugin for more than one set of dynamic fields within one page. I had to make a changes to the binding of the click event for the remove, though my change is specific and not general enough for general consumption.

[Add Comment]