cfUniForm v2.5 - New jQuery Plugin Integration and Enhancements

Posted on October 2, 2008 at 2:56 AM in ColdFusion, Uni-Form Tag Library, jQuery

The latest release of the cfUniForm custom tag library features a new jQuery plugin integration, as well as enhancements to the jQuery plugin integrations.

New Integration: jQuery's prettyComments Plugin

Many thanks to Bob Silverberg for contributing this great new integration. While I don't particularly care for the name of the prettyComments plugin, I sure love what it does. Simply stated, it scales textareas to fit the text that has been entered. To use it, simply set the 'loadTextareaResize' attribute to true on your form.

  1. <uform:form action="#cgi.script_name#"
  2. id="myDemoForm"
  3. loadTextareaResize="true">

Now all of your textareas will scale to fit.

"But what if I don't want all textareas on the form to scale?"

No worries, you're covered. Just set the 'textareaResizable' attribute to false on any textareas that you do _not_ want to scale.

  1. <uform:field label="My Textarea"
  2. type="textarea"
  3. textareaResizable="false" />

Plugin Enhancement

While the cfUniForm library has had integrated support for a number of jQuery plugins since the 2.0 release back in June, it has just been basic integration. Some plugins require any "setup" parameters to be declared within the calling code that initiates the plugin for the matching selectors. In previous versions, no mechanism was in place to support this. But now, with the 2.5 release, you can do so!

To support this, there are two new attributes on the form tag:

  1. dateSetup
  2. timeSetup

There is also a new attribute on the field tag:

  1. pluginSetup

Let's look at the Date Picker plugin as an example. If you just load the date picker with its defaults, the Year select box will be populated with the current year selected by default, along with options to select a year within ten years (backwards or forwards) of the current year. Sometimes that year range simply does not make sense. Enter the new 'dateSetup' attribute on the form.

  1. <uform:form action="#cgi.script_name#"
  2. id="myDemoForm"
  3. loadDateUI="true"
  4. dateSetup="{yearRange: '1927:#year(now())#'}">

Any setup parameters supported by the plugin can be passed in via this new attribute. In the example above, we've told cfUniForm to pass in a year range from 1927 to the present year.

"Quack," you lament, "you're not getting it. What if I have 5 different date fields on my form, and I need a different year range for 1 of them?"

Sure, I get that, too. That's why you can either pass in global setups via 'dateSetup' as above, or you can use the new 'pluginSetup' attribute on the field itself. Hell, if you want to get really creative, you can use both if you want!

  1. <uform:field label="Appointment Date"
  2. type="date"
  3. pluginSetup="{yearRange: '#year(now())#:#year(dateAdd('yyyy', 1, now()))#'}" />

In this example, we've simply used the 'pluginSetup' attribute to pass in a year range of this year and next year to the field itself. This range will only affect this particular field.

I'm not going to bother with an example in this post, but the exact same thing that we've just seen with the date picker plugin can be accomplished with the time entry plugin. To set global parameters, you would use the 'timeSetup' attribute on the form tag, and for field-specific parameters, simply use the 'pluginSetup' parameter on the field, just as we did above.

Demo and Plugin Setup Parameters

Demos of the cfUniForm library are available here.

Information on the setup parameters for the plugins can be found at the following links:

Summary

I'd like to again say "Thank you!" to Dan Wilson and Bob Silverberg for their continued contributions to cfUniForm, as well as "Thank you!" to all of you who are putting it to use in your applications.

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

On 10/2/08 at 1:16 PM, Joshua Rountree said:

I have a large church management system we're developing and is currently in alpha test stages with several churches across the world. I'm curious if it would make sense to implement this into all the forms of this management system to make everything more untuitive.

Currently our forms use CFC beans to validate against the data structure for fields and we then output that in slideUp/slideDown jquery messages that popup at the bottom. I like how I'm doing it now and the error handling is awesome for what we're doing but is there a way to just implement the styles/effects/hints for the forms. I do like how your error validation is on the fly vs waiting for saving.

I just don't want a lot of overhead to implement this type of new thing.

On 10/2/08 at 2:14 PM, Matt Quackenbush said:

@Joshua-

I see no reason why you could not easily integrate everything except for the error messages. The 'errors' attribute is completely optional. If you don't provide that attribute, you should be able to keep your validation handlers exactly as you have them now.

On 10/6/08 at 11:25 AM, SaravanaMuthu said:

Hi Matt,

How can i call the validation function explicitly without clicking the submit button in the uniForm?

On 10/6/08 at 11:38 AM, Gerald Guido said:

Great stuff Matt. Looking forward to using the new features. The time picker is one of the best I have seen. Nice score.

On 10/6/08 at 12:07 PM, Matt Quackenbush said:

@ Saravana-

You would need to write a jQuery script to handle that. Docs for the jQuery validation plugin can be found here: http://docs.jquery.com/Plugins/Validation

@ Gerald-

Thanks for the kind words, glad you are finding the library useful. And, with regard to the time entry and date picker plugins, thanks goes to Dan Wilson for finding them and submitting those two gems. ;-)

On 10/8/08 at 10:42 AM, Chris said:

Matt,

Is there a way to display form fields into columns?

ie.
First Name:__________ Last Name:____________

I tried putting the tag into a table but that threw an error.

On 10/8/08 at 2:35 PM, Matt Quackenbush said:

@ Chris-

No. The Uni-Form markup has two basic layouts: inlineLabels and blockLabels.

http://www.sprawsm.com/uni-form/

On 11/3/08 at 11:09 AM, Tom K said:

Thanks for your hard work on this - I love the set of tags;

One catch I've hit - how would I change the datepicker mask? - i.e I use the UK dd/mm/yyyy syntax, or somethimes yyyy-mm-dd

How might I implement that?

Thanks!

On 11/3/08 at 2:55 PM, Matt Quackenbush said:

@ Tom K -

You should be able to utilize the pluginSetup attribute on the field tag, and follow the syntax set forth in the Datepicker docs (http://docs.jquery.com/UI/Datepicker/datepicker#op...).

pluginSetup="{dateFormat: 'dd/mm/yyyy'}"
pluginSetup="{dateFormat: 'yyyy-mm-dd'}"

Or, if you want all date fields on the form to follow the same date convention, use the dateSetup attribute on the form tag.

dateSetup="{dateFormat: 'dd/mm/yyyy'}"
dateSetup="{dateFormat: 'yyyy-mm-dd'}"

On 11/3/08 at 3:02 PM, Tom K said:

That's really helpful - many thanks!

On 11/7/08 at 1:26 PM, Justin said:

Hi there,

I was wondering if this allows customization of the jquery validate? I have used coldfusion, uniform, and jquery validate all separately in the past. I just want to make sure that I can still do the $.(#myForm).validate() in the <script> tag.

On 11/7/08 at 1:52 PM, Matt Quackenbush said:

@ Justin - I'm not exactly sure what you're asking, but I'm inclined to say that the answer is 'yes'. If you have specific rules that you want to write, there should be nothing preventing you from doing so. If you have tried something that doesn't behave as you anticipated, please post back with more details.

On 11/8/08 at 10:38 PM, George said:

Hi Matt, very nice library. I want to use this in Mach-ii.
I am having an issue trying to get the error messages not to display
when I go to the page. I have added form.fieldname param tags like your
example. This is what my form parameters look like.
<uform:form action="#BuildURL('processLoginAttempt')#" method="post" id="myForm" errors="#errs#" loadjQuery="true" loadValidation="true" errorMessagePlacement="both">

On 11/9/08 at 1:26 AM, Matt Quackenbush said:

@ George- If error messages are being displayed, it is because your errors struct (#errs#) contains keys with names matching fields in your form. The errors struct should only be populated after the form is submitted and validation fails.

HTH

On 1/2/09 at 1:25 PM, George said:

Hi Matt, I am at the point where there is a need to use a RTE in cfuniform. I am trying to make a decision on which one to use. I need something with an image upload plugin. I'm not sure if I can use the built in FCK Editior inside of ColdFusion 8 with CFUniform.
I'm prety sure that I can use TinyMCE but I do not know of a ColdFusion image upload plugin for TinyMCE. Do you or any of your readers have any suggestions? Thanks for your response.

On 1/2/09 at 2:26 PM, Matt Quackenbush said:

@ George - You will not be able to use the built-in FCKEditor, since it requires <cfform>, however you can certainly download the latest FCKEditor and use it.

<uform:field label="My Editor"
         type="custom">
   <!--- call FCKEditor --->
   <cfmodule template="/fckeditor/fckeditor.cfm" />
</uform:field>

See the FCK docs for more info on using it with ColdFusion. http://docs.fckeditor.net/FCKeditor_2.x/Developers...

On 1/27/09 at 1:59 PM, George said:

Hi Matt, thanks for all of your great work on this library. I am explorering it more and more. Say, how do I control what the cancel botton does? For example, I would like for it to go back to the refering page. Should I use cgi or javascript and where do I access this at?

On 1/27/09 at 5:27 PM, Matt Quackenbush said:

@ George - In my applications, when the request hits the controller, if the user clicked 'cancel', I skip the validation and reroute the request to wherever it should go to after canceling. I've not tested this (since I let my controller handle it server-side), but you should be able to add a little snippet of javascript after the form to provide instructions on where/how to handle the cancel button.

HTH.

On 1/27/09 at 11:25 PM, George said:

Hi Matt, I know I can do this with javascript:history(-1); in an onlick event. Not quite sure on how to implement your suggestion. Right now my cancel button submits to the action page and it is not a self posting form.

On 1/27/09 at 11:35 PM, Matt Quackenbush said:

@ George - Correct. In my controller (or action page in your situation), I do something like the following...

<cfif not structKeyExists(form, "cancel")>
<!--- process it like normal --->
<cfelse>
<!--- redirect to wherever they should be sent to --->
</cfif>

On 4/14/09 at 5:38 PM, George said:

Hi Matt, I would like to do a date range from 1990, 1991, etc until Now()
How might I accomplish that in the plugin? Thanks so much!

On 4/14/09 at 6:16 PM, Matt Quackenbush said:

@ George - Take a look at the examples in the post above. They both show exactly how to do that. :-)
CodeBassRadio

Latest Articles

Eventually something really brilliant and witty will appear right here.

Calendar

May 2022
S M T W T F S
« Apr  
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
29 30 31        

Subscribe

Enter a valid email address.

The Obligatory Wish List