You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@bloodhound.apache.org by da...@apache.org on 2016/10/01 13:30:09 UTC

svn commit: r1763012 - in /bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme: htdocs/js/batchcreate.js theme.py

Author: dammina
Date: Sat Oct  1 13:30:09 2016
New Revision: 1763012

URL: http://svn.apache.org/viewvc?rev=1763012&view=rev
Log:
restructure the jquery code snippets related to BatchCreateTickets and CreatedTickets wiki macros

Modified:
    bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/htdocs/js/batchcreate.js
    bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/theme.py

Modified: bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/htdocs/js/batchcreate.js
URL: http://svn.apache.org/viewvc/bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/htdocs/js/batchcreate.js?rev=1763012&r1=1763011&r2=1763012&view=diff
==============================================================================
--- bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/htdocs/js/batchcreate.js (original)
+++ bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/htdocs/js/batchcreate.js Sat Oct  1 13:30:09 2016
@@ -17,225 +17,218 @@
  under the License.
  */
 
-function emptyTable(numOfRows,product,milestones,components,href,token) {
-    /*
+/*
     This function will be invoked from the BatchCreateTickets wiki macro.
     The wiki macro will send the relevant details to create the empty ticket table within the wiki.
     Then this function will generate the empty ticket table containing appropriate number of rows to enter ticket data.
-     */
-	created_rows=numOfRows;
-	form_token = token.split(";")[0].split("=")[1];
-	if(numOfRows == ""){
-		alert("Enter the ticket batch size.")
-	}
-	else if(numOfRows != "" && document.getElementById("empty-table") == null){
-	var contentDiv = document.getElementById("div-empty-table");
-    var headers = {"ticket":"","summary":"Summary","description":"Description","product":"Product","priority":"Priority","milestone":"Milestone","component":"Component"}
-	priorities = ["blocker", "critical", "major", "minor", "trivial"];
-	types = ["defect", "enhancement", "task"];
-	
-	var div = document.createElement("div");
-	div.setAttribute("class","span12");
-	div.setAttribute("id","empty-table");
-	var h5 = document.createElement("h5");
-	h5.appendChild(document.createTextNode("Batch Create Tickets"));
-	div.appendChild(h5);
-	
-	var form = document.createElement("form");
-	form.setAttribute("id","bct-form");
-	form.setAttribute("name","bct");
-	form.setAttribute("method","post");
+ */
+function emptyTable(numOfRows, products, milestones, components, href, token, unique_key) {
+
+	var created_rows=numOfRows;
+	var form_token = token.split(";")[0].split("=")[1];
+
+    var headers = {"ticket":"","summary":"Summary","description":"Description","product":"Product",
+        "priority":"Priority","milestone":"Milestone","component":"Component"};
+	var priorities = ["blocker", "critical", "major", "minor", "trivial"];
+    var types = ["defect", "enhancement", "task"];
+
+	var contentDiv = $('#div-empty-table' + unique_key);
+
+    var div = $('<div/>', {
+    'id':'empty-table' + unique_key,
+    'class':'span12'
+    }).appendTo(contentDiv);
+
+	var h5 = $('<h5/>').html('Batch Create Tickets').appendTo(div);
 	
-	var div_token = document.createElement("div");
-	var form_token_val = document.createElement("input");
-	form_token_val.setAttribute("type","hidden");
-	form_token_val.setAttribute("name","__FORM_TOKEN");
-	form_token_val.setAttribute("value",form_token);
-	div_token.appendChild(form_token_val);
-	form.appendChild(div_token);
+	var form = $('<form/>', {
+	    'id':'bct-form' + unique_key,
+        'name':'bct',
+        'method':'post'
+    }).appendTo(div);
+
+	$('<input/>', {
+	    'type':'hidden',
+        'name':'__FORM_TOKEN',
+        'value':form_token
+    }).appendTo($('<div>').appendTo(form));
 	
-	var table = document.createElement("table");
-	table.setAttribute("class","listing tickets table table-bordered table-condensed query");
-	table.setAttribute("style","border-radius: 0px 0px 4px 4px");
+	var table = $('<table/>', {
+	    'class':'listing tickets table table-bordered table-condensed query',
+        'style':'border-radius: 0px 0px 4px 4px'
+    }).appendTo(form);
 	
-	var tr = document.createElement("tr");
-	tr.setAttribute("class","trac-columns");
+	var tr = $('<tr/>', {
+	    'class':'trac-columns'
+    }).appendTo(table);
+
 	for (header in headers){
-		font = document.createElement("font");
-		font.setAttribute("color","#1975D1");
-		font.appendChild(document.createTextNode(headers[header]))
-		th = document.createElement("th");
-		th.appendChild(font);
-		tr.appendChild(th);
+	    var th = $('<th/>').appendTo(tr);
+	    $('<font/>', {
+	        'color':'#1975D1'
+        }).html(headers[header]).appendTo(th);
 	}
-	table.appendChild(tr);
 	
-	tbody = document.createElement("tbody");
-	for (i=0;i<numOfRows;i++){
-		tr_rows = document.createElement("tr");
-		for (header in headers){
-			if(header == "ticket"){
-				td_row = document.createElement("td");
-				input_ticket = document.createElement("input");
-				input_ticket.setAttribute("type","checkbox");
-				input_ticket.setAttribute("id","field-ticket"+i);
-				input_ticket.setAttribute("class","input-block-level");
-				input_ticket.setAttribute("name","field_ticket"+i);
-				td_row.appendChild(input_ticket);
-				tr_rows.appendChild(td_row);
-			}
-			else if (header == "summary"){
-				td_row = document.createElement("td");
-				input_summary = document.createElement("input");
-				input_summary.setAttribute("type","text");
-				input_summary.setAttribute("id","field-summary"+i);
-				input_summary.setAttribute("class","input-block-level");
-				input_summary.setAttribute("name","field_summary"+i);
-				td_row.appendChild(input_summary);
-				tr_rows.appendChild(td_row);
-			}
-			else if (header == "description") {
-				td_row = document.createElement("td");
-				input_description = document.createElement("textarea");
-				input_description.setAttribute("id","field-description"+i);
-				input_description.setAttribute("class","input-block-level");
-				input_description.setAttribute("name","field_description"+i);
-				input_description.setAttribute("rows","2");
-				input_description.setAttribute("cols","28");
-				td_row.appendChild(input_description);
-				tr_rows.appendChild(td_row);
-			}
-			else if (header == "priority") {
-				td_row = document.createElement("td");
-				input_priority = document.createElement("select");
-				input_priority.setAttribute("id","field-priority"+i);
-				input_priority.setAttribute("class","input-block-level");
-				input_priority.setAttribute("name","field_priority"+i);
-				for (priority in priorities){
-					option = document.createElement("option");
-					option.setAttribute("value",priorities[priority]);
-					option.appendChild(document.createTextNode(priorities[priority]));
-					input_priority.appendChild(option);
+	var tbody = $('<tbody>').appendTo(table);
+
+	for (var i=0; i < numOfRows; i++) {
+
+		var tr_rows = $('<tr>').appendTo(tbody);
+
+		for (var header in headers) {
+		    var td;
+			if(header == "ticket") {
+
+				td = $('<td>').appendTo(tr_rows);
+				var input_ticket = $('<input/>', {
+				    'id':'field-ticket' + unique_key + '-' + i,
+	                'type':'checkbox',
+                    'name':'field_ticket' + i,
+                    'class':'input-block-level'
+                }).appendTo(td);
+
+			} else if (header == "summary"){
+
+			    td = $('<td>').appendTo(tr_rows);
+				var input_summary = $('<input/>', {
+				    'id':'field-summary' + unique_key + '-' + i,
+	                'type':'text',
+                    'name':'field_summary' + i,
+                    'class':'input-block-level'
+                }).appendTo(td);
+
+			} else if (header == "description") {
+
+			    td = $('<td>').appendTo(tr_rows);
+				var input_description = $('<textarea/>', {
+				    'id':'field-description' + unique_key + '-' + i,
+                    'name':'field_description' + i,
+                    'class':'input-block-level',
+                    'rows':'2',
+                    'cols':'28'
+                }).appendTo(td);
+
+			} else if (header == "priority") {
+
+			    td = $('<td>').appendTo(tr_rows);
+				var input_priority = $('<select/>', {
+				    'id':'field-priority' + unique_key + '-' + i,
+                    'name':'field_priority' + i,
+                    'class':'input-block-level'
+                }).appendTo(td);
+
+				for (var priority in priorities){
+				    $('<option/>', {
+				        'value':priorities[priority]
+                    }).html(priorities[priority]).appendTo(input_priority);
 				}
-				td_row.appendChild(input_priority);
-				tr_rows.appendChild(td_row);
-			}
-			else if (header == "product") {
-				td_row = document.createElement("td");
-				field_product = document.createElement("select");
-				field_product.setAttribute("id","field-product"+i);
-				field_product.setAttribute("class","input-block-level");
-				field_product.setAttribute("name","field_product"+i);
-				for (p in product){
-					option = document.createElement("option");
-					option.setAttribute("value",(product[p])[0]);
-					option.appendChild(document.createTextNode((product[p])[1]));
-					field_product.appendChild(option);
+
+			} else if (header == "product") {
+
+			    td = $('<td>').appendTo(tr_rows);
+				var field_product = $('<select/>', {
+				    'id':'field-product' + unique_key + '-' + i,
+                    'name':'field_product' + i,
+                    'class':'input-block-level'
+                }).appendTo(td);
+
+				for (var product in products){
+				    $('<option/>', {
+				        'value':(products[product])[0]
+                    }).html((products[product])[1]).appendTo(field_product);
 				}
-				td_row.appendChild(field_product);
-				tr_rows.appendChild(td_row);
-			}
-			else if (header == "milestone"){
-				td_row = document.createElement("td");
-				field_milestone = document.createElement("select");
-				field_milestone.setAttribute("id","field-milestone"+i);
-				field_milestone.setAttribute("class","input-block-level");
-				field_milestone.setAttribute("name","field_milestone"+i);
-				for (milestone in milestones){
-					option = document.createElement("option");
-					option.setAttribute("value",(milestones[milestone])[0]);
-					option.appendChild(document.createTextNode((milestones[milestone])[0]));
-					field_milestone.appendChild(option);
+
+			} else if (header == "milestone") {
+
+			    td = $('<td>').appendTo(tr_rows);
+				var field_milestone = $('<select/>', {
+				    'id':'field-milestone' + unique_key + '-' + i,
+                    'name':'field_milestone' + i,
+                    'class':'input-block-level'
+                }).appendTo(td);
+
+				for (var milestone in milestones){
+				    $('<option/>', {
+				        'value':(milestones[milestone])[0]
+                    }).html((milestones[milestone])[0]).appendTo(field_milestone);
 				}
-				td_row.appendChild(field_milestone);
-				tr_rows.appendChild(td_row);
-			}
-			else if (header == "component"){
-				td_row = document.createElement("td");
-				field_component = document.createElement("select");
-				field_component.setAttribute("id","field-component"+i);
-				field_component.setAttribute("class","input-block-level");
-				field_component.setAttribute("name","field_component"+i);
-				for (component in components){
-					option = document.createElement("option");
-					option.setAttribute("value",(components[component])[0]);
-					option.appendChild(document.createTextNode((components[component])[0]));
-					field_component.appendChild(option);
+
+			} else if (header == "component") {
+
+			    td = $('<td>').appendTo(tr_rows);
+				var field_component = $('<select/>', {
+				    'id':'field-component' + unique_key + '-' + i,
+                    'name':'field_component' + i,
+                    'class':'input-block-level'
+                }).appendTo(td);
+
+				for (var component in components){
+				    $('<option/>', {
+				        'value':(components[component])[0]
+                    }).html((components[component])[0]).appendTo(field_component);
 				}
-				td_row.appendChild(field_component);
-				tr_rows.appendChild(td_row);
 			}
 		}
-		tbody.appendChild(tr_rows);
 	}
-	table.appendChild(tbody);
-	form.appendChild(table);
 
-	remove_row_button = document.createElement("button");
-	remove_row_button.setAttribute("class","btn pull-right");
-	remove_row_button.setAttribute("type","button");
-	remove_row_button.addEventListener("click", function(event) {
-  		numOfRows=parseInt(numOfRows)-parseInt(remove_row_btn_action(numOfRows));
-  		event.preventDefault();
-	});
-	remove_row_button.setAttribute("id","bct-rmv-empty-row");
-	remove_row_button.appendChild(document.createTextNode("-"));
-	form.appendChild(remove_row_button);
-	
-	add_row_button = document.createElement("button");
-	add_row_button.setAttribute("class","btn pull-right");
-	add_row_button.setAttribute("type","button");
-	add_row_button.addEventListener("click", function(event) {
-  		add_row_btn_action(product,milestones,components,created_rows);
-  		numOfRows=parseInt(numOfRows)+1;
-  		created_rows=parseInt(created_rows)+1;
-  		event.preventDefault();
-	});
-	add_row_button.setAttribute("id","bct-add-empty-row");
-	add_row_button.appendChild(document.createTextNode("+"));
-	form.appendChild(add_row_button);	
-
-    submit_button = document.createElement("button");
-	submit_button.setAttribute("class","btn pull-right");
-	submit_button.setAttribute("type","button");
-	submit_button.addEventListener("click", function(event) {
-		var empty_row=false;
-		var cnt=0;
-		for (var k = 0; k <parseInt(numOfRows)+parseInt(cnt); k++) {
-			var element = document.getElementById("field-summary"+k);
-			if(element==null){
-				cnt=parseInt(cnt)+1;
-				continue;
-			}
-			
-			var summary_val=document.getElementById("field-summary"+k).value;
-			if(summary_val==""){
-				var line_number = parseInt(k)+1;
-				var confirmation = confirm("Summery field of one or more tickets are empty. They will not get created!");
-				empty_row=true;
-				break;
-			}
-		};
-		if(confirmation == true || !empty_row){
-			submit_btn_action();
-  			event.preventDefault();
-		}
-	});
-	submit_button.setAttribute("id","bct-create");
-	submit_button.setAttribute("data-target",href);
-	submit_button.appendChild(document.createTextNode("save"));
-	form.appendChild(submit_button);	
-	
-	cancle_button = document.createElement("button");
-	cancle_button.setAttribute("class","btn pull-right");
-	cancle_button.setAttribute("type","button");
-	cancle_button.setAttribute("onclick","deleteForm()");
-	cancle_button.appendChild(document.createTextNode("cancel"));
-	form.appendChild(cancle_button);
-	
-	div.appendChild(form);
-	contentDiv.appendChild(div);
-	}
+	$('<button/>', {
+	    'id':'bct-rmv-empty-row' + unique_key,
+        'type':'button',
+        'class':'btn pull-right',
+        'click':function() {
+            numOfRows = parseInt(numOfRows) - parseInt(remove_row_btn_action(numOfRows, unique_key));
+        }
+	}).html('-').appendTo(form);
+
+    $('<button/>', {
+	    'id':'bct-add-empty-row' + unique_key,
+        'type':'button',
+        'class':'btn pull-right',
+        'click':function() {
+	        add_row_btn_action(products, milestones, components, created_rows, unique_key, headers, tbody);
+            numOfRows = parseInt(numOfRows) + 1;
+            created_rows = parseInt(created_rows) + 1;
+        }
+	}).html('+').appendTo(form);
+
+    $('<button/>', {
+	    'id':'bct-create' + unique_key,
+        'type':'button',
+        'class':'btn pull-right',
+        'data-target':href,
+        'click':function() {
+	        var empty_row=false;
+            var cnt=0;
+            for (var k = 0; k < parseInt(numOfRows) + parseInt(cnt); k++) {
+
+                var element = $("#field-summary" + k);
+                if(element == null) {
+                    cnt = parseInt(cnt) + 1;
+                    continue;
+                }
+
+                var summary_val = element.val();
+                if(summary_val == ""){
+                    var line_number = parseInt(k) + 1;
+                    var confirmation = confirm("Summery field of one or more tickets are empty. " +
+                        "They will not get created!");
+                    empty_row=true;
+                    break;
+                }
+            }
+            if(confirmation == true || !empty_row){
+                submit_btn_action(unique_key);
+            }
+        }
+	}).html('save').appendTo(form);
+
+	$('<button/>', {
+        'type':'button',
+        'class':'btn pull-right',
+        'click':function() {
+	        deleteForm(unique_key);
+        }
+	}).html('cancel').appendTo(form);
 
 }
 
@@ -243,216 +236,178 @@ function submitForm(){
 	document.getElementById("bct-form").submit();
 }
 
-function deleteForm(){
-    /*
-    This function will invoke when the user clicks on cancel button under the empty table.
-    Then this function will remove the empty table from the wiki.
-     */
-	document.getElementById("empty-table").remove();
+/*
+ Then this function will remove the empty table from the wiki.
+ */
+function deleteForm(unique_key){
+	$("#empty-table" + unique_key).remove();
 }
 
-function submit_btn_action() {
-    /*
-    This function will send a HTTP POST request to the backend.
-    The form containing the empty table and its data will be submitted.
-    Then the empty table will be replaced with the ticket table containing details of the created tickets.
-     */
+/*
+This function will send a HTTP POST request to the backend.
+The form containing the empty table and its data will be submitted.
+Then the empty table will be replaced with the ticket table containing details of the created tickets.
+ */
+function submit_btn_action(unique_key) {
+
     // data-target is the base url for the product in current scope
-	var product_base_url = $('#bct-create').attr('data-target');
-    if (product_base_url === '/')
-        product_base_url = '';
-        $.post(product_base_url , $('#bct-form').serialize(),
-        function(ticket) {
-			deleteForm();
-
-			var headers = {"ticket":"Ticket","summary":"Summary","product":"Product","status":"Status","milestone":"Milestone","component":"Component"}
-			var contentDiv = document.getElementById("div-empty-table");
-			var div = document.createElement("div");
-			div.setAttribute("class","span12");
-			var h5 = document.createElement("h5");
-			h5.appendChild(document.createTextNode("Created Tickets"));
-			div.appendChild(h5);
-			var table = document.createElement("table");
-			table.setAttribute("class","listing tickets table table-bordered table-condensed query");
-			table.setAttribute("style","border-radius: 0px 0px 4px 4px");
-			tr = document.createElement("tr");
-			tr.setAttribute("class","trac-columns");
-			
-			for (header in headers){
-				th = document.createElement("th");
-				font = document.createElement("font");
-				font.setAttribute("color","#1975D1");
-				font.appendChild(document.createTextNode(headers[header]))
-				th = document.createElement("th");
-				th.appendChild(font);
-				tr.appendChild(th);
-			}
-			table.appendChild(tr);
-			
-			for ( i=0 ; i<Object.keys(ticket.tickets).length ; i++ ){
-				tr = document.createElement("tr");
-				for (j=0;j<6;j++){
-					if(j==0){
-						td = document.createElement("td");
-						a = document.createElement("a");
-						tkt = JSON.parse(ticket.tickets[i]);
-						a.setAttribute("href",tkt.url);
-						a.appendChild(document.createTextNode("#"+tkt.id));
-						td.appendChild(a);
-					}
-					else if(j==1){
-						td = document.createElement("td");
-						a = document.createElement("a");
-						tkt = JSON.parse(ticket.tickets[i]);
-						a.setAttribute("href",tkt.url);
-						a.appendChild(document.createTextNode(tkt.summary));
-						td.appendChild(a);
-					}
-					else if(j==2){
-						td = document.createElement("td");
-						tkt = JSON.parse(ticket.tickets[i]);
-						td.appendChild(document.createTextNode(tkt.product));
-					}
-					else if(j==3){
-						td = document.createElement("td");
-						tkt = JSON.parse(ticket.tickets[i]);
-						td.appendChild(document.createTextNode(tkt.status));
-					}
-					else if(j==4){
-						td = document.createElement("td");
-						tkt = JSON.parse(ticket.tickets[i]);
-						td.appendChild(document.createTextNode(tkt.milestone));
-					}
-					else if(j==5){
-						td = document.createElement("td");
-						tkt = JSON.parse(ticket.tickets[i]);
-						td.appendChild(document.createTextNode(tkt.component));
-					}
-					tr.appendChild(td);
-				}
-				table.appendChild(tr);
-			}
-			div.appendChild(table);
-			contentDiv.appendChild(div);     
-        });
+	var product_base_url = $('#bct-create' + unique_key).attr('data-target');
+
+    $.post(product_base_url , $('#bct-form' + unique_key).serialize(),
+    function(ticket) {
+        deleteForm(unique_key);
+
+        var headers = {"ticket":"Ticket", "summary":"Summary", "product":"Product", "status":"Status",
+            "milestone":"Milestone", "component":"Component"};
+
+        var contentDiv = $("#div-empty-table" + unique_key);
+
+        var div = $('<div/>', {
+            'class':'span12'
+        }).appendTo(contentDiv);
+
+        var h5 = $('<h5/>', {
+            'class':'span12'
+        }).html("Created Tickets").appendTo(div);
+
+        var table = $('<table/>', {
+            'class':'listing tickets table table-bordered table-condensed query',
+            'style':'border-radius: 0px 0px 4px 4px'
+        }).appendTo(div);
+
+        var header_tr = $('<tr/>', {
+            'class':'trac-columns'
+        }).appendTo(table);
+
+        for (var header in headers){
+
+            var th = $('<th/>', {
+                'class':'trac-columns'
+            }).appendTo(header_tr);
+
+            $('<font/>', {
+                'color':'#1975D1'
+            }).html(headers[header]).appendTo(th);
+        }
+
+        for (var json_ticket in ticket.tickets) {
+            var tr = $('<tr/>').appendTo(table);
+            var tkt = JSON.parse(json_ticket);
+            for (var j = 0; j < 6; j++) {
+                var td = $('<td/>').appendTo(tr);
+                if(j < 2) {
+                    $('<a/>', {
+                        'href':tkt.url
+                    }).html(j == 0 ? '#' + tkt.id : tkt.summary).appendTo(td);
+                } else {
+                    td.html(j == 2 ? tkt.product : (j == 3 ? tkt.status : (j == 4 ? tkt.milestone : tkt.component)));
+                }
+            }
+        }
+    });
 }
 
-function add_row_btn_action(product,milestones,components,i){
-    /*
-    This function will be called when the users add a new row to the empty table.
-    The new empty row will be always appended to the end row of the empty table.
-     */
-	var headers = {"ticket":"","summary":"Summary","description":"Description","product":"Product","priority":"Priority","milestone":"Milestone","component":"Component"}
-	//var statuses = ["new", "accepted", "assigned", "closed", "reopened"];
+/*
+This function will be called when the users add a new row to the empty table.
+The new empty row will be always appended to the end row of the empty table.
+ */
+function add_row_btn_action(products, milestones, components, i, random, headers, tbody) {
+
+	var statuses = ["new", "accepted", "assigned", "closed", "reopened"];
 	var priorities = ["blocker", "critical", "major", "minor", "trivial"];
 	var types = ["defect", "enhancement", "task"];
 
-    tr_rows = document.createElement("tr");
+    var tr = $('<tr/>').appendTo(tbody);
 
-    for (header in headers){
-    	if(header == "ticket"){
-			td_row = document.createElement("td");
-			input_ticket = document.createElement("input");
-			input_ticket.setAttribute("type","checkbox");
-			input_ticket.setAttribute("id","field-ticket"+i);
-			input_ticket.setAttribute("class","input-block-level");
-			input_ticket.setAttribute("name","field_ticket"+i);
-			td_row.appendChild(input_ticket);
-			tr_rows.appendChild(td_row);
-		}
-		else if (header == "summary"){
-				td_row = document.createElement("td");
-				input_summary = document.createElement("input");
-				input_summary.setAttribute("type","text");
-				input_summary.setAttribute("id","field-summary"+i);
-				input_summary.setAttribute("class","input-block-level");
-				input_summary.setAttribute("name","field_summary"+i);
-				td_row.appendChild(input_summary);
-				tr_rows.appendChild(td_row);
-		}
-		else if (header == "description") {
-			td_row = document.createElement("td");
-			input_description = document.createElement("textarea");
-			input_description.setAttribute("id","field-description"+i);
-			input_description.setAttribute("class","input-block-level");
-			input_description.setAttribute("name","field_description"+i);
-			input_description.setAttribute("rows","2");
-			input_description.setAttribute("cols","28");
-			td_row.appendChild(input_description);
-			tr_rows.appendChild(td_row);
-		}
-		else if (header == "priority") {
-			td_row = document.createElement("td");
-			input_priority = document.createElement("select");
-			input_priority.setAttribute("id","field-priority"+i);
-			input_priority.setAttribute("class","input-block-level");
-			input_priority.setAttribute("name","field_priority"+i);
-			for (priority in priorities){
-				option = document.createElement("option");
-				option.setAttribute("value",priorities[priority]);
-				option.appendChild(document.createTextNode(priorities[priority]));
-				input_priority.appendChild(option);
-			}
-			td_row.appendChild(input_priority);
-			tr_rows.appendChild(td_row);
-		}
-		else if (header == "product") {
-			td_row = document.createElement("td");
-			field_product = document.createElement("select");
-			field_product.setAttribute("id","field-product"+i);
-			field_product.setAttribute("class","input-block-level");
-			field_product.setAttribute("name","field_product"+i);
-			for (p in product){
-				option = document.createElement("option");
-				option.setAttribute("value",(product[p])[0]);
-				option.appendChild(document.createTextNode((product[p])[1]));
-				field_product.appendChild(option);
-			}
-			td_row.appendChild(field_product);
-			tr_rows.appendChild(td_row);
-		}
-		else if (header == "milestone"){
-			td_row = document.createElement("td");
-			field_milestone = document.createElement("select");
-			field_milestone.setAttribute("id","field-milestone"+i);
-			field_milestone.setAttribute("class","input-block-level");
-			field_milestone.setAttribute("name","field_milestone"+i);
-			for (milestone in milestones){
-				option = document.createElement("option");
-				option.setAttribute("value",(milestones[milestone])[0]);
-				option.appendChild(document.createTextNode((milestones[milestone])[0]));
-				field_milestone.appendChild(option);
-			}
-			td_row.appendChild(field_milestone);
-			tr_rows.appendChild(td_row);
-		}
-		else if (header == "component"){
-			td_row = document.createElement("td");
-			field_component = document.createElement("select");
-			field_component.setAttribute("id","field-component"+i);
-			field_component.setAttribute("class","input-block-level");
-			field_component.setAttribute("name","field_component"+i);
-			for (component in components){
-				option = document.createElement("option");
-				option.setAttribute("value",(components[component])[0]);
-				option.appendChild(document.createTextNode((components[component])[0]));
-				field_component.appendChild(option);
+    for (var header in headers) {
+
+        var td = $('<td/>').appendTo(tr);
+        var unique_key = random + '-' + i;
+
+        if(header == 'ticket') {
+			$('<input/>', {
+			    'id':'field-ticket' + unique_key,
+                'name':'field_ticket' + unique_key,
+                'class':'input-block-level',
+			    'type':'checkbox'
+            }).appendTo(td);
+		} else if (header == "summary") {
+
+		    $('<input/>', {
+			    'id':'field-summary' + unique_key,
+                'name':'field_summary' + unique_key,
+                'class':'input-block-level',
+			    'type':'text'
+            }).appendTo(td);
+		} else if (header == "description") {
+
+		    $('<textarea/>', {
+			    'id':'field-description' + unique_key,
+                'name':'field_description' + unique_key,
+                'class':'input-block-level',
+			    'rows':'2',
+                'cols':'28'
+            }).appendTo(td);
+		} else if (header == "priority") {
+
+		    var input_priority = $('<select/>', {
+			    'id':'field-priority' + unique_key,
+                'name':'field_priority' + unique_key,
+                'class':'input-block-level'
+            }).appendTo(td);
+			for (var priority in priorities){
+				$('<option/>', {
+				    'value':priorities[priority]
+                }).html(priorities[priority]).appendTo(input_priority);
+			}
+		} else if (header == "product") {
+
+		    var field_product = $('<select/>', {
+			    'id':'field-product' + unique_key,
+                'name':'field_product' + unique_key,
+                'class':'input-block-level'
+            }).appendTo(td);
+			for (var product in products) {
+				$('<option/>', {
+				    'value':(products[product])[0]
+                }).html((products[product])[1]).appendTo(field_product);
+			}
+		} else if (header == "milestone") {
+
+		    var field_milestone = $('<select/>', {
+			    'id':'field-milestone' + unique_key,
+                'name':'field_milestone' + unique_key,
+                'class':'input-block-level'
+            }).appendTo(td);
+			for (var milestone in milestones) {
+				$('<option/>', {
+				    'value':(milestones[milestone])[0]
+                }).html((milestones[milestone])[0]).appendTo(field_milestone);
+			}
+		} else if (header == "component") {
+
+		    var field_component = $('<select/>', {
+			    'id':'field-component' + unique_key,
+                'name':'field_component' + unique_key,
+                'class':'input-block-level'
+            }).appendTo(td);
+			for (var component in components) {
+				$('<option/>', {
+				    'value':(components[component])[0]
+                }).html((components[component])[0]).appendTo(field_component);
 			}
-			td_row.appendChild(field_component);
-			tr_rows.appendChild(td_row);
 		}
 	}
-	document.getElementById("empty-table").childNodes[1].childNodes[1].childNodes[1].appendChild(tr_rows);
 }
 
-function remove_row_btn_action(numOfRows){
-    /*
-    This function will be called when the user removes a table row of the empty table.
-     */
-	var cnt=0;
-	for(var i=0;i<parseInt(numOfRows)-parseInt(cnt);i++){
-		if(document.getElementById("empty-table").childNodes[1].childNodes[1].childNodes[1].childNodes[i].childNodes[0].childNodes[0].checked){
-			document.getElementById("empty-table").childNodes[1].childNodes[1].childNodes[1].childNodes[i].remove();
+/*
+This function will be called when the user removes a table row of the empty table.
+ */
+function remove_row_btn_action(numOfRows, unique_key) {
+	var cnt = 0;
+	for(var i = 0; i < parseInt(numOfRows) - parseInt(cnt); i++) {
+		if(document.getElementById('empty-table' + unique_key).childNodes[1].childNodes[1].childNodes[1].childNodes[i].childNodes[0].childNodes[0].checked) {
+			document.getElementById('empty-table' + unique_key).childNodes[1].childNodes[1].childNodes[1].childNodes[i].remove();
 			cnt=cnt+1;
 			i--;
 		}
@@ -460,78 +415,56 @@ function remove_row_btn_action(numOfRows
 	return cnt;
 }
 
-function display_created_tickets(ticket) {
-    /*
-    Take ticket data sent through the CreatedTickets wiki macro and display those data as a ticket table within the wiki.
-    This function will create a div element containing the ticket table data and append that div to div with
-    "div-created-ticket-table".
-     */
-	var headers = {"ticket":"Ticket","summary":"Summary","product":"Product","status":"Status","milestone":"Milestone","component":"Component"}
-	var contentDiv = document.getElementById("div-created-ticket-table");
-	var div = document.createElement("div");
-	div.setAttribute("class","span12");
-	var h5 = document.createElement("h5");
-	h5.appendChild(document.createTextNode("Created Tickets"));
-	div.appendChild(h5);
-	var table = document.createElement("table");
-	table.setAttribute("class","listing tickets table table-bordered table-condensed query");
-	table.setAttribute("style","border-radius: 0px 0px 4px 4px");
-	tr = document.createElement("tr");
-	tr.setAttribute("class","trac-columns");
+/*
+Take ticket data sent through the CreatedTickets wiki macro and display those data as a ticket table within the wiki.
+This function will create a div element containing the ticket table data and append that div to div with
+"div-created-ticket-table".
+ */
+function display_created_tickets(tickets, unique_key) {
+
+	var headers = {"ticket":"Ticket", "summary":"Summary", "product":"Product", "status":"Status",
+        "milestone":"Milestone", "component":"Component"};
+
+	var contentDiv = $('#div-created-ticket-table' + unique_key);
+	var div = $('<div/>', {
+	    'class':'span12'
+    }).appendTo(contentDiv);
+
+	$('<h5/>').html('Created Tickets').appendTo(div);
+
+	var table = $('<table/>', {
+	    'class':'listing tickets table table-bordered table-condensed query',
+        'style':'border-radius: 0px 0px 4px 4px'
+    }).appendTo(div);
+
+    var tr_headers = $('<tr/>', {
+        'class':'trac-columns'
+    }).appendTo(table);
 			
-	for (header in headers){
-		th = document.createElement("th");
-		font = document.createElement("font");
-		font.setAttribute("color","#1975D1");
-		font.appendChild(document.createTextNode(headers[header]))
-		th = document.createElement("th");
-		th.appendChild(font);
-		tr.appendChild(th);
+	for (var header in headers){
+		var th = $('<th/>').appendTo(tr_headers);
+		var font = $('<font/>', {
+		    'color':'#1975D1'
+        }).html(headers[header]).appendTo(th);
 	}
-	table.appendChild(tr);
-	for ( i=0 ; i<Object.keys(ticket.tickets).length ; i++ ){
-		tr = document.createElement("tr");
-		for (j=0;j<6;j++){
-			if(j==0){
-				td = document.createElement("td");
-				a = document.createElement("a");
-				tkt = JSON.parse(ticket.tickets[i]);
-				a.setAttribute("href",tkt.url);
-				a.appendChild(document.createTextNode("#"+tkt.id));
-				td.appendChild(a);
-			}
-			else if(j==1){
-				td = document.createElement("td");
-				a = document.createElement("a");
-				tkt = JSON.parse(ticket.tickets[i]);
-				a.setAttribute("href",tkt.url);
-				a.appendChild(document.createTextNode(tkt.summary));
-				td.appendChild(a);
-			}
-			else if(j==2){
-				td = document.createElement("td");
-				tkt = JSON.parse(ticket.tickets[i]);
-				td.appendChild(document.createTextNode(tkt.product));
-			}
-			else if(j==3){
-				td = document.createElement("td");
-				tkt = JSON.parse(ticket.tickets[i]);
-				td.appendChild(document.createTextNode(tkt.status));
-			}
-			else if(j==4){
-				td = document.createElement("td");
-				tkt = JSON.parse(ticket.tickets[i]);
-				td.appendChild(document.createTextNode(tkt.milestone));
+
+	for (var index in tickets) {
+		var tr = $('<tr/>').appendTo(table);
+        var tkt = JSON.parse(tickets[index]);
+
+		for (var j = 0; j < 6; j++) {
+		    var td = $('<td/>');
+			if(j < 2) {
+
+				$('<a/>', {
+				    'href':tkt.url
+                }).html(j == 0 ? "#" + tkt.id : tkt.summary).appendTo(td);
 			}
-			else if(j==5){
-				td = document.createElement("td");
-				tkt = JSON.parse(ticket.tickets[i]);
-				td.appendChild(document.createTextNode(tkt.component));
+			else {
+			    td.html(j ==2 ? tkt.product : (j == 3 ? tkt.status : (j == 4 ? tkt.milestone : tkt.component)))
 			}
-			tr.appendChild(td);
+			td.appendTo(tr)
 		}
-		table.appendChild(tr);
 	}
-	div.appendChild(table);
-	contentDiv.appendChild(div);     
  }
+//line 537
\ No newline at end of file

Modified: bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/theme.py
URL: http://svn.apache.org/viewvc/bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/theme.py?rev=1763012&r1=1763011&r2=1763012&view=diff
==============================================================================
--- bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/theme.py (original)
+++ bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/theme.py Sat Oct  1 13:30:09 2016
@@ -17,14 +17,20 @@
 #  specific language governing permissions and limitations
 #  under the License.
 
-import sys
 import re
+import sys
 
+from bhdashboard import wiki
+from bhdashboard.util import dummy_request
+from bhdashboard.web_ui import DashboardModule
+from bhtheme.translation import _, add_domain
 from genshi.builder import tag
 from genshi.core import TEXT
 from genshi.filters.transform import Transformer
 from genshi.output import DocType
-
+from multiproduct.env import ProductEnvironment
+from multiproduct.web_ui import PRODUCT_RE, ProductModule
+from themeengine.api import ThemeBase, ThemeEngineSystem
 from trac.config import ListOption, Option
 from trac.core import Component, TracError, implements
 from trac.mimeview.api import get_mimetype
@@ -43,17 +49,8 @@ from trac.web.chrome import (add_stylesh
 from trac.web.main import IRequestHandler
 from trac.wiki.admin import WikiAdmin
 from trac.wiki.formatter import format_to_html
-
-from themeengine.api import ThemeBase, ThemeEngineSystem
-
-from bhdashboard.util import dummy_request
-from bhdashboard.web_ui import DashboardModule
-from bhdashboard import wiki
-
-from multiproduct.env import ProductEnvironment
-from multiproduct.web_ui import PRODUCT_RE, ProductModule
-from bhtheme.translation import _, add_domain
 from trac.wiki.macros import WikiMacroBase
+import random, string
 
 try:
     from multiproduct.ticket.web_ui import ProductTicketModule
@@ -764,7 +761,7 @@ class BatchCreateTicketsMacro(WikiMacroB
                 self.env.product is not None) and (
                 self.file == 'bh_wiki_view.html' or self.file == 'bh_wiki_edit.html' or self.file is None) and (
                 self.rqst.perm.has_permission('TRAC_ADMIN') or self.rqst.perm.has_permission('TICKET_BATCH_CREATE')):
-
+            #todo let the user select the product when creating tickets
             # generate the required data to be parsed to the js functions too create the empty ticket table.
 
             product_id = str(self.env.product.resource.id)
@@ -774,6 +771,8 @@ class BatchCreateTicketsMacro(WikiMacroB
                 "SELECT * FROM milestone WHERE product=%s", (product_id,))
             components = self.env.db_query(
                 "SELECT * FROM component WHERE product=%s", (product_id,))
+
+            random_string = '%s%s'%('-',''.join(random.choice(string.lowercase) for i in range(10)))
             form = tag.form(
                             tag.div(
                                 tag.span(
@@ -786,15 +785,16 @@ class BatchCreateTicketsMacro(WikiMacroB
                                         "emptyTable(" + to_json(str(self.rows)) + "," + to_json(product_name) + "," +
                                         to_json(milestones) + "," + to_json(components) + "," +
                                         to_json(self.rqst.href() + "/bct") + "," +
-                                        to_json(str(self.rqst.environ["HTTP_COOKIE"])) + ")",
-                                        id="js-caller",
+                                        to_json(str(self.rqst.environ["HTTP_COOKIE"])) + "," +
+                                        to_json(random_string)+ ")",
+                                        id="js-caller" + random_string,
                                         type="text/javascript"),
                                     class_="input-group-btn"),
                                     style="display:inline-block;position:relative;left: -30px;",
-                                    id="div-empty-table"),
+                                    id="div-empty-table" + random_string),
                                 method="get",
                                 style="display:inline",
-                                id="batchcreate")
+                                id="batchcreate" + random_string)
             try:
                 int(self.rows)
             except TracError:
@@ -1048,7 +1048,8 @@ class CreatedTicketsMacro(WikiMacroBase)
         """
 	Helps to generate a ticket table within the wiki.
 
-	You can use this macro in order to display the details of a batch of tickets. `CreatedTickets` macro takes exactly two 		integer arguments. The arguments defines the range of the tickets that will be displayed in the ticket table.
+	You can use this macro in order to display the details of a batch of tickets. `CreatedTickets` macro takes exactly
+	two integer arguments. The arguments defines the range of the tickets that will be displayed in the ticket table.
 
 	Example:
 	{{{
@@ -1085,8 +1086,9 @@ class CreatedTicketsMacro(WikiMacroBase)
         """
         if self.file == 'bh_wiki_view.html' or self.file == 'bh_wiki_edit.html' or self.file is None:
             # Extract the macro arguments.
-            start_id = int(args.split(',')[0])
-            end_id = int(args.split(',')[1])
+            id_range = args.split(',')
+            start_id = int(id_range[0])
+            end_id = int(id_range[1])
 
             display_tickets = self.env.db_query(
                 "SELECT id,summary,product,status,milestone,component FROM ticket WHERE uid>=%s and uid<=%s",
@@ -1095,7 +1097,6 @@ class CreatedTicketsMacro(WikiMacroBase)
                  end_id),
             )
             display_tickets_list = []
-            display_tickets_dict = {}
             for i in range(0, end_id - start_id):
                 tres = Neighborhood(
                     'product',
@@ -1117,26 +1118,27 @@ class CreatedTicketsMacro(WikiMacroBase)
                             'milestone': display_tickets[i][4],
                             'component': display_tickets[i][5]
                         }))
-            display_tickets_dict["tickets"] = display_tickets_list
 
+            random_string = '%s%s' % ('-', ''.join(random.choice(string.lowercase) for i in range(10)))
             # Send the ticket data to be displayed on the ticket table as JSON parameters.
-            add_script(self.rqst, 'theme/js/batchcreate.js')
             form = tag.form(
-                method="get",
-                style="display:inline",
-                id="batchcreate")
-            div = tag.div(
-                style="display:inline-block;position:relative;left: -30px;",
-                id="div-created-ticket-table")
-            span = tag.span(class_="input-group-btn")
-            body = tag.body(
-                id="js-caller",
-                onload="Javascript:display_created_tickets(" +
-                to_json(display_tickets_dict) +
-                ")")
-            span.append(body)
-            div.append(span)
-            form.append(div)
+                tag.div(
+                    tag.span(
+                        tag.script(
+                            type='text/javascript',
+                            charset='utf-8',
+                            src=str(self.rqst.href.chrome('theme/js/batchcreate.js'))),
+                        tag.script(
+                            'display_created_tickets(' + to_json(display_tickets_list) + ',' +
+                            to_json(random_string) + ')',
+                            id='js-caller' + random_string,
+                            type='text/javascript'),
+                        class_='input-group-btn'),
+                    style='display:inline-block;position:relative;left: -30px;',
+                    id='div-created-ticket-table' + random_string),
+                method='get',
+                style='display:inline',
+                id='batchcreate' + random_string)
             return form
         else:
             return None




Re: svn commit: r1763012 - in /bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme: htdocs/js/batchcreate.js theme.py

Posted by Dammina Sahabandu <dm...@gmail.com>.
Hi Gary,

Thank you very much for reviewing the code. I will make the recommended
changes asap and make the feature stable.

Thanks,
Dammina

On Sun, Oct 2, 2016 at 10:07 PM, Gary <ga...@physics.org> wrote:

> Hi Dammina,
>
> I notice that the batchcreate.js has some interesting indentation. It may
> be good to fix it to help people in reviewing the code. From memory I think
> we use 2 space indents in js code. There is also a surprising
>
> //line 537
>
>
> at the end of the file which does not look necessary.
>
> Cheers,
>     Gary
>
> On 01/10/16 14:30, dammina@apache.org wrote:
>
>> Author: dammina
>> Date: Sat Oct  1 13:30:09 2016
>> New Revision: 1763012
>>
>> URL: http://svn.apache.org/viewvc?rev=1763012&view=rev
>> Log:
>> restructure the jquery code snippets related to BatchCreateTickets and
>> CreatedTickets wiki macros
>>
>> Modified:
>>      bloodhound/branches/bep_0011_batch_create_tickets/bloodhoun
>> d_theme/bhtheme/htdocs/js/batchcreate.js
>>      bloodhound/branches/bep_0011_batch_create_tickets/bloodhoun
>> d_theme/bhtheme/theme.py
>>
>> Modified: bloodhound/branches/bep_0011_batch_create_tickets/bloodhound
>> _theme/bhtheme/htdocs/js/batchcreate.js
>> URL: http://svn.apache.org/viewvc/bloodhound/branches/bep_0011_ba
>> tch_create_tickets/bloodhound_theme/bhtheme/htdocs/js/
>> batchcreate.js?rev=1763012&r1=1763011&r2=1763012&view=diff
>> ============================================================
>> ==================
>> --- bloodhound/branches/bep_0011_batch_create_tickets/bloodhound
>> _theme/bhtheme/htdocs/js/batchcreate.js (original)
>> +++ bloodhound/branches/bep_0011_batch_create_tickets/bloodhound
>> _theme/bhtheme/htdocs/js/batchcreate.js Sat Oct  1 13:30:09 2016
>> @@ -17,225 +17,218 @@
>>    under the License.
>>    */
>>   -function emptyTable(numOfRows,product,milestones,components,href,token)
>> {
>> -    /*
>> +/*
>>       This function will be invoked from the BatchCreateTickets wiki
>> macro.
>>       The wiki macro will send the relevant details to create the empty
>> ticket table within the wiki.
>>       Then this function will generate the empty ticket table containing
>> appropriate number of rows to enter ticket data.
>> -     */
>> -       created_rows=numOfRows;
>> -       form_token = token.split(";")[0].split("=")[1];
>> -       if(numOfRows == ""){
>> -               alert("Enter the ticket batch size.")
>> -       }
>> -       else if(numOfRows != "" && document.getElementById("empty-table")
>> == null){
>> -       var contentDiv = document.getElementById("div-empty-table");
>> -    var headers = {"ticket":"","summary":"Summar
>> y","description":"Description","product":"Product","
>> priority":"Priority","milestone":"Milestone","component":"Component"}
>> -       priorities = ["blocker", "critical", "major", "minor", "trivial"];
>> -       types = ["defect", "enhancement", "task"];
>> -
>> -       var div = document.createElement("div");
>> -       div.setAttribute("class","span12");
>> -       div.setAttribute("id","empty-table");
>> -       var h5 = document.createElement("h5");
>> -       h5.appendChild(document.createTextNode("Batch Create Tickets"));
>> -       div.appendChild(h5);
>> -
>> -       var form = document.createElement("form");
>> -       form.setAttribute("id","bct-form");
>> -       form.setAttribute("name","bct");
>> -       form.setAttribute("method","post");
>> + */
>> +function emptyTable(numOfRows, products, milestones, components, href,
>> token, unique_key) {
>> +
>> +       var created_rows=numOfRows;
>> +       var form_token = token.split(";")[0].split("=")[1];
>> +
>> +    var headers = {"ticket":"","summary":"Summar
>> y","description":"Description","product":"Product",
>> +        "priority":"Priority","milestone":"Milestone","component":"
>> Component"};
>> +       var priorities = ["blocker", "critical", "major", "minor",
>> "trivial"];
>> +    var types = ["defect", "enhancement", "task"];
>> +
>> +       var contentDiv = $('#div-empty-table' + unique_key);
>> +
>> +    var div = $('<div/>', {
>> +    'id':'empty-table' + unique_key,
>> +    'class':'span12'
>> +    }).appendTo(contentDiv);
>> +
>> +       var h5 = $('<h5/>').html('Batch Create Tickets').appendTo(div);
>>
>> -       var div_token = document.createElement("div");
>> -       var form_token_val = document.createElement("input");
>> -       form_token_val.setAttribute("type","hidden");
>> -       form_token_val.setAttribute("name","__FORM_TOKEN");
>> -       form_token_val.setAttribute("value",form_token);
>> -       div_token.appendChild(form_token_val);
>> -       form.appendChild(div_token);
>> +       var form = $('<form/>', {
>> +           'id':'bct-form' + unique_key,
>> +        'name':'bct',
>> +        'method':'post'
>> +    }).appendTo(div);
>> +
>> +       $('<input/>', {
>> +           'type':'hidden',
>> +        'name':'__FORM_TOKEN',
>> +        'value':form_token
>> +    }).appendTo($('<div>').appendTo(form));
>>
>> -       var table = document.createElement("table");
>> -       table.setAttribute("class","listing tickets table table-bordered
>> table-condensed query");
>> -       table.setAttribute("style","border-radius: 0px 0px 4px 4px");
>> +       var table = $('<table/>', {
>> +           'class':'listing tickets table table-bordered table-condensed
>> query',
>> +        'style':'border-radius: 0px 0px 4px 4px'
>> +    }).appendTo(form);
>>
>> -       var tr = document.createElement("tr");
>> -       tr.setAttribute("class","trac-columns");
>> +       var tr = $('<tr/>', {
>> +           'class':'trac-columns'
>> +    }).appendTo(table);
>> +
>>         for (header in headers){
>> -               font = document.createElement("font");
>> -               font.setAttribute("color","#1975D1");
>> -               font.appendChild(document.cre
>> ateTextNode(headers[header]))
>> -               th = document.createElement("th");
>> -               th.appendChild(font);
>> -               tr.appendChild(th);
>> +           var th = $('<th/>').appendTo(tr);
>> +           $('<font/>', {
>> +               'color':'#1975D1'
>> +        }).html(headers[header]).appendTo(th);
>>         }
>> -       table.appendChild(tr);
>>
>> -       tbody = document.createElement("tbody");
>> -       for (i=0;i<numOfRows;i++){
>> -               tr_rows = document.createElement("tr");
>> -               for (header in headers){
>> -                       if(header == "ticket"){
>> -                               td_row = document.createElement("td");
>> -                               input_ticket =
>> document.createElement("input");
>> -                               input_ticket.setAttribute("ty
>> pe","checkbox");
>> -                               input_ticket.setAttribute("
>> id","field-ticket"+i);
>> -                               input_ticket.setAttribute("cl
>> ass","input-block-level");
>> -                               input_ticket.setAttribute("na
>> me","field_ticket"+i);
>> -                               td_row.appendChild(input_ticket);
>> -                               tr_rows.appendChild(td_row);
>> -                       }
>> -                       else if (header == "summary"){
>> -                               td_row = document.createElement("td");
>> -                               input_summary =
>> document.createElement("input");
>> -                               input_summary.setAttribute("t
>> ype","text");
>> -                               input_summary.setAttribute("i
>> d","field-summary"+i);
>> -                               input_summary.setAttribute("c
>> lass","input-block-level");
>> -                               input_summary.setAttribute("n
>> ame","field_summary"+i);
>> -                               td_row.appendChild(input_summary);
>> -                               tr_rows.appendChild(td_row);
>> -                       }
>> -                       else if (header == "description") {
>> -                               td_row = document.createElement("td");
>> -                               input_description =
>> document.createElement("textarea");
>> -                               input_description.setAttribut
>> e("id","field-description"+i);
>> -                               input_description.setAttribut
>> e("class","input-block-level");
>> -                               input_description.setAttribut
>> e("name","field_description"+i);
>> -                               input_description.setAttribut
>> e("rows","2");
>> -                               input_description.setAttribut
>> e("cols","28");
>> -                               td_row.appendChild(input_description);
>> -                               tr_rows.appendChild(td_row);
>> -                       }
>> -                       else if (header == "priority") {
>> -                               td_row = document.createElement("td");
>> -                               input_priority =
>> document.createElement("select");
>> -                               input_priority.setAttribute("
>> id","field-priority"+i);
>> -                               input_priority.setAttribute("
>> class","input-block-level");
>> -                               input_priority.setAttribute("
>> name","field_priority"+i);
>> -                               for (priority in priorities){
>> -                                       option =
>> document.createElement("option");
>> -                                       option.setAttribute("value",p
>> riorities[priority]);
>> -                                       option.appendChild(document.c
>> reateTextNode(priorities[priority]));
>> -                                       input_priority.appendChild(op
>> tion);
>> +       var tbody = $('<tbody>').appendTo(table);
>> +
>> +       for (var i=0; i < numOfRows; i++) {
>> +
>> +               var tr_rows = $('<tr>').appendTo(tbody);
>> +
>> +               for (var header in headers) {
>> +                   var td;
>> +                       if(header == "ticket") {
>> +
>> +                               td = $('<td>').appendTo(tr_rows);
>> +                               var input_ticket = $('<input/>', {
>> +                                   'id':'field-ticket' + unique_key +
>> '-' + i,
>> +                       'type':'checkbox',
>> +                    'name':'field_ticket' + i,
>> +                    'class':'input-block-level'
>> +                }).appendTo(td);
>> +
>> +                       } else if (header == "summary"){
>> +
>> +                           td = $('<td>').appendTo(tr_rows);
>> +                               var input_summary = $('<input/>', {
>> +                                   'id':'field-summary' + unique_key +
>> '-' + i,
>> +                       'type':'text',
>> +                    'name':'field_summary' + i,
>> +                    'class':'input-block-level'
>> +                }).appendTo(td);
>> +
>> +                       } else if (header == "description") {
>> +
>> +                           td = $('<td>').appendTo(tr_rows);
>> +                               var input_description = $('<textarea/>', {
>> +                                   'id':'field-description' + unique_key
>> + '-' + i,
>> +                    'name':'field_description' + i,
>> +                    'class':'input-block-level',
>> +                    'rows':'2',
>> +                    'cols':'28'
>> +                }).appendTo(td);
>> +
>> +                       } else if (header == "priority") {
>> +
>> +                           td = $('<td>').appendTo(tr_rows);
>> +                               var input_priority = $('<select/>', {
>> +                                   'id':'field-priority' + unique_key +
>> '-' + i,
>> +                    'name':'field_priority' + i,
>> +                    'class':'input-block-level'
>> +                }).appendTo(td);
>> +
>> +                               for (var priority in priorities){
>> +                                   $('<option/>', {
>> +                                       'value':priorities[priority]
>> +                    }).html(priorities[priority]).
>> appendTo(input_priority);
>>                                 }
>> -                               td_row.appendChild(input_priority);
>> -                               tr_rows.appendChild(td_row);
>> -                       }
>> -                       else if (header == "product") {
>> -                               td_row = document.createElement("td");
>> -                               field_product =
>> document.createElement("select");
>> -                               field_product.setAttribute("i
>> d","field-product"+i);
>> -                               field_product.setAttribute("c
>> lass","input-block-level");
>> -                               field_product.setAttribute("n
>> ame","field_product"+i);
>> -                               for (p in product){
>> -                                       option =
>> document.createElement("option");
>> -                                       option.setAttribute("value",(
>> product[p])[0]);
>> -                                       option.appendChild(document.c
>> reateTextNode((product[p])[1]));
>> -                                       field_product.appendChild(opt
>> ion);
>> +
>> +                       } else if (header == "product") {
>> +
>> +                           td = $('<td>').appendTo(tr_rows);
>> +                               var field_product = $('<select/>', {
>> +                                   'id':'field-product' + unique_key +
>> '-' + i,
>> +                    'name':'field_product' + i,
>> +                    'class':'input-block-level'
>> +                }).appendTo(td);
>> +
>> +                               for (var product in products){
>> +                                   $('<option/>', {
>> +                                       'value':(products[product])[0]
>> +                    }).html((products[product])[1]
>> ).appendTo(field_product);
>>                                 }
>> -                               td_row.appendChild(field_product);
>> -                               tr_rows.appendChild(td_row);
>> -                       }
>> -                       else if (header == "milestone"){
>> -                               td_row = document.createElement("td");
>> -                               field_milestone =
>> document.createElement("select");
>> -                               field_milestone.setAttribute(
>> "id","field-milestone"+i);
>> -                               field_milestone.setAttribute(
>> "class","input-block-level");
>> -                               field_milestone.setAttribute(
>> "name","field_milestone"+i);
>> -                               for (milestone in milestones){
>> -                                       option =
>> document.createElement("option");
>> -                                       option.setAttribute("value",(
>> milestones[milestone])[0]);
>> -                                       option.appendChild(document.c
>> reateTextNode((milestones[milestone])[0]));
>> -                                       field_milestone.appendChild(o
>> ption);
>> +
>> +                       } else if (header == "milestone") {
>> +
>> +                           td = $('<td>').appendTo(tr_rows);
>> +                               var field_milestone = $('<select/>', {
>> +                                   'id':'field-milestone' + unique_key +
>> '-' + i,
>> +                    'name':'field_milestone' + i,
>> +                    'class':'input-block-level'
>> +                }).appendTo(td);
>> +
>> +                               for (var milestone in milestones){
>> +                                   $('<option/>', {
>> +                                       'value':(milestones[
>> milestone])[0]
>> +                    }).html((milestones[milestone]
>> )[0]).appendTo(field_milestone);
>>                                 }
>> -                               td_row.appendChild(field_milestone);
>> -                               tr_rows.appendChild(td_row);
>> -                       }
>> -                       else if (header == "component"){
>> -                               td_row = document.createElement("td");
>> -                               field_component =
>> document.createElement("select");
>> -                               field_component.setAttribute(
>> "id","field-component"+i);
>> -                               field_component.setAttribute(
>> "class","input-block-level");
>> -                               field_component.setAttribute(
>> "name","field_component"+i);
>> -                               for (component in components){
>> -                                       option =
>> document.createElement("option");
>> -                                       option.setAttribute("value",(
>> components[component])[0]);
>> -                                       option.appendChild(document.c
>> reateTextNode((components[component])[0]));
>> -                                       field_component.appendChild(o
>> ption);
>> +
>> +                       } else if (header == "component") {
>> +
>> +                           td = $('<td>').appendTo(tr_rows);
>> +                               var field_component = $('<select/>', {
>> +                                   'id':'field-component' + unique_key +
>> '-' + i,
>> +                    'name':'field_component' + i,
>> +                    'class':'input-block-level'
>> +                }).appendTo(td);
>> +
>> +                               for (var component in components){
>> +                                   $('<option/>', {
>> +                                       'value':(components[
>> component])[0]
>> +                    }).html((components[component]
>> )[0]).appendTo(field_component);
>>                                 }
>> -                               td_row.appendChild(field_component);
>> -                               tr_rows.appendChild(td_row);
>>                         }
>>                 }
>> -               tbody.appendChild(tr_rows);
>>         }
>> -       table.appendChild(tbody);
>> -       form.appendChild(table);
>>   -     remove_row_button = document.createElement("button");
>> -       remove_row_button.setAttribute("class","btn pull-right");
>> -       remove_row_button.setAttribute("type","button");
>> -       remove_row_button.addEventListener("click", function(event) {
>> -               numOfRows=parseInt(numOfRows)
>> -parseInt(remove_row_btn_action(numOfRows));
>> -               event.preventDefault();
>> -       });
>> -       remove_row_button.setAttribute("id","bct-rmv-empty-row");
>> -       remove_row_button.appendChild(document.createTextNode("-"));
>> -       form.appendChild(remove_row_button);
>> -
>> -       add_row_button = document.createElement("button");
>> -       add_row_button.setAttribute("class","btn pull-right");
>> -       add_row_button.setAttribute("type","button");
>> -       add_row_button.addEventListener("click", function(event) {
>> -               add_row_btn_action(product,mi
>> lestones,components,created_rows);
>> -               numOfRows=parseInt(numOfRows)+1;
>> -               created_rows=parseInt(created_rows)+1;
>> -               event.preventDefault();
>> -       });
>> -       add_row_button.setAttribute("id","bct-add-empty-row");
>> -       add_row_button.appendChild(document.createTextNode("+"));
>> -       form.appendChild(add_row_button);
>> -
>> -    submit_button = document.createElement("button");
>> -       submit_button.setAttribute("class","btn pull-right");
>> -       submit_button.setAttribute("type","button");
>> -       submit_button.addEventListener("click", function(event) {
>> -               var empty_row=false;
>> -               var cnt=0;
>> -               for (var k = 0; k <parseInt(numOfRows)+parseInt(cnt);
>> k++) {
>> -                       var element = document.getElementById("field
>> -summary"+k);
>> -                       if(element==null){
>> -                               cnt=parseInt(cnt)+1;
>> -                               continue;
>> -                       }
>> -
>> -                       var summary_val=document.getElemen
>> tById("field-summary"+k).value;
>> -                       if(summary_val==""){
>> -                               var line_number = parseInt(k)+1;
>> -                               var confirmation = confirm("Summery field
>> of one or more tickets are empty. They will not get created!");
>> -                               empty_row=true;
>> -                               break;
>> -                       }
>> -               };
>> -               if(confirmation == true || !empty_row){
>> -                       submit_btn_action();
>> -                       event.preventDefault();
>> -               }
>> -       });
>> -       submit_button.setAttribute("id","bct-create");
>> -       submit_button.setAttribute("data-target",href);
>> -       submit_button.appendChild(document.createTextNode("save"));
>> -       form.appendChild(submit_button);
>> -
>> -       cancle_button = document.createElement("button");
>> -       cancle_button.setAttribute("class","btn pull-right");
>> -       cancle_button.setAttribute("type","button");
>> -       cancle_button.setAttribute("onclick","deleteForm()");
>> -       cancle_button.appendChild(document.createTextNode("cancel"));
>> -       form.appendChild(cancle_button);
>> -
>> -       div.appendChild(form);
>> -       contentDiv.appendChild(div);
>> -       }
>> +       $('<button/>', {
>> +           'id':'bct-rmv-empty-row' + unique_key,
>> +        'type':'button',
>> +        'class':'btn pull-right',
>> +        'click':function() {
>> +            numOfRows = parseInt(numOfRows) -
>> parseInt(remove_row_btn_action(numOfRows, unique_key));
>> +        }
>> +       }).html('-').appendTo(form);
>> +
>> +    $('<button/>', {
>> +           'id':'bct-add-empty-row' + unique_key,
>> +        'type':'button',
>> +        'class':'btn pull-right',
>> +        'click':function() {
>> +               add_row_btn_action(products, milestones, components,
>> created_rows, unique_key, headers, tbody);
>> +            numOfRows = parseInt(numOfRows) + 1;
>> +            created_rows = parseInt(created_rows) + 1;
>> +        }
>> +       }).html('+').appendTo(form);
>> +
>> +    $('<button/>', {
>> +           'id':'bct-create' + unique_key,
>> +        'type':'button',
>> +        'class':'btn pull-right',
>> +        'data-target':href,
>> +        'click':function() {
>> +               var empty_row=false;
>> +            var cnt=0;
>> +            for (var k = 0; k < parseInt(numOfRows) + parseInt(cnt);
>> k++) {
>> +
>> +                var element = $("#field-summary" + k);
>> +                if(element == null) {
>> +                    cnt = parseInt(cnt) + 1;
>> +                    continue;
>> +                }
>> +
>> +                var summary_val = element.val();
>> +                if(summary_val == ""){
>> +                    var line_number = parseInt(k) + 1;
>> +                    var confirmation = confirm("Summery field of one or
>> more tickets are empty. " +
>> +                        "They will not get created!");
>> +                    empty_row=true;
>> +                    break;
>> +                }
>> +            }
>> +            if(confirmation == true || !empty_row){
>> +                submit_btn_action(unique_key);
>> +            }
>> +        }
>> +       }).html('save').appendTo(form);
>> +
>> +       $('<button/>', {
>> +        'type':'button',
>> +        'class':'btn pull-right',
>> +        'click':function() {
>> +               deleteForm(unique_key);
>> +        }
>> +       }).html('cancel').appendTo(form);
>>     }
>>   @@ -243,216 +236,178 @@ function submitForm(){
>>         document.getElementById("bct-form").submit();
>>   }
>>   -function deleteForm(){
>> -    /*
>> -    This function will invoke when the user clicks on cancel button
>> under the empty table.
>> -    Then this function will remove the empty table from the wiki.
>> -     */
>> -       document.getElementById("empty-table").remove();
>> +/*
>> + Then this function will remove the empty table from the wiki.
>> + */
>> +function deleteForm(unique_key){
>> +       $("#empty-table" + unique_key).remove();
>>   }
>>   -function submit_btn_action() {
>> -    /*
>> -    This function will send a HTTP POST request to the backend.
>> -    The form containing the empty table and its data will be submitted.
>> -    Then the empty table will be replaced with the ticket table
>> containing details of the created tickets.
>> -     */
>> +/*
>> +This function will send a HTTP POST request to the backend.
>> +The form containing the empty table and its data will be submitted.
>> +Then the empty table will be replaced with the ticket table containing
>> details of the created tickets.
>> + */
>> +function submit_btn_action(unique_key) {
>> +
>>       // data-target is the base url for the product in current scope
>> -       var product_base_url = $('#bct-create').attr('data-target');
>> -    if (product_base_url === '/')
>> -        product_base_url = '';
>> -        $.post(product_base_url , $('#bct-form').serialize(),
>> -        function(ticket) {
>> -                       deleteForm();
>> -
>> -                       var headers = {"ticket":"Ticket","summary":"
>> Summary","product":"Product","status":"Status","milestone":"
>> Milestone","component":"Component"}
>> -                       var contentDiv = document.getElementById("div-e
>> mpty-table");
>> -                       var div = document.createElement("div");
>> -                       div.setAttribute("class","span12");
>> -                       var h5 = document.createElement("h5");
>> -                       h5.appendChild(document.createTextNode("Created
>> Tickets"));
>> -                       div.appendChild(h5);
>> -                       var table = document.createElement("table");
>> -                       table.setAttribute("class","listing tickets
>> table table-bordered table-condensed query");
>> -                       table.setAttribute("style","border-radius: 0px
>> 0px 4px 4px");
>> -                       tr = document.createElement("tr");
>> -                       tr.setAttribute("class","trac-columns");
>> -
>> -                       for (header in headers){
>> -                               th = document.createElement("th");
>> -                               font = document.createElement("font");
>> -                               font.setAttribute("color","#1975D1");
>> -                               font.appendChild(document.cre
>> ateTextNode(headers[header]))
>> -                               th = document.createElement("th");
>> -                               th.appendChild(font);
>> -                               tr.appendChild(th);
>> -                       }
>> -                       table.appendChild(tr);
>> -
>> -                       for ( i=0 ; i<Object.keys(ticket.tickets).length
>> ; i++ ){
>> -                               tr = document.createElement("tr");
>> -                               for (j=0;j<6;j++){
>> -                                       if(j==0){
>> -                                               td =
>> document.createElement("td");
>> -                                               a =
>> document.createElement("a");
>> -                                               tkt =
>> JSON.parse(ticket.tickets[i]);
>> -                                               a.setAttribute("href",tkt.
>> url);
>> -
>>  a.appendChild(document.createTextNode("#"+tkt.id));
>> -                                               td.appendChild(a);
>> -                                       }
>> -                                       else if(j==1){
>> -                                               td =
>> document.createElement("td");
>> -                                               a =
>> document.createElement("a");
>> -                                               tkt =
>> JSON.parse(ticket.tickets[i]);
>> -                                               a.setAttribute("href",tkt.
>> url);
>> -
>>  a.appendChild(document.createTextNode(tkt.summary));
>> -                                               td.appendChild(a);
>> -                                       }
>> -                                       else if(j==2){
>> -                                               td =
>> document.createElement("td");
>> -                                               tkt =
>> JSON.parse(ticket.tickets[i]);
>> -
>>  td.appendChild(document.createTextNode(tkt.product));
>> -                                       }
>> -                                       else if(j==3){
>> -                                               td =
>> document.createElement("td");
>> -                                               tkt =
>> JSON.parse(ticket.tickets[i]);
>> -
>>  td.appendChild(document.createTextNode(tkt.status));
>> -                                       }
>> -                                       else if(j==4){
>> -                                               td =
>> document.createElement("td");
>> -                                               tkt =
>> JSON.parse(ticket.tickets[i]);
>> -
>>  td.appendChild(document.createTextNode(tkt.milestone));
>> -                                       }
>> -                                       else if(j==5){
>> -                                               td =
>> document.createElement("td");
>> -                                               tkt =
>> JSON.parse(ticket.tickets[i]);
>> -
>>  td.appendChild(document.createTextNode(tkt.component));
>> -                                       }
>> -                                       tr.appendChild(td);
>> -                               }
>> -                               table.appendChild(tr);
>> -                       }
>> -                       div.appendChild(table);
>> -                       contentDiv.appendChild(div);
>> -        });
>> +       var product_base_url = $('#bct-create' +
>> unique_key).attr('data-target');
>> +
>> +    $.post(product_base_url , $('#bct-form' + unique_key).serialize(),
>> +    function(ticket) {
>> +        deleteForm(unique_key);
>> +
>> +        var headers = {"ticket":"Ticket", "summary":"Summary",
>> "product":"Product", "status":"Status",
>> +            "milestone":"Milestone", "component":"Component"};
>> +
>> +        var contentDiv = $("#div-empty-table" + unique_key);
>> +
>> +        var div = $('<div/>', {
>> +            'class':'span12'
>> +        }).appendTo(contentDiv);
>> +
>> +        var h5 = $('<h5/>', {
>> +            'class':'span12'
>> +        }).html("Created Tickets").appendTo(div);
>> +
>> +        var table = $('<table/>', {
>> +            'class':'listing tickets table table-bordered
>> table-condensed query',
>> +            'style':'border-radius: 0px 0px 4px 4px'
>> +        }).appendTo(div);
>> +
>> +        var header_tr = $('<tr/>', {
>> +            'class':'trac-columns'
>> +        }).appendTo(table);
>> +
>> +        for (var header in headers){
>> +
>> +            var th = $('<th/>', {
>> +                'class':'trac-columns'
>> +            }).appendTo(header_tr);
>> +
>> +            $('<font/>', {
>> +                'color':'#1975D1'
>> +            }).html(headers[header]).appendTo(th);
>> +        }
>> +
>> +        for (var json_ticket in ticket.tickets) {
>> +            var tr = $('<tr/>').appendTo(table);
>> +            var tkt = JSON.parse(json_ticket);
>> +            for (var j = 0; j < 6; j++) {
>> +                var td = $('<td/>').appendTo(tr);
>> +                if(j < 2) {
>> +                    $('<a/>', {
>> +                        'href':tkt.url
>> +                    }).html(j == 0 ? '#' + tkt.id :
>> tkt.summary).appendTo(td);
>> +                } else {
>> +                    td.html(j == 2 ? tkt.product : (j == 3 ? tkt.status
>> : (j == 4 ? tkt.milestone : tkt.component)));
>> +                }
>> +            }
>> +        }
>> +    });
>>   }
>>   -function add_row_btn_action(product,milestones,components,i){
>> -    /*
>> -    This function will be called when the users add a new row to the
>> empty table.
>> -    The new empty row will be always appended to the end row of the
>> empty table.
>> -     */
>> -       var headers = {"ticket":"","summary":"Summar
>> y","description":"Description","product":"Product","
>> priority":"Priority","milestone":"Milestone","component":"Component"}
>> -       //var statuses = ["new", "accepted", "assigned", "closed",
>> "reopened"];
>> +/*
>> +This function will be called when the users add a new row to the empty
>> table.
>> +The new empty row will be always appended to the end row of the empty
>> table.
>> + */
>> +function add_row_btn_action(products, milestones, components, i, random,
>> headers, tbody) {
>> +
>> +       var statuses = ["new", "accepted", "assigned", "closed",
>> "reopened"];
>>         var priorities = ["blocker", "critical", "major", "minor",
>> "trivial"];
>>         var types = ["defect", "enhancement", "task"];
>>   -    tr_rows = document.createElement("tr");
>> +    var tr = $('<tr/>').appendTo(tbody);
>>   -    for (header in headers){
>> -       if(header == "ticket"){
>> -                       td_row = document.createElement("td");
>> -                       input_ticket = document.createElement("input");
>> -                       input_ticket.setAttribute("type","checkbox");
>> -                       input_ticket.setAttribute("id","field-ticket"+i);
>> -                       input_ticket.setAttribute("cl
>> ass","input-block-level");
>> -                       input_ticket.setAttribute("na
>> me","field_ticket"+i);
>> -                       td_row.appendChild(input_ticket);
>> -                       tr_rows.appendChild(td_row);
>> -               }
>> -               else if (header == "summary"){
>> -                               td_row = document.createElement("td");
>> -                               input_summary =
>> document.createElement("input");
>> -                               input_summary.setAttribute("t
>> ype","text");
>> -                               input_summary.setAttribute("i
>> d","field-summary"+i);
>> -                               input_summary.setAttribute("c
>> lass","input-block-level");
>> -                               input_summary.setAttribute("n
>> ame","field_summary"+i);
>> -                               td_row.appendChild(input_summary);
>> -                               tr_rows.appendChild(td_row);
>> -               }
>> -               else if (header == "description") {
>> -                       td_row = document.createElement("td");
>> -                       input_description = document.createElement("textar
>> ea");
>> -                       input_description.setAttribut
>> e("id","field-description"+i);
>> -                       input_description.setAttribut
>> e("class","input-block-level");
>> -                       input_description.setAttribut
>> e("name","field_description"+i);
>> -                       input_description.setAttribute("rows","2");
>> -                       input_description.setAttribute("cols","28");
>> -                       td_row.appendChild(input_description);
>> -                       tr_rows.appendChild(td_row);
>> -               }
>> -               else if (header == "priority") {
>> -                       td_row = document.createElement("td");
>> -                       input_priority = document.createElement("select
>> ");
>> -                       input_priority.setAttribute("
>> id","field-priority"+i);
>> -                       input_priority.setAttribute("
>> class","input-block-level");
>> -                       input_priority.setAttribute("
>> name","field_priority"+i);
>> -                       for (priority in priorities){
>> -                               option = document.createElement("option
>> ");
>> -                               option.setAttribute("value",p
>> riorities[priority]);
>> -                               option.appendChild(document.c
>> reateTextNode(priorities[priority]));
>> -                               input_priority.appendChild(option);
>> -                       }
>> -                       td_row.appendChild(input_priority);
>> -                       tr_rows.appendChild(td_row);
>> -               }
>> -               else if (header == "product") {
>> -                       td_row = document.createElement("td");
>> -                       field_product = document.createElement("select");
>> -                       field_product.setAttribute("i
>> d","field-product"+i);
>> -                       field_product.setAttribute("c
>> lass","input-block-level");
>> -                       field_product.setAttribute("n
>> ame","field_product"+i);
>> -                       for (p in product){
>> -                               option = document.createElement("option
>> ");
>> -                               option.setAttribute("value",(
>> product[p])[0]);
>> -                               option.appendChild(document.c
>> reateTextNode((product[p])[1]));
>> -                               field_product.appendChild(option);
>> -                       }
>> -                       td_row.appendChild(field_product);
>> -                       tr_rows.appendChild(td_row);
>> -               }
>> -               else if (header == "milestone"){
>> -                       td_row = document.createElement("td");
>> -                       field_milestone = document.createElement("select
>> ");
>> -                       field_milestone.setAttribute(
>> "id","field-milestone"+i);
>> -                       field_milestone.setAttribute(
>> "class","input-block-level");
>> -                       field_milestone.setAttribute(
>> "name","field_milestone"+i);
>> -                       for (milestone in milestones){
>> -                               option = document.createElement("option
>> ");
>> -                               option.setAttribute("value",(
>> milestones[milestone])[0]);
>> -                               option.appendChild(document.c
>> reateTextNode((milestones[milestone])[0]));
>> -                               field_milestone.appendChild(option);
>> -                       }
>> -                       td_row.appendChild(field_milestone);
>> -                       tr_rows.appendChild(td_row);
>> -               }
>> -               else if (header == "component"){
>> -                       td_row = document.createElement("td");
>> -                       field_component = document.createElement("select
>> ");
>> -                       field_component.setAttribute(
>> "id","field-component"+i);
>> -                       field_component.setAttribute(
>> "class","input-block-level");
>> -                       field_component.setAttribute(
>> "name","field_component"+i);
>> -                       for (component in components){
>> -                               option = document.createElement("option
>> ");
>> -                               option.setAttribute("value",(
>> components[component])[0]);
>> -                               option.appendChild(document.c
>> reateTextNode((components[component])[0]));
>> -                               field_component.appendChild(option);
>> +    for (var header in headers) {
>> +
>> +        var td = $('<td/>').appendTo(tr);
>> +        var unique_key = random + '-' + i;
>> +
>> +        if(header == 'ticket') {
>> +                       $('<input/>', {
>> +                           'id':'field-ticket' + unique_key,
>> +                'name':'field_ticket' + unique_key,
>> +                'class':'input-block-level',
>> +                           'type':'checkbox'
>> +            }).appendTo(td);
>> +               } else if (header == "summary") {
>> +
>> +                   $('<input/>', {
>> +                           'id':'field-summary' + unique_key,
>> +                'name':'field_summary' + unique_key,
>> +                'class':'input-block-level',
>> +                           'type':'text'
>> +            }).appendTo(td);
>> +               } else if (header == "description") {
>> +
>> +                   $('<textarea/>', {
>> +                           'id':'field-description' + unique_key,
>> +                'name':'field_description' + unique_key,
>> +                'class':'input-block-level',
>> +                           'rows':'2',
>> +                'cols':'28'
>> +            }).appendTo(td);
>> +               } else if (header == "priority") {
>> +
>> +                   var input_priority = $('<select/>', {
>> +                           'id':'field-priority' + unique_key,
>> +                'name':'field_priority' + unique_key,
>> +                'class':'input-block-level'
>> +            }).appendTo(td);
>> +                       for (var priority in priorities){
>> +                               $('<option/>', {
>> +                                   'value':priorities[priority]
>> +                }).html(priorities[priority]).appendTo(input_priority);
>> +                       }
>> +               } else if (header == "product") {
>> +
>> +                   var field_product = $('<select/>', {
>> +                           'id':'field-product' + unique_key,
>> +                'name':'field_product' + unique_key,
>> +                'class':'input-block-level'
>> +            }).appendTo(td);
>> +                       for (var product in products) {
>> +                               $('<option/>', {
>> +                                   'value':(products[product])[0]
>> +                }).html((products[product])[1]).appendTo(field_product);
>> +                       }
>> +               } else if (header == "milestone") {
>> +
>> +                   var field_milestone = $('<select/>', {
>> +                           'id':'field-milestone' + unique_key,
>> +                'name':'field_milestone' + unique_key,
>> +                'class':'input-block-level'
>> +            }).appendTo(td);
>> +                       for (var milestone in milestones) {
>> +                               $('<option/>', {
>> +                                   'value':(milestones[milestone])[0]
>> +                }).html((milestones[milestone]
>> )[0]).appendTo(field_milestone);
>> +                       }
>> +               } else if (header == "component") {
>> +
>> +                   var field_component = $('<select/>', {
>> +                           'id':'field-component' + unique_key,
>> +                'name':'field_component' + unique_key,
>> +                'class':'input-block-level'
>> +            }).appendTo(td);
>> +                       for (var component in components) {
>> +                               $('<option/>', {
>> +                                   'value':(components[component])[0]
>> +                }).html((components[component]
>> )[0]).appendTo(field_component);
>>                         }
>> -                       td_row.appendChild(field_component);
>> -                       tr_rows.appendChild(td_row);
>>                 }
>>         }
>> -       document.getElementById("empty-table").childNodes[1].childN
>> odes[1].childNodes[1].appendChild(tr_rows);
>>   }
>>   -function remove_row_btn_action(numOfRows){
>> -    /*
>> -    This function will be called when the user removes a table row of
>> the empty table.
>> -     */
>> -       var cnt=0;
>> -       for(var i=0;i<parseInt(numOfRows)-parseInt(cnt);i++){
>> -               if(document.getElementById("e
>> mpty-table").childNodes[1].childNodes[1].childNodes[1].child
>> Nodes[i].childNodes[0].childNodes[0].checked){
>> -                       document.getElementById("empt
>> y-table").childNodes[1].childNodes[1].childNodes[1].childNod
>> es[i].remove();
>> +/*
>> +This function will be called when the user removes a table row of the
>> empty table.
>> + */
>> +function remove_row_btn_action(numOfRows, unique_key) {
>> +       var cnt = 0;
>> +       for(var i = 0; i < parseInt(numOfRows) - parseInt(cnt); i++) {
>> +               if(document.getElementById('empty-table' +
>> unique_key).childNodes[1].childNodes[1].childNodes[1].childN
>> odes[i].childNodes[0].childNodes[0].checked) {
>> +                       document.getElementById('empty-table' +
>> unique_key).childNodes[1].childNodes[1].childNodes[1].childN
>> odes[i].remove();
>>                         cnt=cnt+1;
>>                         i--;
>>                 }
>> @@ -460,78 +415,56 @@ function remove_row_btn_action(numOfRows
>>         return cnt;
>>   }
>>   -function display_created_tickets(ticket) {
>> -    /*
>> -    Take ticket data sent through the CreatedTickets wiki macro and
>> display those data as a ticket table within the wiki.
>> -    This function will create a div element containing the ticket table
>> data and append that div to div with
>> -    "div-created-ticket-table".
>> -     */
>> -       var headers = {"ticket":"Ticket","summary":"
>> Summary","product":"Product","status":"Status","milestone":"
>> Milestone","component":"Component"}
>> -       var contentDiv = document.getElementById("div-c
>> reated-ticket-table");
>> -       var div = document.createElement("div");
>> -       div.setAttribute("class","span12");
>> -       var h5 = document.createElement("h5");
>> -       h5.appendChild(document.createTextNode("Created Tickets"));
>> -       div.appendChild(h5);
>> -       var table = document.createElement("table");
>> -       table.setAttribute("class","listing tickets table table-bordered
>> table-condensed query");
>> -       table.setAttribute("style","border-radius: 0px 0px 4px 4px");
>> -       tr = document.createElement("tr");
>> -       tr.setAttribute("class","trac-columns");
>> +/*
>> +Take ticket data sent through the CreatedTickets wiki macro and display
>> those data as a ticket table within the wiki.
>> +This function will create a div element containing the ticket table data
>> and append that div to div with
>> +"div-created-ticket-table".
>> + */
>> +function display_created_tickets(tickets, unique_key) {
>> +
>> +       var headers = {"ticket":"Ticket", "summary":"Summary",
>> "product":"Product", "status":"Status",
>> +        "milestone":"Milestone", "component":"Component"};
>> +
>> +       var contentDiv = $('#div-created-ticket-table' + unique_key);
>> +       var div = $('<div/>', {
>> +           'class':'span12'
>> +    }).appendTo(contentDiv);
>> +
>> +       $('<h5/>').html('Created Tickets').appendTo(div);
>> +
>> +       var table = $('<table/>', {
>> +           'class':'listing tickets table table-bordered table-condensed
>> query',
>> +        'style':'border-radius: 0px 0px 4px 4px'
>> +    }).appendTo(div);
>> +
>> +    var tr_headers = $('<tr/>', {
>> +        'class':'trac-columns'
>> +    }).appendTo(table);
>>
>> -       for (header in headers){
>> -               th = document.createElement("th");
>> -               font = document.createElement("font");
>> -               font.setAttribute("color","#1975D1");
>> -               font.appendChild(document.cre
>> ateTextNode(headers[header]))
>> -               th = document.createElement("th");
>> -               th.appendChild(font);
>> -               tr.appendChild(th);
>> +       for (var header in headers){
>> +               var th = $('<th/>').appendTo(tr_headers);
>> +               var font = $('<font/>', {
>> +                   'color':'#1975D1'
>> +        }).html(headers[header]).appendTo(th);
>>         }
>> -       table.appendChild(tr);
>> -       for ( i=0 ; i<Object.keys(ticket.tickets).length ; i++ ){
>> -               tr = document.createElement("tr");
>> -               for (j=0;j<6;j++){
>> -                       if(j==0){
>> -                               td = document.createElement("td");
>> -                               a = document.createElement("a");
>> -                               tkt = JSON.parse(ticket.tickets[i]);
>> -                               a.setAttribute("href",tkt.url);
>> -                               a.appendChild(document.create
>> TextNode("#"+tkt.id));
>> -                               td.appendChild(a);
>> -                       }
>> -                       else if(j==1){
>> -                               td = document.createElement("td");
>> -                               a = document.createElement("a");
>> -                               tkt = JSON.parse(ticket.tickets[i]);
>> -                               a.setAttribute("href",tkt.url);
>> -                               a.appendChild(document.create
>> TextNode(tkt.summary));
>> -                               td.appendChild(a);
>> -                       }
>> -                       else if(j==2){
>> -                               td = document.createElement("td");
>> -                               tkt = JSON.parse(ticket.tickets[i]);
>> -                               td.appendChild(document.creat
>> eTextNode(tkt.product));
>> -                       }
>> -                       else if(j==3){
>> -                               td = document.createElement("td");
>> -                               tkt = JSON.parse(ticket.tickets[i]);
>> -                               td.appendChild(document.creat
>> eTextNode(tkt.status));
>> -                       }
>> -                       else if(j==4){
>> -                               td = document.createElement("td");
>> -                               tkt = JSON.parse(ticket.tickets[i]);
>> -                               td.appendChild(document.creat
>> eTextNode(tkt.milestone));
>> +
>> +       for (var index in tickets) {
>> +               var tr = $('<tr/>').appendTo(table);
>> +        var tkt = JSON.parse(tickets[index]);
>> +
>> +               for (var j = 0; j < 6; j++) {
>> +                   var td = $('<td/>');
>> +                       if(j < 2) {
>> +
>> +                               $('<a/>', {
>> +                                   'href':tkt.url
>> +                }).html(j == 0 ? "#" + tkt.id :
>> tkt.summary).appendTo(td);
>>                         }
>> -                       else if(j==5){
>> -                               td = document.createElement("td");
>> -                               tkt = JSON.parse(ticket.tickets[i]);
>> -                               td.appendChild(document.creat
>> eTextNode(tkt.component));
>> +                       else {
>> +                           td.html(j ==2 ? tkt.product : (j == 3 ?
>> tkt.status : (j == 4 ? tkt.milestone : tkt.component)))
>>                         }
>> -                       tr.appendChild(td);
>> +                       td.appendTo(tr)
>>                 }
>> -               table.appendChild(tr);
>>         }
>> -       div.appendChild(table);
>> -       contentDiv.appendChild(div);
>>    }
>> +//line 537
>> \ No newline at end of file
>>
>> Modified: bloodhound/branches/bep_0011_batch_create_tickets/bloodhound
>> _theme/bhtheme/theme.py
>> URL: http://svn.apache.org/viewvc/bloodhound/branches/bep_0011_ba
>> tch_create_tickets/bloodhound_theme/bhtheme/theme.py?rev=
>> 1763012&r1=1763011&r2=1763012&view=diff
>> ============================================================
>> ==================
>> --- bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/theme.py
>> (original)
>> +++ bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/theme.py
>> Sat Oct  1 13:30:09 2016
>
>


-- 
Dammina Sahabandu
SSE, AdroitLogic (pvt) Ltd.
Committer, Apache Software Foundation
AMIE (SL)
Bsc Eng Hons (Moratuwa)
+94716422775

Re: svn commit: r1763012 - in /bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme: htdocs/js/batchcreate.js theme.py

Posted by Gary <ga...@physics.org>.
Hi Dammina,

I notice that the batchcreate.js has some interesting indentation. It 
may be good to fix it to help people in reviewing the code. From memory 
I think we use 2 space indents in js code. There is also a surprising

//line 537


at the end of the file which does not look necessary.

Cheers,
     Gary

On 01/10/16 14:30, dammina@apache.org wrote:
> Author: dammina
> Date: Sat Oct  1 13:30:09 2016
> New Revision: 1763012
>
> URL: http://svn.apache.org/viewvc?rev=1763012&view=rev
> Log:
> restructure the jquery code snippets related to BatchCreateTickets and CreatedTickets wiki macros
>
> Modified:
>      bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/htdocs/js/batchcreate.js
>      bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/theme.py
>
> Modified: bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/htdocs/js/batchcreate.js
> URL: http://svn.apache.org/viewvc/bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/htdocs/js/batchcreate.js?rev=1763012&r1=1763011&r2=1763012&view=diff
> ==============================================================================
> --- bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/htdocs/js/batchcreate.js (original)
> +++ bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/htdocs/js/batchcreate.js Sat Oct  1 13:30:09 2016
> @@ -17,225 +17,218 @@
>    under the License.
>    */
>   
> -function emptyTable(numOfRows,product,milestones,components,href,token) {
> -    /*
> +/*
>       This function will be invoked from the BatchCreateTickets wiki macro.
>       The wiki macro will send the relevant details to create the empty ticket table within the wiki.
>       Then this function will generate the empty ticket table containing appropriate number of rows to enter ticket data.
> -     */
> -	created_rows=numOfRows;
> -	form_token = token.split(";")[0].split("=")[1];
> -	if(numOfRows == ""){
> -		alert("Enter the ticket batch size.")
> -	}
> -	else if(numOfRows != "" && document.getElementById("empty-table") == null){
> -	var contentDiv = document.getElementById("div-empty-table");
> -    var headers = {"ticket":"","summary":"Summary","description":"Description","product":"Product","priority":"Priority","milestone":"Milestone","component":"Component"}
> -	priorities = ["blocker", "critical", "major", "minor", "trivial"];
> -	types = ["defect", "enhancement", "task"];
> -	
> -	var div = document.createElement("div");
> -	div.setAttribute("class","span12");
> -	div.setAttribute("id","empty-table");
> -	var h5 = document.createElement("h5");
> -	h5.appendChild(document.createTextNode("Batch Create Tickets"));
> -	div.appendChild(h5);
> -	
> -	var form = document.createElement("form");
> -	form.setAttribute("id","bct-form");
> -	form.setAttribute("name","bct");
> -	form.setAttribute("method","post");
> + */
> +function emptyTable(numOfRows, products, milestones, components, href, token, unique_key) {
> +
> +	var created_rows=numOfRows;
> +	var form_token = token.split(";")[0].split("=")[1];
> +
> +    var headers = {"ticket":"","summary":"Summary","description":"Description","product":"Product",
> +        "priority":"Priority","milestone":"Milestone","component":"Component"};
> +	var priorities = ["blocker", "critical", "major", "minor", "trivial"];
> +    var types = ["defect", "enhancement", "task"];
> +
> +	var contentDiv = $('#div-empty-table' + unique_key);
> +
> +    var div = $('<div/>', {
> +    'id':'empty-table' + unique_key,
> +    'class':'span12'
> +    }).appendTo(contentDiv);
> +
> +	var h5 = $('<h5/>').html('Batch Create Tickets').appendTo(div);
>   	
> -	var div_token = document.createElement("div");
> -	var form_token_val = document.createElement("input");
> -	form_token_val.setAttribute("type","hidden");
> -	form_token_val.setAttribute("name","__FORM_TOKEN");
> -	form_token_val.setAttribute("value",form_token);
> -	div_token.appendChild(form_token_val);
> -	form.appendChild(div_token);
> +	var form = $('<form/>', {
> +	    'id':'bct-form' + unique_key,
> +        'name':'bct',
> +        'method':'post'
> +    }).appendTo(div);
> +
> +	$('<input/>', {
> +	    'type':'hidden',
> +        'name':'__FORM_TOKEN',
> +        'value':form_token
> +    }).appendTo($('<div>').appendTo(form));
>   	
> -	var table = document.createElement("table");
> -	table.setAttribute("class","listing tickets table table-bordered table-condensed query");
> -	table.setAttribute("style","border-radius: 0px 0px 4px 4px");
> +	var table = $('<table/>', {
> +	    'class':'listing tickets table table-bordered table-condensed query',
> +        'style':'border-radius: 0px 0px 4px 4px'
> +    }).appendTo(form);
>   	
> -	var tr = document.createElement("tr");
> -	tr.setAttribute("class","trac-columns");
> +	var tr = $('<tr/>', {
> +	    'class':'trac-columns'
> +    }).appendTo(table);
> +
>   	for (header in headers){
> -		font = document.createElement("font");
> -		font.setAttribute("color","#1975D1");
> -		font.appendChild(document.createTextNode(headers[header]))
> -		th = document.createElement("th");
> -		th.appendChild(font);
> -		tr.appendChild(th);
> +	    var th = $('<th/>').appendTo(tr);
> +	    $('<font/>', {
> +	        'color':'#1975D1'
> +        }).html(headers[header]).appendTo(th);
>   	}
> -	table.appendChild(tr);
>   	
> -	tbody = document.createElement("tbody");
> -	for (i=0;i<numOfRows;i++){
> -		tr_rows = document.createElement("tr");
> -		for (header in headers){
> -			if(header == "ticket"){
> -				td_row = document.createElement("td");
> -				input_ticket = document.createElement("input");
> -				input_ticket.setAttribute("type","checkbox");
> -				input_ticket.setAttribute("id","field-ticket"+i);
> -				input_ticket.setAttribute("class","input-block-level");
> -				input_ticket.setAttribute("name","field_ticket"+i);
> -				td_row.appendChild(input_ticket);
> -				tr_rows.appendChild(td_row);
> -			}
> -			else if (header == "summary"){
> -				td_row = document.createElement("td");
> -				input_summary = document.createElement("input");
> -				input_summary.setAttribute("type","text");
> -				input_summary.setAttribute("id","field-summary"+i);
> -				input_summary.setAttribute("class","input-block-level");
> -				input_summary.setAttribute("name","field_summary"+i);
> -				td_row.appendChild(input_summary);
> -				tr_rows.appendChild(td_row);
> -			}
> -			else if (header == "description") {
> -				td_row = document.createElement("td");
> -				input_description = document.createElement("textarea");
> -				input_description.setAttribute("id","field-description"+i);
> -				input_description.setAttribute("class","input-block-level");
> -				input_description.setAttribute("name","field_description"+i);
> -				input_description.setAttribute("rows","2");
> -				input_description.setAttribute("cols","28");
> -				td_row.appendChild(input_description);
> -				tr_rows.appendChild(td_row);
> -			}
> -			else if (header == "priority") {
> -				td_row = document.createElement("td");
> -				input_priority = document.createElement("select");
> -				input_priority.setAttribute("id","field-priority"+i);
> -				input_priority.setAttribute("class","input-block-level");
> -				input_priority.setAttribute("name","field_priority"+i);
> -				for (priority in priorities){
> -					option = document.createElement("option");
> -					option.setAttribute("value",priorities[priority]);
> -					option.appendChild(document.createTextNode(priorities[priority]));
> -					input_priority.appendChild(option);
> +	var tbody = $('<tbody>').appendTo(table);
> +
> +	for (var i=0; i < numOfRows; i++) {
> +
> +		var tr_rows = $('<tr>').appendTo(tbody);
> +
> +		for (var header in headers) {
> +		    var td;
> +			if(header == "ticket") {
> +
> +				td = $('<td>').appendTo(tr_rows);
> +				var input_ticket = $('<input/>', {
> +				    'id':'field-ticket' + unique_key + '-' + i,
> +	                'type':'checkbox',
> +                    'name':'field_ticket' + i,
> +                    'class':'input-block-level'
> +                }).appendTo(td);
> +
> +			} else if (header == "summary"){
> +
> +			    td = $('<td>').appendTo(tr_rows);
> +				var input_summary = $('<input/>', {
> +				    'id':'field-summary' + unique_key + '-' + i,
> +	                'type':'text',
> +                    'name':'field_summary' + i,
> +                    'class':'input-block-level'
> +                }).appendTo(td);
> +
> +			} else if (header == "description") {
> +
> +			    td = $('<td>').appendTo(tr_rows);
> +				var input_description = $('<textarea/>', {
> +				    'id':'field-description' + unique_key + '-' + i,
> +                    'name':'field_description' + i,
> +                    'class':'input-block-level',
> +                    'rows':'2',
> +                    'cols':'28'
> +                }).appendTo(td);
> +
> +			} else if (header == "priority") {
> +
> +			    td = $('<td>').appendTo(tr_rows);
> +				var input_priority = $('<select/>', {
> +				    'id':'field-priority' + unique_key + '-' + i,
> +                    'name':'field_priority' + i,
> +                    'class':'input-block-level'
> +                }).appendTo(td);
> +
> +				for (var priority in priorities){
> +				    $('<option/>', {
> +				        'value':priorities[priority]
> +                    }).html(priorities[priority]).appendTo(input_priority);
>   				}
> -				td_row.appendChild(input_priority);
> -				tr_rows.appendChild(td_row);
> -			}
> -			else if (header == "product") {
> -				td_row = document.createElement("td");
> -				field_product = document.createElement("select");
> -				field_product.setAttribute("id","field-product"+i);
> -				field_product.setAttribute("class","input-block-level");
> -				field_product.setAttribute("name","field_product"+i);
> -				for (p in product){
> -					option = document.createElement("option");
> -					option.setAttribute("value",(product[p])[0]);
> -					option.appendChild(document.createTextNode((product[p])[1]));
> -					field_product.appendChild(option);
> +
> +			} else if (header == "product") {
> +
> +			    td = $('<td>').appendTo(tr_rows);
> +				var field_product = $('<select/>', {
> +				    'id':'field-product' + unique_key + '-' + i,
> +                    'name':'field_product' + i,
> +                    'class':'input-block-level'
> +                }).appendTo(td);
> +
> +				for (var product in products){
> +				    $('<option/>', {
> +				        'value':(products[product])[0]
> +                    }).html((products[product])[1]).appendTo(field_product);
>   				}
> -				td_row.appendChild(field_product);
> -				tr_rows.appendChild(td_row);
> -			}
> -			else if (header == "milestone"){
> -				td_row = document.createElement("td");
> -				field_milestone = document.createElement("select");
> -				field_milestone.setAttribute("id","field-milestone"+i);
> -				field_milestone.setAttribute("class","input-block-level");
> -				field_milestone.setAttribute("name","field_milestone"+i);
> -				for (milestone in milestones){
> -					option = document.createElement("option");
> -					option.setAttribute("value",(milestones[milestone])[0]);
> -					option.appendChild(document.createTextNode((milestones[milestone])[0]));
> -					field_milestone.appendChild(option);
> +
> +			} else if (header == "milestone") {
> +
> +			    td = $('<td>').appendTo(tr_rows);
> +				var field_milestone = $('<select/>', {
> +				    'id':'field-milestone' + unique_key + '-' + i,
> +                    'name':'field_milestone' + i,
> +                    'class':'input-block-level'
> +                }).appendTo(td);
> +
> +				for (var milestone in milestones){
> +				    $('<option/>', {
> +				        'value':(milestones[milestone])[0]
> +                    }).html((milestones[milestone])[0]).appendTo(field_milestone);
>   				}
> -				td_row.appendChild(field_milestone);
> -				tr_rows.appendChild(td_row);
> -			}
> -			else if (header == "component"){
> -				td_row = document.createElement("td");
> -				field_component = document.createElement("select");
> -				field_component.setAttribute("id","field-component"+i);
> -				field_component.setAttribute("class","input-block-level");
> -				field_component.setAttribute("name","field_component"+i);
> -				for (component in components){
> -					option = document.createElement("option");
> -					option.setAttribute("value",(components[component])[0]);
> -					option.appendChild(document.createTextNode((components[component])[0]));
> -					field_component.appendChild(option);
> +
> +			} else if (header == "component") {
> +
> +			    td = $('<td>').appendTo(tr_rows);
> +				var field_component = $('<select/>', {
> +				    'id':'field-component' + unique_key + '-' + i,
> +                    'name':'field_component' + i,
> +                    'class':'input-block-level'
> +                }).appendTo(td);
> +
> +				for (var component in components){
> +				    $('<option/>', {
> +				        'value':(components[component])[0]
> +                    }).html((components[component])[0]).appendTo(field_component);
>   				}
> -				td_row.appendChild(field_component);
> -				tr_rows.appendChild(td_row);
>   			}
>   		}
> -		tbody.appendChild(tr_rows);
>   	}
> -	table.appendChild(tbody);
> -	form.appendChild(table);
>   
> -	remove_row_button = document.createElement("button");
> -	remove_row_button.setAttribute("class","btn pull-right");
> -	remove_row_button.setAttribute("type","button");
> -	remove_row_button.addEventListener("click", function(event) {
> -  		numOfRows=parseInt(numOfRows)-parseInt(remove_row_btn_action(numOfRows));
> -  		event.preventDefault();
> -	});
> -	remove_row_button.setAttribute("id","bct-rmv-empty-row");
> -	remove_row_button.appendChild(document.createTextNode("-"));
> -	form.appendChild(remove_row_button);
> -	
> -	add_row_button = document.createElement("button");
> -	add_row_button.setAttribute("class","btn pull-right");
> -	add_row_button.setAttribute("type","button");
> -	add_row_button.addEventListener("click", function(event) {
> -  		add_row_btn_action(product,milestones,components,created_rows);
> -  		numOfRows=parseInt(numOfRows)+1;
> -  		created_rows=parseInt(created_rows)+1;
> -  		event.preventDefault();
> -	});
> -	add_row_button.setAttribute("id","bct-add-empty-row");
> -	add_row_button.appendChild(document.createTextNode("+"));
> -	form.appendChild(add_row_button);	
> -
> -    submit_button = document.createElement("button");
> -	submit_button.setAttribute("class","btn pull-right");
> -	submit_button.setAttribute("type","button");
> -	submit_button.addEventListener("click", function(event) {
> -		var empty_row=false;
> -		var cnt=0;
> -		for (var k = 0; k <parseInt(numOfRows)+parseInt(cnt); k++) {
> -			var element = document.getElementById("field-summary"+k);
> -			if(element==null){
> -				cnt=parseInt(cnt)+1;
> -				continue;
> -			}
> -			
> -			var summary_val=document.getElementById("field-summary"+k).value;
> -			if(summary_val==""){
> -				var line_number = parseInt(k)+1;
> -				var confirmation = confirm("Summery field of one or more tickets are empty. They will not get created!");
> -				empty_row=true;
> -				break;
> -			}
> -		};
> -		if(confirmation == true || !empty_row){
> -			submit_btn_action();
> -  			event.preventDefault();
> -		}
> -	});
> -	submit_button.setAttribute("id","bct-create");
> -	submit_button.setAttribute("data-target",href);
> -	submit_button.appendChild(document.createTextNode("save"));
> -	form.appendChild(submit_button);	
> -	
> -	cancle_button = document.createElement("button");
> -	cancle_button.setAttribute("class","btn pull-right");
> -	cancle_button.setAttribute("type","button");
> -	cancle_button.setAttribute("onclick","deleteForm()");
> -	cancle_button.appendChild(document.createTextNode("cancel"));
> -	form.appendChild(cancle_button);
> -	
> -	div.appendChild(form);
> -	contentDiv.appendChild(div);
> -	}
> +	$('<button/>', {
> +	    'id':'bct-rmv-empty-row' + unique_key,
> +        'type':'button',
> +        'class':'btn pull-right',
> +        'click':function() {
> +            numOfRows = parseInt(numOfRows) - parseInt(remove_row_btn_action(numOfRows, unique_key));
> +        }
> +	}).html('-').appendTo(form);
> +
> +    $('<button/>', {
> +	    'id':'bct-add-empty-row' + unique_key,
> +        'type':'button',
> +        'class':'btn pull-right',
> +        'click':function() {
> +	        add_row_btn_action(products, milestones, components, created_rows, unique_key, headers, tbody);
> +            numOfRows = parseInt(numOfRows) + 1;
> +            created_rows = parseInt(created_rows) + 1;
> +        }
> +	}).html('+').appendTo(form);
> +
> +    $('<button/>', {
> +	    'id':'bct-create' + unique_key,
> +        'type':'button',
> +        'class':'btn pull-right',
> +        'data-target':href,
> +        'click':function() {
> +	        var empty_row=false;
> +            var cnt=0;
> +            for (var k = 0; k < parseInt(numOfRows) + parseInt(cnt); k++) {
> +
> +                var element = $("#field-summary" + k);
> +                if(element == null) {
> +                    cnt = parseInt(cnt) + 1;
> +                    continue;
> +                }
> +
> +                var summary_val = element.val();
> +                if(summary_val == ""){
> +                    var line_number = parseInt(k) + 1;
> +                    var confirmation = confirm("Summery field of one or more tickets are empty. " +
> +                        "They will not get created!");
> +                    empty_row=true;
> +                    break;
> +                }
> +            }
> +            if(confirmation == true || !empty_row){
> +                submit_btn_action(unique_key);
> +            }
> +        }
> +	}).html('save').appendTo(form);
> +
> +	$('<button/>', {
> +        'type':'button',
> +        'class':'btn pull-right',
> +        'click':function() {
> +	        deleteForm(unique_key);
> +        }
> +	}).html('cancel').appendTo(form);
>   
>   }
>   
> @@ -243,216 +236,178 @@ function submitForm(){
>   	document.getElementById("bct-form").submit();
>   }
>   
> -function deleteForm(){
> -    /*
> -    This function will invoke when the user clicks on cancel button under the empty table.
> -    Then this function will remove the empty table from the wiki.
> -     */
> -	document.getElementById("empty-table").remove();
> +/*
> + Then this function will remove the empty table from the wiki.
> + */
> +function deleteForm(unique_key){
> +	$("#empty-table" + unique_key).remove();
>   }
>   
> -function submit_btn_action() {
> -    /*
> -    This function will send a HTTP POST request to the backend.
> -    The form containing the empty table and its data will be submitted.
> -    Then the empty table will be replaced with the ticket table containing details of the created tickets.
> -     */
> +/*
> +This function will send a HTTP POST request to the backend.
> +The form containing the empty table and its data will be submitted.
> +Then the empty table will be replaced with the ticket table containing details of the created tickets.
> + */
> +function submit_btn_action(unique_key) {
> +
>       // data-target is the base url for the product in current scope
> -	var product_base_url = $('#bct-create').attr('data-target');
> -    if (product_base_url === '/')
> -        product_base_url = '';
> -        $.post(product_base_url , $('#bct-form').serialize(),
> -        function(ticket) {
> -			deleteForm();
> -
> -			var headers = {"ticket":"Ticket","summary":"Summary","product":"Product","status":"Status","milestone":"Milestone","component":"Component"}
> -			var contentDiv = document.getElementById("div-empty-table");
> -			var div = document.createElement("div");
> -			div.setAttribute("class","span12");
> -			var h5 = document.createElement("h5");
> -			h5.appendChild(document.createTextNode("Created Tickets"));
> -			div.appendChild(h5);
> -			var table = document.createElement("table");
> -			table.setAttribute("class","listing tickets table table-bordered table-condensed query");
> -			table.setAttribute("style","border-radius: 0px 0px 4px 4px");
> -			tr = document.createElement("tr");
> -			tr.setAttribute("class","trac-columns");
> -			
> -			for (header in headers){
> -				th = document.createElement("th");
> -				font = document.createElement("font");
> -				font.setAttribute("color","#1975D1");
> -				font.appendChild(document.createTextNode(headers[header]))
> -				th = document.createElement("th");
> -				th.appendChild(font);
> -				tr.appendChild(th);
> -			}
> -			table.appendChild(tr);
> -			
> -			for ( i=0 ; i<Object.keys(ticket.tickets).length ; i++ ){
> -				tr = document.createElement("tr");
> -				for (j=0;j<6;j++){
> -					if(j==0){
> -						td = document.createElement("td");
> -						a = document.createElement("a");
> -						tkt = JSON.parse(ticket.tickets[i]);
> -						a.setAttribute("href",tkt.url);
> -						a.appendChild(document.createTextNode("#"+tkt.id));
> -						td.appendChild(a);
> -					}
> -					else if(j==1){
> -						td = document.createElement("td");
> -						a = document.createElement("a");
> -						tkt = JSON.parse(ticket.tickets[i]);
> -						a.setAttribute("href",tkt.url);
> -						a.appendChild(document.createTextNode(tkt.summary));
> -						td.appendChild(a);
> -					}
> -					else if(j==2){
> -						td = document.createElement("td");
> -						tkt = JSON.parse(ticket.tickets[i]);
> -						td.appendChild(document.createTextNode(tkt.product));
> -					}
> -					else if(j==3){
> -						td = document.createElement("td");
> -						tkt = JSON.parse(ticket.tickets[i]);
> -						td.appendChild(document.createTextNode(tkt.status));
> -					}
> -					else if(j==4){
> -						td = document.createElement("td");
> -						tkt = JSON.parse(ticket.tickets[i]);
> -						td.appendChild(document.createTextNode(tkt.milestone));
> -					}
> -					else if(j==5){
> -						td = document.createElement("td");
> -						tkt = JSON.parse(ticket.tickets[i]);
> -						td.appendChild(document.createTextNode(tkt.component));
> -					}
> -					tr.appendChild(td);
> -				}
> -				table.appendChild(tr);
> -			}
> -			div.appendChild(table);
> -			contentDiv.appendChild(div);
> -        });
> +	var product_base_url = $('#bct-create' + unique_key).attr('data-target');
> +
> +    $.post(product_base_url , $('#bct-form' + unique_key).serialize(),
> +    function(ticket) {
> +        deleteForm(unique_key);
> +
> +        var headers = {"ticket":"Ticket", "summary":"Summary", "product":"Product", "status":"Status",
> +            "milestone":"Milestone", "component":"Component"};
> +
> +        var contentDiv = $("#div-empty-table" + unique_key);
> +
> +        var div = $('<div/>', {
> +            'class':'span12'
> +        }).appendTo(contentDiv);
> +
> +        var h5 = $('<h5/>', {
> +            'class':'span12'
> +        }).html("Created Tickets").appendTo(div);
> +
> +        var table = $('<table/>', {
> +            'class':'listing tickets table table-bordered table-condensed query',
> +            'style':'border-radius: 0px 0px 4px 4px'
> +        }).appendTo(div);
> +
> +        var header_tr = $('<tr/>', {
> +            'class':'trac-columns'
> +        }).appendTo(table);
> +
> +        for (var header in headers){
> +
> +            var th = $('<th/>', {
> +                'class':'trac-columns'
> +            }).appendTo(header_tr);
> +
> +            $('<font/>', {
> +                'color':'#1975D1'
> +            }).html(headers[header]).appendTo(th);
> +        }
> +
> +        for (var json_ticket in ticket.tickets) {
> +            var tr = $('<tr/>').appendTo(table);
> +            var tkt = JSON.parse(json_ticket);
> +            for (var j = 0; j < 6; j++) {
> +                var td = $('<td/>').appendTo(tr);
> +                if(j < 2) {
> +                    $('<a/>', {
> +                        'href':tkt.url
> +                    }).html(j == 0 ? '#' + tkt.id : tkt.summary).appendTo(td);
> +                } else {
> +                    td.html(j == 2 ? tkt.product : (j == 3 ? tkt.status : (j == 4 ? tkt.milestone : tkt.component)));
> +                }
> +            }
> +        }
> +    });
>   }
>   
> -function add_row_btn_action(product,milestones,components,i){
> -    /*
> -    This function will be called when the users add a new row to the empty table.
> -    The new empty row will be always appended to the end row of the empty table.
> -     */
> -	var headers = {"ticket":"","summary":"Summary","description":"Description","product":"Product","priority":"Priority","milestone":"Milestone","component":"Component"}
> -	//var statuses = ["new", "accepted", "assigned", "closed", "reopened"];
> +/*
> +This function will be called when the users add a new row to the empty table.
> +The new empty row will be always appended to the end row of the empty table.
> + */
> +function add_row_btn_action(products, milestones, components, i, random, headers, tbody) {
> +
> +	var statuses = ["new", "accepted", "assigned", "closed", "reopened"];
>   	var priorities = ["blocker", "critical", "major", "minor", "trivial"];
>   	var types = ["defect", "enhancement", "task"];
>   
> -    tr_rows = document.createElement("tr");
> +    var tr = $('<tr/>').appendTo(tbody);
>   
> -    for (header in headers){
> -    	if(header == "ticket"){
> -			td_row = document.createElement("td");
> -			input_ticket = document.createElement("input");
> -			input_ticket.setAttribute("type","checkbox");
> -			input_ticket.setAttribute("id","field-ticket"+i);
> -			input_ticket.setAttribute("class","input-block-level");
> -			input_ticket.setAttribute("name","field_ticket"+i);
> -			td_row.appendChild(input_ticket);
> -			tr_rows.appendChild(td_row);
> -		}
> -		else if (header == "summary"){
> -				td_row = document.createElement("td");
> -				input_summary = document.createElement("input");
> -				input_summary.setAttribute("type","text");
> -				input_summary.setAttribute("id","field-summary"+i);
> -				input_summary.setAttribute("class","input-block-level");
> -				input_summary.setAttribute("name","field_summary"+i);
> -				td_row.appendChild(input_summary);
> -				tr_rows.appendChild(td_row);
> -		}
> -		else if (header == "description") {
> -			td_row = document.createElement("td");
> -			input_description = document.createElement("textarea");
> -			input_description.setAttribute("id","field-description"+i);
> -			input_description.setAttribute("class","input-block-level");
> -			input_description.setAttribute("name","field_description"+i);
> -			input_description.setAttribute("rows","2");
> -			input_description.setAttribute("cols","28");
> -			td_row.appendChild(input_description);
> -			tr_rows.appendChild(td_row);
> -		}
> -		else if (header == "priority") {
> -			td_row = document.createElement("td");
> -			input_priority = document.createElement("select");
> -			input_priority.setAttribute("id","field-priority"+i);
> -			input_priority.setAttribute("class","input-block-level");
> -			input_priority.setAttribute("name","field_priority"+i);
> -			for (priority in priorities){
> -				option = document.createElement("option");
> -				option.setAttribute("value",priorities[priority]);
> -				option.appendChild(document.createTextNode(priorities[priority]));
> -				input_priority.appendChild(option);
> -			}
> -			td_row.appendChild(input_priority);
> -			tr_rows.appendChild(td_row);
> -		}
> -		else if (header == "product") {
> -			td_row = document.createElement("td");
> -			field_product = document.createElement("select");
> -			field_product.setAttribute("id","field-product"+i);
> -			field_product.setAttribute("class","input-block-level");
> -			field_product.setAttribute("name","field_product"+i);
> -			for (p in product){
> -				option = document.createElement("option");
> -				option.setAttribute("value",(product[p])[0]);
> -				option.appendChild(document.createTextNode((product[p])[1]));
> -				field_product.appendChild(option);
> -			}
> -			td_row.appendChild(field_product);
> -			tr_rows.appendChild(td_row);
> -		}
> -		else if (header == "milestone"){
> -			td_row = document.createElement("td");
> -			field_milestone = document.createElement("select");
> -			field_milestone.setAttribute("id","field-milestone"+i);
> -			field_milestone.setAttribute("class","input-block-level");
> -			field_milestone.setAttribute("name","field_milestone"+i);
> -			for (milestone in milestones){
> -				option = document.createElement("option");
> -				option.setAttribute("value",(milestones[milestone])[0]);
> -				option.appendChild(document.createTextNode((milestones[milestone])[0]));
> -				field_milestone.appendChild(option);
> -			}
> -			td_row.appendChild(field_milestone);
> -			tr_rows.appendChild(td_row);
> -		}
> -		else if (header == "component"){
> -			td_row = document.createElement("td");
> -			field_component = document.createElement("select");
> -			field_component.setAttribute("id","field-component"+i);
> -			field_component.setAttribute("class","input-block-level");
> -			field_component.setAttribute("name","field_component"+i);
> -			for (component in components){
> -				option = document.createElement("option");
> -				option.setAttribute("value",(components[component])[0]);
> -				option.appendChild(document.createTextNode((components[component])[0]));
> -				field_component.appendChild(option);
> +    for (var header in headers) {
> +
> +        var td = $('<td/>').appendTo(tr);
> +        var unique_key = random + '-' + i;
> +
> +        if(header == 'ticket') {
> +			$('<input/>', {
> +			    'id':'field-ticket' + unique_key,
> +                'name':'field_ticket' + unique_key,
> +                'class':'input-block-level',
> +			    'type':'checkbox'
> +            }).appendTo(td);
> +		} else if (header == "summary") {
> +
> +		    $('<input/>', {
> +			    'id':'field-summary' + unique_key,
> +                'name':'field_summary' + unique_key,
> +                'class':'input-block-level',
> +			    'type':'text'
> +            }).appendTo(td);
> +		} else if (header == "description") {
> +
> +		    $('<textarea/>', {
> +			    'id':'field-description' + unique_key,
> +                'name':'field_description' + unique_key,
> +                'class':'input-block-level',
> +			    'rows':'2',
> +                'cols':'28'
> +            }).appendTo(td);
> +		} else if (header == "priority") {
> +
> +		    var input_priority = $('<select/>', {
> +			    'id':'field-priority' + unique_key,
> +                'name':'field_priority' + unique_key,
> +                'class':'input-block-level'
> +            }).appendTo(td);
> +			for (var priority in priorities){
> +				$('<option/>', {
> +				    'value':priorities[priority]
> +                }).html(priorities[priority]).appendTo(input_priority);
> +			}
> +		} else if (header == "product") {
> +
> +		    var field_product = $('<select/>', {
> +			    'id':'field-product' + unique_key,
> +                'name':'field_product' + unique_key,
> +                'class':'input-block-level'
> +            }).appendTo(td);
> +			for (var product in products) {
> +				$('<option/>', {
> +				    'value':(products[product])[0]
> +                }).html((products[product])[1]).appendTo(field_product);
> +			}
> +		} else if (header == "milestone") {
> +
> +		    var field_milestone = $('<select/>', {
> +			    'id':'field-milestone' + unique_key,
> +                'name':'field_milestone' + unique_key,
> +                'class':'input-block-level'
> +            }).appendTo(td);
> +			for (var milestone in milestones) {
> +				$('<option/>', {
> +				    'value':(milestones[milestone])[0]
> +                }).html((milestones[milestone])[0]).appendTo(field_milestone);
> +			}
> +		} else if (header == "component") {
> +
> +		    var field_component = $('<select/>', {
> +			    'id':'field-component' + unique_key,
> +                'name':'field_component' + unique_key,
> +                'class':'input-block-level'
> +            }).appendTo(td);
> +			for (var component in components) {
> +				$('<option/>', {
> +				    'value':(components[component])[0]
> +                }).html((components[component])[0]).appendTo(field_component);
>   			}
> -			td_row.appendChild(field_component);
> -			tr_rows.appendChild(td_row);
>   		}
>   	}
> -	document.getElementById("empty-table").childNodes[1].childNodes[1].childNodes[1].appendChild(tr_rows);
>   }
>   
> -function remove_row_btn_action(numOfRows){
> -    /*
> -    This function will be called when the user removes a table row of the empty table.
> -     */
> -	var cnt=0;
> -	for(var i=0;i<parseInt(numOfRows)-parseInt(cnt);i++){
> -		if(document.getElementById("empty-table").childNodes[1].childNodes[1].childNodes[1].childNodes[i].childNodes[0].childNodes[0].checked){
> -			document.getElementById("empty-table").childNodes[1].childNodes[1].childNodes[1].childNodes[i].remove();
> +/*
> +This function will be called when the user removes a table row of the empty table.
> + */
> +function remove_row_btn_action(numOfRows, unique_key) {
> +	var cnt = 0;
> +	for(var i = 0; i < parseInt(numOfRows) - parseInt(cnt); i++) {
> +		if(document.getElementById('empty-table' + unique_key).childNodes[1].childNodes[1].childNodes[1].childNodes[i].childNodes[0].childNodes[0].checked) {
> +			document.getElementById('empty-table' + unique_key).childNodes[1].childNodes[1].childNodes[1].childNodes[i].remove();
>   			cnt=cnt+1;
>   			i--;
>   		}
> @@ -460,78 +415,56 @@ function remove_row_btn_action(numOfRows
>   	return cnt;
>   }
>   
> -function display_created_tickets(ticket) {
> -    /*
> -    Take ticket data sent through the CreatedTickets wiki macro and display those data as a ticket table within the wiki.
> -    This function will create a div element containing the ticket table data and append that div to div with
> -    "div-created-ticket-table".
> -     */
> -	var headers = {"ticket":"Ticket","summary":"Summary","product":"Product","status":"Status","milestone":"Milestone","component":"Component"}
> -	var contentDiv = document.getElementById("div-created-ticket-table");
> -	var div = document.createElement("div");
> -	div.setAttribute("class","span12");
> -	var h5 = document.createElement("h5");
> -	h5.appendChild(document.createTextNode("Created Tickets"));
> -	div.appendChild(h5);
> -	var table = document.createElement("table");
> -	table.setAttribute("class","listing tickets table table-bordered table-condensed query");
> -	table.setAttribute("style","border-radius: 0px 0px 4px 4px");
> -	tr = document.createElement("tr");
> -	tr.setAttribute("class","trac-columns");
> +/*
> +Take ticket data sent through the CreatedTickets wiki macro and display those data as a ticket table within the wiki.
> +This function will create a div element containing the ticket table data and append that div to div with
> +"div-created-ticket-table".
> + */
> +function display_created_tickets(tickets, unique_key) {
> +
> +	var headers = {"ticket":"Ticket", "summary":"Summary", "product":"Product", "status":"Status",
> +        "milestone":"Milestone", "component":"Component"};
> +
> +	var contentDiv = $('#div-created-ticket-table' + unique_key);
> +	var div = $('<div/>', {
> +	    'class':'span12'
> +    }).appendTo(contentDiv);
> +
> +	$('<h5/>').html('Created Tickets').appendTo(div);
> +
> +	var table = $('<table/>', {
> +	    'class':'listing tickets table table-bordered table-condensed query',
> +        'style':'border-radius: 0px 0px 4px 4px'
> +    }).appendTo(div);
> +
> +    var tr_headers = $('<tr/>', {
> +        'class':'trac-columns'
> +    }).appendTo(table);
>   			
> -	for (header in headers){
> -		th = document.createElement("th");
> -		font = document.createElement("font");
> -		font.setAttribute("color","#1975D1");
> -		font.appendChild(document.createTextNode(headers[header]))
> -		th = document.createElement("th");
> -		th.appendChild(font);
> -		tr.appendChild(th);
> +	for (var header in headers){
> +		var th = $('<th/>').appendTo(tr_headers);
> +		var font = $('<font/>', {
> +		    'color':'#1975D1'
> +        }).html(headers[header]).appendTo(th);
>   	}
> -	table.appendChild(tr);
> -	for ( i=0 ; i<Object.keys(ticket.tickets).length ; i++ ){
> -		tr = document.createElement("tr");
> -		for (j=0;j<6;j++){
> -			if(j==0){
> -				td = document.createElement("td");
> -				a = document.createElement("a");
> -				tkt = JSON.parse(ticket.tickets[i]);
> -				a.setAttribute("href",tkt.url);
> -				a.appendChild(document.createTextNode("#"+tkt.id));
> -				td.appendChild(a);
> -			}
> -			else if(j==1){
> -				td = document.createElement("td");
> -				a = document.createElement("a");
> -				tkt = JSON.parse(ticket.tickets[i]);
> -				a.setAttribute("href",tkt.url);
> -				a.appendChild(document.createTextNode(tkt.summary));
> -				td.appendChild(a);
> -			}
> -			else if(j==2){
> -				td = document.createElement("td");
> -				tkt = JSON.parse(ticket.tickets[i]);
> -				td.appendChild(document.createTextNode(tkt.product));
> -			}
> -			else if(j==3){
> -				td = document.createElement("td");
> -				tkt = JSON.parse(ticket.tickets[i]);
> -				td.appendChild(document.createTextNode(tkt.status));
> -			}
> -			else if(j==4){
> -				td = document.createElement("td");
> -				tkt = JSON.parse(ticket.tickets[i]);
> -				td.appendChild(document.createTextNode(tkt.milestone));
> +
> +	for (var index in tickets) {
> +		var tr = $('<tr/>').appendTo(table);
> +        var tkt = JSON.parse(tickets[index]);
> +
> +		for (var j = 0; j < 6; j++) {
> +		    var td = $('<td/>');
> +			if(j < 2) {
> +
> +				$('<a/>', {
> +				    'href':tkt.url
> +                }).html(j == 0 ? "#" + tkt.id : tkt.summary).appendTo(td);
>   			}
> -			else if(j==5){
> -				td = document.createElement("td");
> -				tkt = JSON.parse(ticket.tickets[i]);
> -				td.appendChild(document.createTextNode(tkt.component));
> +			else {
> +			    td.html(j ==2 ? tkt.product : (j == 3 ? tkt.status : (j == 4 ? tkt.milestone : tkt.component)))
>   			}
> -			tr.appendChild(td);
> +			td.appendTo(tr)
>   		}
> -		table.appendChild(tr);
>   	}
> -	div.appendChild(table);
> -	contentDiv.appendChild(div);
>    }
> +//line 537
> \ No newline at end of file
>
> Modified: bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/theme.py
> URL: http://svn.apache.org/viewvc/bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/theme.py?rev=1763012&r1=1763011&r2=1763012&view=diff
> ==============================================================================
> --- bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/theme.py (original)
> +++ bloodhound/branches/bep_0011_batch_create_tickets/bloodhound_theme/bhtheme/theme.py Sat Oct  1 13:30:09 2016
> @@ -17,14 +17,20 @@
>   #  specific language governing permissions and limitations
>   #  under the License.
>   
> -import sys
>   import re
> +import sys
>   
> +from bhdashboard import wiki
> +from bhdashboard.util import dummy_request
> +from bhdashboard.web_ui import DashboardModule
> +from bhtheme.translation import _, add_domain
>   from genshi.builder import tag
>   from genshi.core import TEXT
>   from genshi.filters.transform import Transformer
>   from genshi.output import DocType
> -
> +from multiproduct.env import ProductEnvironment
> +from multiproduct.web_ui import PRODUCT_RE, ProductModule
> +from themeengine.api import ThemeBase, ThemeEngineSystem
>   from trac.config import ListOption, Option
>   from trac.core import Component, TracError, implements
>   from trac.mimeview.api import get_mimetype
> @@ -43,17 +49,8 @@ from trac.web.chrome import (add_stylesh
>   from trac.web.main import IRequestHandler
>   from trac.wiki.admin import WikiAdmin
>   from trac.wiki.formatter import format_to_html
> -
> -from themeengine.api import ThemeBase, ThemeEngineSystem
> -
> -from bhdashboard.util import dummy_request
> -from bhdashboard.web_ui import DashboardModule
> -from bhdashboard import wiki
> -
> -from multiproduct.env import ProductEnvironment
> -from multiproduct.web_ui import PRODUCT_RE, ProductModule
> -from bhtheme.translation import _, add_domain
>   from trac.wiki.macros import WikiMacroBase
> +import random, string
>   
>   try:
>       from multiproduct.ticket.web_ui import ProductTicketModule
> @@ -764,7 +761,7 @@ class BatchCreateTicketsMacro(WikiMacroB
>                   self.env.product is not None) and (
>                   self.file == 'bh_wiki_view.html' or self.file == 'bh_wiki_edit.html' or self.file is None) and (
>                   self.rqst.perm.has_permission('TRAC_ADMIN') or self.rqst.perm.has_permission('TICKET_BATCH_CREATE')):
> -
> +            #todo let the user select the product when creating tickets
>               # generate the required data to be parsed to the js functions too create the empty ticket table.
>   
>               product_id = str(self.env.product.resource.id)
> @@ -774,6 +771,8 @@ class BatchCreateTicketsMacro(WikiMacroB
>                   "SELECT * FROM milestone WHERE product=%s", (product_id,))
>               components = self.env.db_query(
>                   "SELECT * FROM component WHERE product=%s", (product_id,))
> +
> +            random_string = '%s%s'%('-',''.join(random.choice(string.lowercase) for i in range(10)))
>               form = tag.form(
>                               tag.div(
>                                   tag.span(
> @@ -786,15 +785,16 @@ class BatchCreateTicketsMacro(WikiMacroB
>                                           "emptyTable(" + to_json(str(self.rows)) + "," + to_json(product_name) + "," +
>                                           to_json(milestones) + "," + to_json(components) + "," +
>                                           to_json(self.rqst.href() + "/bct") + "," +
> -                                        to_json(str(self.rqst.environ["HTTP_COOKIE"])) + ")",
> -                                        id="js-caller",
> +                                        to_json(str(self.rqst.environ["HTTP_COOKIE"])) + "," +
> +                                        to_json(random_string)+ ")",
> +                                        id="js-caller" + random_string,
>                                           type="text/javascript"),
>                                       class_="input-group-btn"),
>                                       style="display:inline-block;position:relative;left: -30px;",
> -                                    id="div-empty-table"),
> +                                    id="div-empty-table" + random_string),
>                                   method="get",
>                                   style="display:inline",
> -                                id="batchcreate")
> +                                id="batchcreate" + random_string)
>               try:
>                   int(self.rows)
>               except TracError:
> @@ -1048,7 +1048,8 @@ class CreatedTicketsMacro(WikiMacroBase)
>           """
>   	Helps to generate a ticket table within the wiki.
>   
> -	You can use this macro in order to display the details of a batch of tickets. `CreatedTickets` macro takes exactly two 		integer arguments. The arguments defines the range of the tickets that will be displayed in the ticket table.
> +	You can use this macro in order to display the details of a batch of tickets. `CreatedTickets` macro takes exactly
> +	two integer arguments. The arguments defines the range of the tickets that will be displayed in the ticket table.
>   
>   	Example:
>   	{{{
> @@ -1085,8 +1086,9 @@ class CreatedTicketsMacro(WikiMacroBase)
>           """
>           if self.file == 'bh_wiki_view.html' or self.file == 'bh_wiki_edit.html' or self.file is None:
>               # Extract the macro arguments.
> -            start_id = int(args.split(',')[0])
> -            end_id = int(args.split(',')[1])
> +            id_range = args.split(',')
> +            start_id = int(id_range[0])
> +            end_id = int(id_range[1])
>   
>               display_tickets = self.env.db_query(
>                   "SELECT id,summary,product,status,milestone,component FROM ticket WHERE uid>=%s and uid<=%s",
> @@ -1095,7 +1097,6 @@ class CreatedTicketsMacro(WikiMacroBase)
>                    end_id),
>               )
>               display_tickets_list = []
> -            display_tickets_dict = {}
>               for i in range(0, end_id - start_id):
>                   tres = Neighborhood(
>                       'product',
> @@ -1117,26 +1118,27 @@ class CreatedTicketsMacro(WikiMacroBase)
>                               'milestone': display_tickets[i][4],
>                               'component': display_tickets[i][5]
>                           }))
> -            display_tickets_dict["tickets"] = display_tickets_list
>   
> +            random_string = '%s%s' % ('-', ''.join(random.choice(string.lowercase) for i in range(10)))
>               # Send the ticket data to be displayed on the ticket table as JSON parameters.
> -            add_script(self.rqst, 'theme/js/batchcreate.js')
>               form = tag.form(
> -                method="get",
> -                style="display:inline",
> -                id="batchcreate")
> -            div = tag.div(
> -                style="display:inline-block;position:relative;left: -30px;",
> -                id="div-created-ticket-table")
> -            span = tag.span(class_="input-group-btn")
> -            body = tag.body(
> -                id="js-caller",
> -                onload="Javascript:display_created_tickets(" +
> -                to_json(display_tickets_dict) +
> -                ")")
> -            span.append(body)
> -            div.append(span)
> -            form.append(div)
> +                tag.div(
> +                    tag.span(
> +                        tag.script(
> +                            type='text/javascript',
> +                            charset='utf-8',
> +                            src=str(self.rqst.href.chrome('theme/js/batchcreate.js'))),
> +                        tag.script(
> +                            'display_created_tickets(' + to_json(display_tickets_list) + ',' +
> +                            to_json(random_string) + ')',
> +                            id='js-caller' + random_string,
> +                            type='text/javascript'),
> +                        class_='input-group-btn'),
> +                    style='display:inline-block;position:relative;left: -30px;',
> +                    id='div-created-ticket-table' + random_string),
> +                method='get',
> +                style='display:inline',
> +                id='batchcreate' + random_string)
>               return form
>           else:
>               return None
>
>
>