Thought Delimited

A few days ago, I received an e-mail informing me that there was a bug in my dirtyFields jQuery plugin having to do with the plugin's evaluation of checkbox and radio button state (the plugin lets you track the state of form elements and highlight changes).

At first, I didn't see the problem and didn't understand the need for the code suggestion he provided because the demo file included in the plugin download worked just fine.  But then I realized that the demo was coded to use an older version of jQuery (the plugin is over 2 years old now), and once I updated the demo to use jQuery 1.7 I could see the problem.

I had coded the plugin to use the jQuery attr() function to check the selection state of checkboxes, radio buttons, and the option elements in <select> elements.  Prior to jQuery 1.6, code like myCheckbox.attr("checked") would return a Boolean value based on whether the checkbox was currently checked or not.  But that changed in jQuery 1.6: now (in 1.6 and higher), myCheckbox.attr("checked") only returns the initial value of the "checked" attribute of the element ("checked" rather than "true"), and returns undefined if the checkbox/radio button element does not possess the checked attribute at all.  The same hold true for the "selected" attribute of option elements.  In jQuery 1.6 and higher, the new prop() function is designed to return the current state of the selected attribute (this change to jQuery is in fact described on the API page for prop()).

So I updated the plugin to use the is() function in conjunction with the ":checked" and ":selected" selectors to evaluate checkbox, radio button, and option state, since that method works with both older and newer versions of jQuery.  The new version of the plugin is available from its dedicated download page and from GitHub.

A client recently requested a new feature in an existing web app that would allow users to set an annual date for applying to an academic program.  I wanted to give the users the ability to set the date with a datepicker widget (so they could see if the date they were selecting was a weekday or not, for example), but I didn't want the datepicker to return a year because they wanted the option of keeping the month and day the same year after year.

My datepicker widget of choice is the jQuery UI Datepicker, but I wasn't 100% it would give me the option to leave off the year.  So I checked and found out that yes, by using the dateFormat() function of the datepicker, I could format the date returned by the widget to leave off the year:

http://jqueryui.com/demos/datepicker/#date-formats

The first time I created a UI where users could create new jQuery UI Datepicker widgets on the web page as needed, I thought about blogging about some of the "gotchas" I ran into trying to do that, but never got around to it.

But after today, when I had to relearn those lessons, I figured I should write something down.  :)

Here's what I've observed about creating new (multiple) Datepicker widgets on the fly:

• Cloning a text field that already has the Datepicker applied to it won't work.  You're better off either cloning a "plain" text input element (<input type="text">) or creating one from scratch when you need it.

• If there's any chance that you're going to end up with multiple Datepicker widgets on the page, you need to make sure that each Datepicker-powered text element ends up with a unique value in the "id" attribute.  Otherwise, the user will click on a date on the pop-up calendar for the most recently-added Datepicker widget, but it'll change the text box value of the first Datepicker widget you added!

  One way to address this is to add a global numeric variable at the top of your Javascript block, increment it every time you want to add a new Datepicker, and combine the current value of that variable with some text and assign that as the id of the text element you're about to add as a Datepicker.

• Do not invoke the datepicker() function (the function that turns the text field into a Datepicker widget) on the new text input element until after it has been added to the page:  clone or create your text input first, place it in the page using prepend(), append(), whatever, and then invoke the datepicker() function on it.

• If you need to remove one of the Datepicker widgets, use the datepicker("destroy") method on it.

I suspect there aren't too many users of my textCounting jQuery plugin, but if you do happen to use it, I wanted to point out a small update I made to it today.

Previously, the plugin was configured by default to look for the letter or word limit for your textarea control in an attribute called "maxLength."  That used to be a safe attribute name because browsers did not enforce the maxlength attribute on textrareas, only single-line text inputs.  But that's no longer the case with Safari:  if you put a maxlength attribute value of "100" on a textarea, Safari will prevent a user from entering more than 100 characters in that textarea.

So I changed the default attribute setting in the plugin to "maxTextLength" to avoid this issue.  To avoid this issue with Safari, you can either download the updated plugin files, or simply use the settings option in the previous version of the plugin to change the attribute name used by the plugin on a case-by-case basis.  In either case, you'll have to make sure you use "maxTextLength" instead of "maxLength" as an attribute in your textareas.

This past week I was asked to build a simple suggestion box web app.  The people responsible for reviewing the suggestions wanted to be able to filter the suggestions by keyword and by date range.

Having used the dataTables jQuery plugin in previous projects, I knew that it could take care of the keyword filtering requirement, but I had never used it to filter out rows that didn't fall into a date range.

I did some research and found enough information to get it working, but since I didn't come across any single crystal-clear example or demo for it, I figured I'd throw one together to illustrate it.  You can check the source code to see what's going on under the hood. I also used the jQuery UI Datepicker plugin to make the date range boxes more user-friendly.  Here's the URL:

http://www.thoughtdelimited.org/thoughts/demos/dataTablesDateRange/