From 438c598e94cd300750eaadbb3981418368812970 Mon Sep 17 00:00:00 2001 From: Jo-Philipp Wich Date: Tue, 27 Dec 2022 20:20:36 +0100 Subject: [PATCH] luci-base: ui.js: support div based table markup in UITable.update() Constructing UITable instances from existing, div based markup is supported but the UITable.update() implementation did not account for that, leading to defunct data updates on tables built from div based markup. Fix this issue by extending UITable.update() to consider a div based table structure as well, like we do in UITable.initFromMarkup() already. Fixes: #5713 Signed-off-by: Jo-Philipp Wich (cherry picked from commit deed6827b2eb0b58ee8c1d810a584a9589108eac) --- .../luci-base/htdocs/luci-static/resources/ui.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js index 7168b8c144..c7b7ccd773 100644 --- a/modules/luci-base/htdocs/luci-static/resources/ui.js +++ b/modules/luci-base/htdocs/luci-static/resources/ui.js @@ -3231,19 +3231,21 @@ var UITable = baseclass.extend(/** @lends LuCI.ui.table.prototype */ { this.placeholder = placeholder; var n = 0, - rows = this.node.querySelectorAll('tr'), + rows = this.node.querySelectorAll('tr, .tr'), trows = [], - headings = [].slice.call(this.node.firstElementChild.querySelectorAll('th')), - captionClasses = this.options.captionClasses; + headings = [].slice.call(this.node.firstElementChild.querySelectorAll('th, .th')), + captionClasses = this.options.captionClasses, + trTag = (rows[0] && rows[0].nodeName == 'DIV') ? 'div' : 'tr', + tdTag = (headings[0] && headings[0].nodeName == 'DIV') ? 'div' : 'td'; data.forEach(function(row) { - trows[n] = E('tr', { 'class': 'tr' }); + trows[n] = E(trTag, { 'class': 'tr' }); for (var i = 0; i < headings.length; i++) { var text = (headings[i].innerText || '').trim(); var raw_val = Array.isArray(row[i]) ? row[i][0] : null; var disp_val = Array.isArray(row[i]) ? row[i][1] : row[i]; - var td = trows[n].appendChild(E('td', { + var td = trows[n].appendChild(E(tdTag, { 'class': 'td', 'data-title': (text !== '') ? text : null, 'data-value': raw_val @@ -3270,8 +3272,8 @@ var UITable = baseclass.extend(/** @lends LuCI.ui.table.prototype */ { this.node.removeChild(rows[n]); if (placeholder && this.node.firstElementChild === this.node.lastElementChild) { - var trow = this.node.appendChild(E('tr', { 'class': 'tr placeholder' })), - td = trow.appendChild(E('td', { 'class': 'td' }, placeholder)); + var trow = this.node.appendChild(E(trTag, { 'class': 'tr placeholder' })), + td = trow.appendChild(E(tdTag, { 'class': 'td' }, placeholder)); if (typeof(captionClasses) == 'object') DOMTokenList.prototype.add.apply(td.classList, L.toArray(captionClasses[0])); -- 2.30.2