FELIX-975 : Unify used javascript used throughout bundles and correctly align buttons in event table for IE

git-svn-id: https://svn.apache.org/repos/asf/felix/trunk@750504 13f79535-47bb-0310-9956-ffa450edef68
diff --git a/webconsole/src/main/java/org/apache/felix/webconsole/internal/misc/EventAdminServlet.java b/webconsole/src/main/java/org/apache/felix/webconsole/internal/misc/EventAdminServlet.java
index 3c7b3ae..00f8789 100644
--- a/webconsole/src/main/java/org/apache/felix/webconsole/internal/misc/EventAdminServlet.java
+++ b/webconsole/src/main/java/org/apache/felix/webconsole/internal/misc/EventAdminServlet.java
@@ -236,6 +236,8 @@
         final String appRoot = ( String ) request.getAttribute( OsgiManager.ATTR_APP_ROOT );
         Util.script(pw, appRoot, "events.js");
 
+        pw.println( "<div id='plugin_content'/>");
+
         Util.startScript( pw );
         pw.println( "renderEvents( );" );
         Util.endScript( pw );
diff --git a/webconsole/src/main/resources/res/ui/bundles.js b/webconsole/src/main/resources/res/ui/bundles.js
index 7a274df..b9bf12d 100644
--- a/webconsole/src/main/resources/res/ui/bundles.js
+++ b/webconsole/src/main/resources/res/ui/bundles.js
@@ -18,10 +18,10 @@
 	$("#plugin_content").append( "<div class='fullwidth'><div class='statusline'/></div>" );
 }
 
-function renderView( /* Array of String */ columns, /* Array of String */ buttons ) {
+function renderView( /* Array of String */ columns, /* String */ buttons ) {
     renderStatusLine();
     renderButtons(buttons);
-    var txt = "<div class='table'><table id='bundles' class='tablelayout'><thead><tr>";
+    var txt = "<div class='table'><table id='plugin_table' class='tablelayout'><thead><tr>";
     for ( var name in columns ) {
     	txt = txt + "<th class='col_" + columns[name] + "'>" + columns[name] + "</th>";
     }
@@ -38,11 +38,11 @@
 
 function renderData( eventData )  {
 	$(".statusline").empty().append(eventData.status);
-	$("#bundles > tbody > tr").remove();
+	$("#plugin_table > tbody > tr").remove();
     for ( var idx in eventData.data ) {
         entry( eventData.data[idx] );
     }
-    $("#bundles").trigger("update");
+    $("#plugin_table").trigger("update");
     if ( drawDetails ) {
 	    renderDetails(eventData);
     }
@@ -51,7 +51,7 @@
 function entry( /* Object */ dataEntry ) {
     var trElement = tr( null, { id: "entry" + dataEntry.id } );
     entryInternal( trElement,  dataEntry );
-	$("#bundles > tbody").append(trElement);	
+	$("#plugin_table > tbody").append(trElement);	
 }
 
 function actionButton( /* Element */ parent, /* string */ id, /* Obj */ action ) {
@@ -225,7 +225,7 @@
             }
             return node.innerHTML;
         };
-        $("#bundles").tablesorter({
+        $("#plugin_table").tablesorter({
             headers: {
         	    0: { sorter:"digit"},
                 3: { sorter: false }
diff --git a/webconsole/src/main/resources/res/ui/events.js b/webconsole/src/main/resources/res/ui/events.js
index 993a112..e234a57 100644
--- a/webconsole/src/main/resources/res/ui/events.js
+++ b/webconsole/src/main/resources/res/ui/events.js
@@ -15,53 +15,40 @@
  * limitations under the License.
  */
 function renderStatusLine() {
-    document.write( "<div class='fullwidth'>");
-    document.write( "<div class='statusline'></div>" );
-    document.write( "</div>" );
+	$("#plugin_content").append( "<div class='fullwidth'><div class='statusline'/></div>" );
 }
 
-function renderView( /* Array of String */ columns, /* Array of String */ buttons ) {
+function renderView( /* Array of String */ columns, /* String */ buttons ) {
     renderStatusLine();
     renderButtons(buttons);
-	document.write( "<div class='table'>");
-    document.write( "<table id='events' class='tablelayout'>" );
-
-    document.write( "<thead><tr>" );
+    var txt = "<div class='table'><table id='plugin_table' class='tablelayout'><thead><tr>";
     for ( var name in columns ) {
-        document.write( "<th>" + columns[name] + "</th>" );
+    	txt = txt + "<th class='col_" + columns[name] + "'>" + columns[name] + "</th>";
     }
-    document.write( "</tr></thead><tbody>" );
-    document.write( "</tbody></table>" );
-    document.write( "</div>");
+    txt = txt + "</tr></thead><tbody></tbody></table></div>";
+    $("#plugin_content").append( txt );
     renderButtons(buttons);
     renderStatusLine();	
 }
 
 function renderButtons( buttons ) {
-	document.write( "<div class='fullwidth'>");
-    document.write( "<div class='buttons'>" );
-    for( var b in buttons ) {
-    	document.write( "<div class='button'>");
-    	document.write(buttons[b]);
-    	document.write( "</div>");
-    }
-    document.write( "</div>" );
-    document.write( "</div>" );
+	$("#plugin_content").append( "<form method='post' enctype='multipart/form-data'><div class='fullwidth'><div class='buttons'>" +
+	                             buttons + "</div></div></form>" );
 }
 
 function renderData( eventData )  {
 	$(".statusline").empty().append(eventData.status);
-	$("#events > tbody > tr").remove();	
+	$("#plugin_table > tbody > tr").remove();	
     for ( var idx in eventData.data ) {
         entry( eventData.data[idx] );
     }
-    $("#events").trigger("update");
+    $("#plugin_table").trigger("update");
 }
 
 function entry( /* Object */ dataEntry ) {
     var trElement = tr( null, { id: "entry" + dataEntry.id } );
     entryInternal( trElement,  dataEntry );
-	$("#events > tbody").append(trElement);	
+	$("#plugin_table > tbody").append(trElement);	
 }
 
 
@@ -107,18 +94,19 @@
 }
 
 function renderEvents() {
-    renderView( ["Received", "Topic", "Properties"],
-    		["<button class='clearButton' type='button' name='clear'>Clear List</button>",
-    		 "<button class='reloadButton' type='button' name='reload'>Reload</button>"]);
-	
-    loadData();
-    
-    $("#events").tablesorter();
-    $(".reloadButton").click(loadData);
-    $(".clearButton").click(function () {
-    	$("#events > tbody > tr").remove();
-    	$.post(pluginRoot, { "action":"clear" }, function(data) {
-    	    renderData(data);
-    	}, "json");
-    });
+	$(document).ready(function(){
+	    renderView( ["Received", "Topic", "Properties"],
+	    		 "<button class='clearButton' type='button' name='clear'>Clear List</button>" +
+	    		 "<button class='reloadButton' type='button' name='reload'>Reload</button>");
+	    loadData();
+	    
+	    $("#plugin_table").tablesorter();
+	    $(".reloadButton").click(loadData);
+	    $(".clearButton").click(function () {
+	    	$("#plugin_table > tbody > tr").remove();
+	    	$.post(pluginRoot, { "action":"clear" }, function(data) {
+	    	    renderData(data);
+	    	}, "json");
+	    });
+	});
 }