Tuesday, January 23rd, 2007

WHATWG Web Forms 2.0 Repetition Model Implementation

Category: JavaScript, Library

Weston Ruter has created a cross-browser JavaScript implementation of the WHATWG Web Forms 2.0 Repetition Model after taking to heart the spec that annotates:

The entire model can be emulated purely using JavaScript and the DOM. With such a library, this model could be used and down-level clients could be supported before user agents implemented it ubiquitously. Creating such a library is left as an exercise for the reader.

A simple example is:

  1. <tr id="order" repeat="template">
  2.       <td><input type="text" name="row[order].product" value=""/></td>
  3.       <td><input type="text" name="row[order].quantity" value="1"/></td>
  4.      </tr>

Read the spec for more details, such as the add/delete/moveup/movedown features.

Posted by Dion Almaer at 10:00 am

3.6 rating from 36 votes


Comments feed TrackBack URI

This implementation rocks! So, easy to use it brings a tear to me eye .

Comment by Fred Clown — January 23, 2007

I found a couple issues in version 0.8 that I am now working to resolve. I should have 0.8.1 released by tomorrow (the 24th). The list of needed fixes are listed on the changelog (see link above). One of the issues has to do with an error being raised when using it with Prototype in MSIE.

Comment by Weston Ruter — January 23, 2007

Version 0.8.1 has been released which includes a number of fixes as well as a new feature: ensuring that form fields within the repetition template are not ‘successful’. Here is the changelog for 0.8.1:

1. Fixed moveRepetitionBlock algorithm so that move-up and move-down buttons are disabled if the repetition block could not be moved any higher according to the algorithm.
2. Fixed step 5 of moveRepetitionBlock algorithm so that insertBefore is called on the current block’s parent node, not on the current target.
3. Fixed MSIE error raised when using Prototype with Repetition Model (added check to see if Element.prototype was defined as well as window.Element)
4. Revised the subroutine that enables and disables the movement buttons. This subroutine makes use of Array.some defined by JavaScript 1.5; if it does not exist, then the function is added to the Array prototype.
5. Replaced cssQuery with smaller and lighter-weight specialized DOM query functions.
6. Disabled Packer’s encoding option in the creation of the the packed version. The encoding algorithm somehow caused problems with MSIE’s onmove handler.
7. Ensured that template form controls are not successful. When initializing, all controls within the template are disabled and then subsequently enabled when the template is cloned into a block.
8. Allowed authors to disable form fields within the template element so that when they are cloned they remain disabled in the blocks. Note: due to a Firefox issue, documented in issue #9, authors must include a class name of “disabled” on all form fields in addition to setting their disabled attribute.

Comment by Weston Ruter — January 24, 2007

Version 0.8.2 has been released with the following changes:

1. Fixed the ability to cancel the default action of a repetition behavior. If a user sets the onclick handler of a repetition button (add, remove, move-up, move-down) via either an HTML attribute or a DOM property, and if this handler returns false, then the button’s respective behavior will not be executed. Since the onclick handler may be fired before the repetition behavior is able get the handler’s return value, an ad hoc returnValue property should be set on the button in question. Assigning DOM Level 2 Event handlers or MSIE Event handlers which cancel the default action are not yet supported.
2. Updated example 4 to demonstrate and test this functionality.

Comment by Weston Ruter — March 24, 2007

This repetition model implementation has been deprecated and incorporated into a larger Web Forms 2.0 implementation.

Comment by Weston Ruter — August 15, 2007

Works like a charm! :) Thank you Weston! :)

Comment by Wiktor — August 31, 2007

Leave a comment

You must be logged in to post a comment.