Question

I need to use JQuery in order to detect the changes on a text file, so some ajax is invoked.

The trick is that I don’t really want to bind this action to the blur or keyup events; The former is too cumberstone for the user and the second is “too inmediate”: the user types new keys before the ajax call has been completed, so the user experience isn’t great (so the answer on this SO question does not apply on my case).

What I need is some code that checks whether the field value has changed, but periodically (i.e. every 0.5 seconds). I’d like to use the same code on several fields, calling different ajax functions, with different frequencies, so reuse is really a plus here.

On Rails I had observe_field (internally uses Prototype’s Form.Element.observer, I think) that did just this. How can I accomplish the equivalent thing on JQuery?

Answer 1

I ended up rolling my own jquery plugin.

It is (loosely) based on Mic’s implementation.

Created a github project for it:

http://github.com/splendeo/jquery.observe_field

Main differences with Mic are:

• I’m using jQuery’s methods instead of native ones in a couple places.
• I don’t activate/deactivate detection onblur and onfocus. This way I can track changes done with code (rails’ observe_field does this, and I wanted to mimic it)
• I reset the timer on each onkeyup. I needed this in order to play nicely with mobile devices, such as the iphone.

Quick snippet:

$(function() {
  // Executes a callback detecting changes with a frequency of 1 second
  $("#item1").observe_field(1, function( ) {
    alert('Change observed! new value: ' + this.value );
  });
});