jquery: observe field with frequency

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 );
  });
});

Answer 2

Here's a solution that use a simple JS function: How do I grab the value from an html form input box as its being entered?
You can use the $(...).focus(...) call to use it with jquery if you like.

At the onfocus on the field, there is a periodic check if the value has changed, if so, the callback function "after" is called.
When leaving the field, at the onblur the polling is stopped.

This will work even if the user makes some indirect changes like undo/redo or copy/paste in the field.

Answer 3

You can set a timer to check every n seconds an input, there is a plugin for jQuery which will give more control over timers.

http://jquery.offput.ca/every/