Scaffolding for Open Select (Crab with green beans)

Case of XForms select or select1 with selection attribute set to "open"

Tested with IE(8.0),FF(3.0),CH(1.0),SA(3.2),OP(9.64) Some funny result may occurs

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events" 		xmlns = "http://www.w3.org/1999/xhtml"
<?xml version="1.0"
encoding="iso-8859-1"?>
<?xml-stylesheet
href="xsltforms/xsltforms.xsl" type="text/xsl"?> 		<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<xf:select1 selection="open"xf:>
<xf:label>Selection</xf:label>
<xf:item label="Tea" value="Tea">
<xf:item label="Coffee" value="Coffee">
<xf:item label="Chocolate" value="Chocolate">
</xf:select1>

XSLT
xf ---> html

<label for="XSLTFormsA">Selection</label>
<select selection="open" id="XSLTFormsA">
<option label="Tea" value="Tea">
<option label="Coffee" value="Coffee">
<option label="Chocolate" value="Chocolate">
<option label="New" value="null" id="XSLTFormsLastOptionRefA" onfocus="XSLTFormsFocusSelectionOpen(this);>
</select>
<input type="text" display="none" onblur="XSLTFormsSelectBlur(this);" id="XSLTFormsInputRefA"/>
<-- A is the Key -->
<fieldset id="XSLTFormsB">
<legend>Selection</legend>
<ul> <li><input type="checkbox"/>Tea</li>
<li><input type="checkbox"/>Coffee</li>
<li><input type="checkbox"/>Chocolate</li>
<li id="XSLTFormsLastOptionRefB" onfocus="XSLTFormsFocusSelectionOpen(this);">
<input type="checkbox"/>New</li>
</ul> </fieldset>
<input type="text" display="none" onblur="XSLTFormsSelectBlur(this);" id="XSLTFormsInputRefB"/>
<-- A is the Key -->

[x]html implementation
onfocus event rising from the last item element of the select element:
(1) context of current selection is saved in case of multiple select
(2) an hadoc input element is created and receives focus
onblur event rising from the newly created input:
(1) if the newly created input has non empty value: a new item in the select element is inserted before the last item
(2) context of previous selection is restored in case of select multiple
(3) from my point of view: status of the new item regarding selected attribute(s) before adding (when relevant) and what to focus now are open issues. for instance: is the newly item added to current selection set (in case of multiple) or receives focus in case of single.

Select1

Minimal Compact Full
  • Drink
Drink
  • Tea
  • Coffee
  • Chocolate

Select

Minimal Compact Full
  • Drink
Cars
  • Audi
  • Ford
  • Toyota

Output

Coding
JavaScript (Just a function, see source for full details)
  1. function evChangeSelectOpen(e){
  2. if ((e.value == '')||(e.value==null))
  3. {e.style.display = 'none';
  4. restoreSelectOpenSelected(document.getElementById(e.getAttribute('XSLTFormsSelect')));
  5. return;
  6. }

<!-- <ol> cannot be inserted in <code>, this looks like an unfriendly specification restriction -->

<!-- The Fox Mozarella Browser ignore class attribute of <code> element -->

<:!-- FF and Chrome debug report below -->

This is just a scaffolding
Ubiquity like coded style
Not FF compliant
Not yet available in XSLTForms beta release
uncaught exception: Node cannot be inserted at the specified point in the hierarchy (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR) (FF)
XML self-closing tag syntax used on <option>. The tag will not be closed. (Chrome)
localhost:2550/web21th/samples/selectopen.htm:47Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3