Prototype JavaScript framework - TimedObserver

Form.Element.Observer

2007-01-07T11:37:00Z

new Form.Element.Observer(element, frequency, callback)

A timed observer for a specific form control.

Form.Element observer implements the getValue() method using Form.Element.getValue() on the given element. See Abstract.TimedObserver for general documentation on timed observers.

Form.Observer

2007-01-07T09:53:00Z

new Form.Observer(element, frequency, callback)

A timed observer that triggers when any value changes within the form.

Form observer implements the getValue() method using Form.serialize() on the element from the first argument. See Abstract.TimedObserver for general documentation on timed observers.

Example

In this example an observer is used to change the appearance of the form if any of the values had been changed. It returns to its initial state when the data is submitted (saved).

Current settings:

<label for="greeting">Greeting message</label> <input name="greeting" type="text" id="greeting" value="Hello world!" />

<input checked="checked" name="login-visible" type="checkbox" id="login-visible" /> <label for="login-visible">allow others to see my last login date</label>
<input name="land-recent" type="checkbox" id="land-recent" /> <label for="land-recent">land on recent changes overview instead of the Dashboard</label>

</form>

Here is the complete JavaScript code for the above example:


new Form.Observer('example', 0.3, function(form, value){
  $('msg').update('Your preferences have changed. Resubmit to save').style.color = 'red'
  form.down().setStyle({ background:'lemonchiffon', borderColor:'red' })
})

$('example').onsubmit = function() {
  $('msg').update('Preferences saved!').style.color = 'green'
  this.down().setStyle({ background:null, borderColor:null })
  return false
}

TimedObserver

2007-01-07T09:51:00Z

An abstract observer class which instances can be used to periodically check some value and trigger a callback when the value has changed. The frequency is in seconds.

A TimedObserver object will try to check some value using the getValue() instance method which isn't defined in this class. You must use the concrete implementations of TimedObserver like Form.Observer or Form.Element.Observer. The former serializes a form and triggers when the result has changed, while the latter simply triggers when the value of a certain form control changes.

Using TimedObserver implementations is straightforward; simply instantiate them with appropriate arguments. For example:


new Form.Element.Observer(
  'myelement',
  0.2,  // 200 milliseconds
  function(el, value){
    alert('The form control has changed value to: ' + value)
  }
)

Now that we have instantiated an object, it will check the value of the form control every 0.2 seconds and alert us of any change. While it is useless to alert the user of his own input (like in the example), we could be doing something useful like updating a certain part of the UI or informing the application on server of stuff happening (over Ajax).

The callback function is always called with 2 arguments: the element given when the observer instance was made and the actual value that has changed and caused the callback to be triggered in the first place.