Entries Tagged as 'Downloads'

dirtyFields jQuery Plugin Updated with New Options/Functions

Downloads , JavaScript , jQuery 1 Comment »

I've made some updates to my dirtyFields jQuery plugin.  Here's the rundown:

  • Added two new public functions:
    • getDirtyFieldNames() returns an array of all currently dirty fields.
    • updateFormState() checks the clean/dirty state of all form fields in the specified container
  • Made two changes to how the CSS class denoting a dirty/changed form is applied:
    • Added a new configuration option ("self") to apply the class to the actual form element.
    • Split the single option for applying a style to a changed text input and select drop-down into two separate options for granular control (if you used the textboxSelectContext option with a previous version of the plugin, you will need to update your code).
  • Added three new configuration options to control plugin behavior:
    • The denoteDirtyFields option controls whether or not the dirty CSS class is applied to the form elements that are dirty/changed.
    • The exclusionClass option specifies the name of the CSS class that, when applied to a form field, will exclude that field from being processed by the plugin.
    • The ignoreCaseClass option specifies the name of the CSS class that, when applied to a form field, will instruct the plugin to do a case-insensitive evaluation of the current and original states of the field.

All of these changes were implemented in response to code suggestions made a team of developers (listed in the GitHub readme.txt file) who modified the plugin to meet their specific needs in one of their intranet sites.

dirtyFields jQuery Plugin Updated To Fix jQuery 1.6 Compatibility Issue

Downloads , JavaScript , jQuery No Comments »

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.

Google Plus One Mango Blog Plugin Now Available

ColdFusion , Downloads 1 Comment »

The other day Lola J. Lee Beno shared on Google+ the link to Google's API page on how to add the Google "+1" button to your site.  It looked simple enough, so I figured I would go ahead and add the code to my blog so folks could "+1" my posts if they wanted to.

Then I remembered that I'm running Mango Blog, and while it's certainly possible to hack (err, "customize") the display files, the proper way to add new features like social networking buttons to the posts is with Mango plugins.

I knew how to install and use Mango plugins, but not how to write them.  What was I about to get myself into?

I found a Mango plugin called Twitter Retweet created by Nick Simone that did the same thing I was trying to do, only with Twitter.  By following his code and consulting the Mango documentation on plugins, I was able to create my Google Plus One plugin in an hour or two.  The only problems I ran into were ones of my own creation (the kinds of mistakes you can make when writing code late at night).  So now I have both the Twitter Retweet and Google Plus One plugins running on my blog.

I've submitted my plugin for consideration for the official Mango Blog plugin list on the Mango Blog site, but until it gets posted there Mango Blog users can download/install the plugin from the following URL:


I've also put the code up on Github so that anyone who wants to fork it or improve on it can do so:


Sorting a Nested List Using jQuery And Saving the Changes

Downloads , JavaScript , jQuery , Web development 10 Comments »

A screenshot of the sorting demoA reader asked me if it was possible to sort/rearrange items in nested lists (lists within a main list) using the jQuery UI Sortables code. I told him that it was, and I had actually created a tool for a client recently that made use of that feature.

He wanted to know more about how to do it, so I went ahead and created a downloadable working demo of how to do it.You can view an on-line version of the demo (and get the downloadable zip file) here:

Nested List Sort Demo

The drag-and-drop action that lets you move the items around is the easiest part, as that's simply the Sortables code doing its work. Most of the work involved the code that generates the list for display (written in ColdFusion but do-able in other languages) and the JavaScript code that leverages the core jQuery selectors to scan the list and create a string of data that represents the structure and order of entire list. Both sets of code use a recursive function anytime a nested list is encountered, making it possible to have an unlimited number of nested lists within the main list or any other nested list.

The hierarchy structure is tracked/described through the use of parent ids. Each item in the list has a database record that includes the unique record id of its parent (with items in the main list having a parent id of 0). The JavaScript code records the id of the parent DOM element for each item as it scans the list, and that information becomes part of the string that is submitted via the form. The order of the items is simply the byproduct of the JavaScript code traversing down the list.

Like the tool I wrote for rearranging items in a single list, this is simply another means of letting users rearrange the display of records when the order of display can be arbitrary or a matter of preference rather than a strict alphanumeric sort.

UI Tool: Rearranging Items in a List, jQuery-style!

CSS , Downloads , JavaScript , jQuery 3 Comments »

A few weeks ago, as part of an application prototype for a client, I used the fairly new jQuery UI library to create a UI tool where a user could rearrange a list of items by dragging and dropping them into different positions and then save those changes to the database.

I now have a public example posted and available for download--check it out using the link below:

List Sort Control (with jQuery)

It works in FireFox, IE, and Opera, and can be used in conjunction with any web application programming language.