Painless JavaScript Using Prototype [JavaScript & DHTML Tutorials] Form.Observer and Form.Element.Observer allow you to watch a form (or, in the latter case, a single form element) and trigger callbacks when the data changes. There are actually two flavours of each observer that check for value changes. The first is a periodic observer, which works like this: new Form.Observer($("myform"), 1, myCallBackFunction); new Form.Element.Observer($("myfield"), 1, myCallBackFunction); These observers check every second whether or not the data has changed and, if it has, will call myCallBackFunction. The second type of observer is event-based and will only perform the check when change or click events are produced for the elements. New Form.EventObserver($("myform"), myCallBackFunction); new Form.Element.EventObserver($("myfield", myCallbackFunction); If all the fields in the form you're observing support an event handler, this is a much more efficient way to observe the form.
Working the DOM The Element Object See the full list at Sergio Pereira's site. "Finally! " Prototype Meets Ruby: A Look at Enumerable, Array and Hash. Not to long ago, Prototype implemented some Ruby-like features, most notably Enumerable . This makes Javascript much more pleasant to deal with, but currently there is almost no documentation on how to use these features. Luckily, Sam believes in testing his code and he has some test cases lying around his darcs repository that helped me get up to speed.
I’ll try to explain some of the methods in this post. I’m going to start out with this sample data that all of the examples will be based off of. I’m also using a Javascript Logger that I’m still actively developing and thus is still very much unfinished, but for the moment it can help me get through this article. each and friends I used to find myself writing a lot of for loops. For ( var i = 0; i < F.Numbers.length; i++ ) { logger.info ( F.Numbers[i] ) ; } each allows us to iterate over these objects Ruby style. F.Numbers.each ( function ( num ) { logger.info ( num ) ; } ) ; 0 1 4 5 98 32 12 9 Hash key/value pairs “this” inside iterators. Development » Update: Reorganizable DataGrid built on Ajax / Smarty / Prototype / Scriptaculous.
May 30th, 2006 Author: Lindsey Simon Welcome! Since many of you are arriving here from a recent mention on Ajaxian I wanted to let you know about a more bandwidth-optimized, working prototype of an XSLT version of this component – this is the direction I really want to see this grid move in! Updated to version 0.3 Download: DataGrid-0.3.tar.gz (check out the QuickSearch filter feature by rightclicking on the “Owner” column!)
Note: Vendor column is intentionally non-draggable, non-reorderable, and non-resizable. Changes * Simpler template design for right-click column menus * Patch to script.aculo.us allows mouse dragging outside of the Sortable container to update the list ( delay_and_ignorePosition_forSortables.diff , Functional Test of the patch ) * Improved speed on column reordering and resizing * Removed a div inside the data table td’s which made an incredible speed boost to IE’s rendering * Recoded some of the for loops to use do {} while structures * General cleanup Notes. Prototype Javascript Library easing the development of dynamic web applications.