Javascript Field Monitor

Sun Feb 24 09:36:20 -0800 2008

While working on a recent Ruby on Rails project, I needed to be able to check the changes in the forms that were appearing on the page and highlight those fields on change. I looked around and couldn’t really find anything I liked, so I made one.

This script is about 30 lines of code, or 594 bytes minified. What it does is provides a Prototype observer on every field of every form on your page.

It then fires off a little script that adds “changed_field” to the class of that element if the field has been changed to a value that is different to the original value when the page was loaded.

This is done by comparing the original value on page load to the new value on change.

I have made it into a zip file that includes the javascript in an external file, a sample css file as well as a samle web page with a basic form on it to show you how it works. The zip file also includes a minified version as well as a copy of prototype 1.6.0.2 so you don’t have to download it separately and you can see it working “out of the box”.

Install It!

If you want to put it in a static web page, you need to do the following:

Put the following in your HEAD tag of your web page:

1
2
3
4
5
6
7

  <script type="text/javascript" src="prototype-1.6.0.2.js"></script>
  <script type="text/javascript" src="field_monitor_mini.js"></script>
  <script type="text/javascript" charset="utf-8">
    document.observe('dom:loaded', function() {
      $$('form').each(function(form) { new FieldMonitor(form); });
    });
  </script>

This then loads the filed_monitor javascript, the prototype library and then fires of a document observer to create a field monitor for every form on the page once the DOM has loaded.

If you don’t want to do every document on the page, you can just specify one form by it’s ID like so:

1
2
3

  <script type="text/javascript" charset="utf-8">
    new FieldMonitor('form-id');
  </script>

Reload your page and you should be working.

Ruby on Rails Integration

As I made this to work with Ruby on Rails, it is actually insanely simple to do. You can do the static version per the above by copying the file_monitor_mini.js file into your public/javascripts directory and then just putting the following into your layouts/application.html.erb file:



  <% javascript_include_tag 'field_monitor_mini.js' %>

Then, you can either put the new FieldMonitor(‘form-id’) code in your layouts/application.html.erb file, or if you are using RJS Templates, put the following in your RJS:



page << %[new FieldMonitor('form-id');]

And all should be good.

Download It!

You can download Field Monitor here.

Let me know if you find it useful!

blogLater

Mikel

  1. John Says:
    Mon Jun 23 07:33:43 -0700 2008

    Hey Mike,

    Looks interesting…

    I am looking for a way to monitor each field instead of an entire form to do real time saving. This looks like it might be closing in on what I might need to do.

    Do you have an example of using your field-monitor to submit an update back to a controller/action for each field separately instead of the entire form?

    Thanks,

    John

  2. mikel Says:
    Mon Jun 23 17:06:01 -0700 2008

    Heya John,

    No, I don’t have some sample code, but that wouldn’t be too hard, you would have to get down and dirty with some Ajax calls directly, but it wouldn’t be hard calling ‘Ajax.new…’ and putting in a url and link etc in a javascript hash table and then looking up and making the appropriate call per field….

    That actually sounds like an interesting way to go, you’d get instant saves on every field :)

  3. Brian Hartin Says:
    Tue Mar 31 11:54:02 -0700 2009

    Mike,

    Thanks for publishing this. I was just about to write something similar so I could display an ‘unsaved changes’ indicator and I think this will save me some effort.

    Brian

  4. Brian Hartin Says:
    Tue Mar 31 14:04:02 -0700 2009

    For compatibility with prototype 1.5.0, if you’re bound to that (perhaps by using an older version of Rails):

    var FieldMonitor = Class.create(); FieldMonitor.prototype = { initialize:function(e) { this.e = $(e); this.f = this.e.getElements(); this.iFC(); },

    iFC:function() {
    oVs = new Hash();
    this.f.each(function(e) {
        oVs[e.id] = $F(e);
    });
    this.f.each(function(e) {
        new Form.Element.EventObserver(e, function(f, v) {
            var oV = oVs[f.id];
            if (oV === v) {
                f.removeClassName('changed_field');
            } else {
                f.addClassName('changed_field');
                alert('changed');
            }
            ;
        })
    })
}};

Leave a Reply