FELIX-592 Declare response as transitional XHTML
  - fix style attribute handling (IE is pickier than Firefox)
  - Use innerHTML syntax to declare elements with event handlers
    because these cannot be declared through DOM in IE (AFAIK)

git-svn-id: https://svn.apache.org/repos/asf/felix/trunk@671679 13f79535-47bb-0310-9956-ffa450edef68
diff --git a/webconsole/src/main/resources/res/ui/configmanager.js b/webconsole/src/main/resources/res/ui/configmanager.js
index b0b3d66..76c6396 100644
--- a/webconsole/src/main/resources/res/ui/configmanager.js
+++ b/webconsole/src/main/resources/res/ui/configmanager.js
@@ -58,13 +58,11 @@
     }
     
     var trEl = tr( "content" );
-    var tdEl = createElement( "th", "content", { colspan: 2 } );
+    var tdEl = createElement( "th", "content", { colSpan: "2" } );
     addText( tdEl, obj.title );
     trEl.appendChild( tdEl );
     parent.appendChild( trEl );
 
-    // innerHtml += '<tr class="content">';
-    // innerHtml += '<td class="content">&nbsp;</td>';
     trEl = tr( "content" );
     parent.appendChild( trEl );
     
@@ -72,12 +70,9 @@
     addText( tdEl, "\u00a0" );
     trEl.appendChild( tdEl );
     
-    // innerHtml += '<td class="content">';
     tdEl = td( "content" );
     trEl.appendChild( tdEl );
     
-    // innerHtml += '<form method="post" action="' + pluginRoot + '/' + obj.pid + '">';
-    // innerHtml += '<input type="hidden" name="apply" value="true" />';
     var formEl = createElement( "form", null, {
             method: "post",
             action: pluginRoot + "/" + obj.pid
@@ -94,7 +89,6 @@
     // add the factory PID as a hidden form field if present
     if (obj.factoryPid)
     {
-        // innerHtml += '<input type="hidden" name="factoryPid" value="' + obj.factoryPid + '" />';
         inputEl = createElement( "input", null, {
                 type: "hidden",
                 name: "factoryPid",
@@ -103,7 +97,6 @@
         formEl.appendChild( inputEl );
     }
     
-    // innerHtml += '<input type="hidden" name="action" value="ajaxConfigManager" />';
     inputEl = createElement( "input", null, {
             type: "hidden",
             name: "action",
@@ -111,7 +104,6 @@
         });
     formEl.appendChild( inputEl );
     
-    // innerHtml += '<table border="0" width="100%">';
     var tableEl = createElement( "table", null, {
             border: 0,
             width: "100%"
@@ -123,10 +115,8 @@
     
     if (obj.description)
     {
-        // innerHtml += '<tr class="content">';
-        // innerHtml += '<td class="content" colspan="2">' + obj.description + '</td></tr>';
         trEl = tr( "content" );
-        tdEl = td( "content", { colspan: 2 } );
+        tdEl = td( "content", { colSpan: "2" } );
         addText( tdEl, obj.description );
         trEl.appendChild( tdEl );
         bodyEl.appendChild( trEl );
@@ -141,63 +131,34 @@
         printForm(bodyEl, obj);
     }
     
-    // innerHtml += '<tr class="content">';
     trEl = tr( "content" );
     bodyEl.appendChild( trEl );
     
-    // innerHtml += '<td class="content">&nbsp;</td>';
     tdEl = td( "content" );
     addText( tdEl, "\u00a0" );
     trEl.appendChild( tdEl );
     
-    // innerHtml += '<td class="content">';
     tdEl = td( "content" );
     trEl.appendChild( tdEl );
-    
-    // innerHtml += '<input type="submit" class="submit" name="submit" value="Save" />';
-    tdEl.appendChild( createElement( "input", "submit", {
-            type: "submit",
-            name: "submit",
-            value: "Save"
-        })
-    );
-    
-    // innerHtml += '&nbsp;&nbsp;&nbsp;';
-    addText( tdEl, "\u00a0\u00a0\u00a0" );
-    
-    // innerHtml += '<input type="reset" class="submit" name="reset" value="Reset" />';
-    tdEl.appendChild( createElement( "input", "submit", {
-            type: "reset",
-            name: "reset",
-            value: "Reset"
-        })
-    );
-    
-    // innerHtml += '&nbsp;&nbsp;&nbsp;';
-    // addText( tdEl, "\u00a0\u00a0\u00a0" );
 
-    // innerHtml += '<input type="submit" class="submit" name="delete" value="Delete" onClick="return confirmDelete();"/>';
-    tdEl.appendChild( createElement( "input", "submit", {
-            type: "submit",
-            name: "delete",
-            value: "Delete",
-            onClick: "return confirmDelete();"
-        })
-    );
-    
-    // innerHtml += '</td></tr>';
+    // define this TD as innerHTML otherwise the onClick event handler
+    // of the Delete button is not accepted by IE...    
+    var innerHTML = '<input type="submit" class="submit" name="submit" value="Save" />';
+    innerHTML += '&nbsp;&nbsp;&nbsp;';
+    innerHTML += '<input type="reset" class="submit" name="reset" value="Reset" />';
+    innerHTML += '&nbsp;&nbsp;&nbsp;';
+    innerHTML += '<input type="submit" class="submit" name="delete" value="Delete" onClick="return confirmDelete();"/>';
+    tdEl.innerHTML = innerHTML;
 
-    // innerHtml += '</table>';
-    // innerHtml += '</form>';
-    // innerHtml += '</td></tr>';
-    
     printConfigurationInfo(parent, obj);
 }
 
-function printTextArea(/* Element */ parent, props ) {
+function printTextArea(/* Element */ parent, props )
+{
     
     var propsValue = "";
-    for (var key in props) {
+    for (var key in props)
+    {
         propsValue += key + ' =  ' + props[key] + '\r\n';
     }
 
@@ -205,24 +166,14 @@
         td( "content aligntop", null, [
             text( "Properties" )
         ]),
-        td( "content", { style: "width: 99%" }, [
+        td( "content", { style: { width: "99%" } }, [
             createElement( "textarea", null, {
                     name: "properties",
-                    style: "height: 50%; width: 99%"
+                    style: { height: "50%", width: "99%" }
                 }, [ text( propsValue ) ] ),
             text( "Enter Name-Value pairs of configuration properties" )
         ])
     ]);        
-
-/*
-    var innerHtml = '<tr class="content">';
-    innerHtml += '<td class="content" style="vertical-align: top">Properties</td>';
-    innerHtml += '<td class="content" style="width: 99%">';
-    innerHtml += '<textarea name="properties" style="height: 50%; width: 99%">';
-    innerHtml += '</textarea>';
-    innerHtml += 'Enter Name-Value pairs of configuration properties.</td>';
-    return innerHtml;
-*/
 }
 
 function printForm( /* Element */ parent, obj ) {
@@ -232,15 +183,12 @@
         var prop = obj.propertylist[idx];
         var attr = obj[prop];
   
-        // innerHtml += '<tr class="content">';
-        // innerHtml += '<td class="content" style="vertical-align: top">' + attr.name + '</td>';
         var trEl = tr( "content", null, [
                 td( "content aligntop", null, [ text( attr.name ) ] )
             ]);
         parent.appendChild( trEl );
 
-        // innerHtml += '<td class="content" style="width: 99%">';
-        var tdEl = td( "content", { style: "width: 99%" } );
+        var tdEl = td( "content", { style: { width: "99%" } } );
         trEl.appendChild( tdEl );
   
         if (attr.value != undefined)
@@ -279,7 +227,6 @@
         }
     }
     
-    // innerHtml += '<input type="hidden" name="propertylist" value="' + propList + '"/>';
     parent.appendChild( createElement( "input", null, {
             type: "hidden",
             name: "propertylist",
@@ -290,18 +237,13 @@
 
 function printConfigurationInfo( /* Element */ parent, obj )
 {
-    // var innerHtml = '<tr class="content">';
-    // innerHtml += '<th colspan="2" class="content" >Configuration Information</th></tr>';
     parent.appendChild( tr( "content", null, [
-            createElement( "th", "content", { colspan: 2 }, [
+            createElement( "th", "content", { colSpan: "2" }, [
                 text( "Configuration Information" )
             ])
         ])
     );
     
-    // innerHtml += '<tr class="content">';
-    // innerHtml += '<td class="content">Persistent Identity (PID)</td>';
-    // innerHtml += '<td class="content">' + obj.pid + '</td></tr>';
     parent.appendChild( tr( "content", null, [
             td( "content", null, [
                 text( "Persistent Identity (PID)" )
@@ -314,9 +256,6 @@
 
     if (obj.factoryPID)
     {
-        // innerHtml += '<tr class="content">';
-        // innerHtml += '<td class="content">Factory Peristent Identifier (Factory PID)</td>';
-        // innerHtml += '<td class="content">' + obj.factoryPID + '</td></tr>';
         parent.appendChild( tr( "content", null, [
                 td( "content", null, [
                     text( "Factory Peristent Identifier (Factory PID)" )
@@ -334,9 +273,6 @@
         binding = "Unbound or new configuration";
     }
     
-    // innerHtml += '<tr class="content">';
-    // innerHtml += '<td class="content">Configuration Binding</td>';
-    // innerHtml += '<td class="content">' + binding + '</td></tr>';
     parent.appendChild( tr( "content", null, [
             td( "content", null, [
                 text( "Configuration Binding" )
@@ -354,22 +290,18 @@
     spanCounter++;
     var newId = prop + spanCounter;
     
-    return createElement( "span", null, { id: newId }, [
-        createInput( prop, value, type, '89%' ),
-        createElement( "input", "input", {
-                type: "button",
-                value: "+",
-                onClick: "addValue('" + prop + "', '" + newId + "');",
-                style: "width: 5%"
-            }),
-        createElement( "input", "input", {
-                type: "button",
-                value: "-",
-                onClick: "removeValue('" + newId + "');",
-                style: "width: 5%"
-            }),
-        createElement( "br" )
+    var spanEl = createElement( "span", null, { id: newId }, [
+        createInput( prop, value, type, '89%' )
     ]);
+    
+    // define this SPAN as innerHTML otherwise the onClick event handler
+    // of the buttons is not accepted by IE...    
+    var innerHTML = "<input type='button' class='input' style='width:\"5%\"' value='+' onClick='addValue(\"" + prop + "\", \"" + newId + "\")' />";
+    innerHTML += "<input type='button' class='input' style='width:\"5%\"' value='-' onClick='removeValue(\"" + newId + "\")' />";
+    innerHTML += "<br />";
+    spanEl.innerHTML += innerHTML;
+    
+    return spanEl;
 }
 
 /* Element */ function createInput(prop, value, type, width) {
@@ -396,7 +328,7 @@
     
         var selectEl = createElement( "select", "select", {
                 name: prop,
-                style: "width: " + width
+                style: { width: width }
             });
 
     	var labels = type.labels;
@@ -421,7 +353,7 @@
                 type: "text",
                 name: prop,
                 value: value,
-                style: "width: " + width
+                style: { width: width }
             });
     }
 }
@@ -459,6 +391,7 @@
 
 function addValue(prop, vidx)
 {
+alert("add " + prop + " to " + vidx);
     var span = document.getElementById(vidx);
     if (!span)
     {