Module Timed Observer
Timed Observer <ul><li>An abstract observer class which instances can be used to periodically check some value and trigger...
Form.Element.Observer  <ul><li>new Form.Element.Observer(element, frequency, callback) </li></ul><ul><li>A timed observer ...
Form.Observer  <ul><li>new Form.Observer(element, frequency, callback)  </li></ul><ul><li>A timed observer that triggers w...
Form.Observer  <ul><li>Example ; </li></ul><ul><li>Here is the complete JavaScript code  </li></ul><ul><li>new  Form.Obser...
Upcoming SlideShare
Loading in …5
×

Timedobserver

586 views

Published on

Prototype Javascript

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
586
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Timedobserver

  1. 1. Module Timed Observer
  2. 2. Timed Observer <ul><li>An abstract observer class which instances can be used to periodically check some value and trigger a callback when the value has changed. </li></ul><ul><li>The frequency is in seconds. </li></ul><ul><li>A TimedObserver object will try to check some value using the getValue() instance method which isn't defined in this class </li></ul><ul><li>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. </li></ul><ul><li>  </li></ul>
  3. 3. Form.Element.Observer <ul><li>new Form.Element.Observer(element, frequency, callback) </li></ul><ul><li>A timed observer for a specific form control. </li></ul><ul><li>Example; </li></ul><ul><li>new  Form.Element.Observer( 'myelement' , 0.2 ,  // 200  milliseconds </li></ul><ul><li>     function (el, value){alert( 'The form control has changed value to: '  + value)}  </li></ul><ul><li>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 </li></ul><ul><li>The callback function is always called with 2 arguments: </li></ul><ul><li>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. </li></ul><ul><li>  </li></ul>
  4. 4. Form.Observer <ul><li>new Form.Observer(element, frequency, callback)  </li></ul><ul><li>A timed observer that triggers when any value changes within the form. </li></ul><ul><li>Form observer implements the getValue() method using Form.serialize() on the element from the first argument </li></ul><ul><li>In the following 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). </li></ul>
  5. 5. Form.Observer <ul><li>Example ; </li></ul><ul><li>Here is the complete JavaScript code </li></ul><ul><li>new  Form.Observer( 'example' ,  0.3 ,  function ( form , value){ </li></ul><ul><li>$( 'msg' ).update( 'Your preferences have changed. Resubmit to save' ).style.color =  'red' </li></ul><ul><li>form.down().setStyle({ background: 'lemonchiffon' , borderColor: 'red'  }) </li></ul><ul><li>}) </li></ul><ul><li>  </li></ul><ul><li>$( 'example' ).onsubmit =  function () { </li></ul><ul><li>$( 'msg' ).update( 'Preferences saved!' ).style.color =  'green' </li></ul><ul><li>this.down().setStyle({ background: null , borderColor: null  }) </li></ul><ul><li>return   false </li></ul><ul><li>} </li></ul>

×