Discovering JDirt.js

By Jeremy Rowe on 10 06 2012

The Scenario

Once upon a time mega cool Zach Dennis and I set out on an endeavor to conquer the world. Well, kinda. Zach and I were working on an application, when we encountered a situation which made us want to give some useful feedback to the user.

We wanted to be able to enable, disable and highlight form elements as the user interacted with a form. For instance, if the user filled out a form input or modified the application state, we wanted to enable an existing save button. Conversely, we wanted to disable that same save button if the original state was restored. Basically, we wanted to tell the user of the application that they were doing something, furthermore we wanted to bring their attention to new actions that they could take after doing so.

This is a rather simple thing to integrate into a form, so we started down that
path. As we continued to work on the project, we found that we loved the user
experience so much that we decided that we better keep things D.R.Y. (Don't repeat yourself) and extract the diamond in the rough that may be better be known as JDirt.js.

What it does:

  1. Serializes an html element
  2. Signals events on change
  3. Signals events on restoration

What it doesn't do:

  1. Make toast
  2. Your homework

Requirements:

  1. JQuery
  2. JDirt.js
  3. A form or html element that needs some spice in its life.

Sound interesting? Maybe you should check it out.
JDirt