diff --git a/src/sunstone/public/app/utils/custom-tags-table.js b/src/sunstone/public/app/utils/custom-tags-table.js index 2c40c0161b..5f84f85c73 100644 --- a/src/sunstone/public/app/utils/custom-tags-table.js +++ b/src/sunstone/public/app/utils/custom-tags-table.js @@ -2,6 +2,7 @@ define(function(require) { var Locale = require('utils/locale'); var TemplateHTML = require('hbs!./custom-tags-table/html'); + var RowTemplateHTML = require('hbs!./custom-tags-table/row'); var TemplateUtils = require('utils/template-utils'); function _html(){ @@ -9,31 +10,16 @@ define(function(require) { } function _setup(context){ - $('#add_custom', context).click(function() { - var table = $('#custom_tags', context)[0]; - var rowCount = table.rows.length; - var row = table.insertRow(rowCount); - - var cell1 = row.insertCell(0); - var element1 = document.createElement("input"); - element1.id = "KEY"; - element1.type = "text"; - element1.value = $('input#KEY', context).val(); - cell1.appendChild(element1); - - var cell2 = row.insertCell(1); - var element2 = document.createElement("input"); - element2.id = "VALUE"; - element2.type = "text"; - element2.value = $('input#VALUE', context).val(); - cell2.appendChild(element2); - - var cell3 = row.insertCell(2); - cell3.innerHTML = ""; + context.off("click", ".add_custom_tag"); + context.on("click", ".add_custom_tag", function(){ + $(".custom_tags tbody", context).append(RowTemplateHTML()); }); - context.on("click", "i.remove-tab", function() { - $(this).closest("tr").remove(); + $(".add_custom_tag", context).trigger("click"); + + context.on("click", ".custom_tags i.remove-tab", function(){ + var tr = $(this).closest('tr'); + tr.remove(); }); } @@ -41,9 +27,9 @@ define(function(require) { function _retrieveCustomTags(context){ var template_json = {}; - $('#custom_tags tr', context).each(function(){ - if ($('#KEY', $(this)).val()) { - template_json[$('#KEY', $(this)).val()] = $('#VALUE', $(this)).val(); + $('.custom_tags tr', context).each(function(){ + if ($('.custom_tag_key', $(this)).val()) { + template_json[$('.custom_tag_key', $(this)).val()] = $('.custom_tag_value', $(this)).val(); } }); @@ -53,27 +39,11 @@ define(function(require) { // context is the container div of customTagsHtml() // template_json are the key:values that will be put into the table function _fillCustomTags(context, template_json){ + $(".custom_tags i.remove-tab", context).trigger("click"); + $.each(template_json, function(key, value){ - var table = $('#custom_tags', context)[0]; - var rowCount = table.rows.length; - var row = table.insertRow(rowCount); - - var cell1 = row.insertCell(0); - var element1 = document.createElement("input"); - element1.id = "KEY"; - element1.type = "text"; - element1.value = TemplateUtils.htmlDecode(key); - cell1.appendChild(element1); - - var cell2 = row.insertCell(1); - var element2 = document.createElement("input"); - element2.id = "VALUE"; - element2.type = "text"; - element2.value = TemplateUtils.htmlDecode(value); - cell2.appendChild(element2); - - var cell3 = row.insertCell(2); - cell3.innerHTML = ""; + $(".custom_tags tbody", context).append( + RowTemplateHTML({key: key, value: value})); }); } diff --git a/src/sunstone/public/app/utils/custom-tags-table/html.hbs b/src/sunstone/public/app/utils/custom-tags-table/html.hbs index b205378c3d..b594662fae 100644 --- a/src/sunstone/public/app/utils/custom-tags-table/html.hbs +++ b/src/sunstone/public/app/utils/custom-tags-table/html.hbs @@ -1,19 +1,6 @@ -
-
- -
-
- -
-
- -
-
- +
@@ -21,12 +8,17 @@ - - - - - + + + + + +
{{tr "KEY"}}
+ + {{tr "Add another attribute"}} + +
\ No newline at end of file diff --git a/src/sunstone/public/app/utils/custom-tags-table/row.hbs b/src/sunstone/public/app/utils/custom-tags-table/row.hbs new file mode 100644 index 0000000000..fe81767301 --- /dev/null +++ b/src/sunstone/public/app/utils/custom-tags-table/row.hbs @@ -0,0 +1,13 @@ + + + + + + + + + + + \ No newline at end of file