Section L. Markers

L. Markers

There is one more aspect of Usable Forms I'd like to present: markers. Unlike all other topics in this chapter, markers are not "native" W3C DOM features, but rather a structuring trick I use in Usable Forms and Sandwich Picker.

First, consider the problem. Usable Forms hides form fields until the user takes a certain action: checks a radio button, selects a new option, whatever. Then the script retrieves the correct <tr>s from hyperspace and reinserts them into the document.

But where in the document? Correct placement is absolutely vital to Usable Forms' user experience. When creating the HTML, we put the form fields in an order logical to the user (we hope), and when form fields return from hyperspace they should once again take up this logical place in the form.

To a lesser degree, Sandwich Picker has the same problem. If a user discards a sandwich, that sandwich should return to the start table at the bottom of the page. Although its exact placement is not as vital as in Usable Forms, it should at least go under the right price header.

The solution to this placement problem is to use markers. The principle is very simple: I create one new, empty, hidden <tr> for each <tr> that will be hidden or moved, give it a unique ID, and insert it just before or after the <tr> I'm going to remove. When the <tr> has to return to its original position, I insert it before the marker.

Thus I keep the placement information where it belongs: in the HTML structural layer. I could also use a complicated JavaScript object, array, or hash to hold this information, but I find relying on the document structure much safer and more elegant.

Choosing a simple ID-naming scheme is important in using markers:

[Usable Forms, lines 1, 18-19, and 41-51]

var containerTag = 'TR'; var marker = document.createElement(containerTag); marker.style.display = 'none'; while (hiddenFields.length) {     var rel = hiddenFields[0].getAttribute('rel');     if (!hiddenFormFieldsPointers[rel])            hiddenFormFieldsPointers[rel] = new Array();            var relIndex = hiddenFormFieldsPointers[rel].length;     var newMarker = marker.cloneNode(true);     newMarker.id = rel + relIndex;     hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]);     waitingRoom.appendChild(hiddenFields.shift()); } 

The script first creates a template marker and stores it in variable marker. Then, while the <tr>s with a rel attribute are removed from the document, the script replaces with a marker with a unique ID. This unique ID consists of the value of the rel attribute plus the index number of the <tr> in the hiddenFormFieldPointers array.

Of course it uses the same information when retrieving the <tr> to get the correct marker. It inserts the <tr> before its marker:

[Usable Forms, lines 121-136, condensed]

function intoMainForm(relation){     if (relation == 'none') return;     var Elements = hiddenFormFieldsPointers[relation];     for (var i=0;i<Elements.length;i++) {            var insertPoint = document.getElementById(relation+i);     insertPoint.parentNode.insertBefore(Elements[i],insertPoint);     } } 

Because the ID scheme is so simple, it's easy to find the correct marker and insert the returning <tr> just before it.