# Problem with dynamic table in ui\_template

**URL:** <https://discourse.nodered.org/t/problem-with-dynamic-table-in-ui-template/14401>\
**Category:** General\
**Created:** [16 August 2019 16:56 UTC](https://discourse.nodered.org/t/problem-with-dynamic-table-in-ui-template/14401 "2019-08-16T16:56:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![seth350](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/seth350/32/4617_2.png) [@seth350](https://discourse.nodered.org/u/seth350)\
**Post date:** [16 August 2019 16:56 UTC](https://discourse.nodered.org/t/problem-with-dynamic-table-in-ui-template/14401/1 "2019-08-16T16:56:21Z")

</div>

I have a table that is generated in a ui\_template node that is causing me grief.

The object of this flow is to process alarms as they occur and add a date-time specifying when the alarm occured and then add the alarm to an array in the flow context.

The array is then sent to a ui\_template node that builds a table using `ng-repeat` for the rows.

I added two ui\_buttons that give the user the ability to acknowledge one alarm or all of them. Essentially removing one alarm (the newest) or all from the table.

This all works fine.

My grief started after I tried to implement a new feature that would allow the user to select which alarm they would like to acknowledge.

I added this code to the ui\_template. Thank you [krambriw](https://discourse.nodered.org/u/krambriw) for suggesting the scope in another post.

```auto
<script>
//Declare once to make scope available in functions
var theScope = scope;
var rowN = 0
    
$(document).on("click", "tr", function (e) {
    rowN = $(e.currentTarget).index() + 1;
    theScope.send({payload:rowN});
});
</script>

```

This works as well, sending the row number that was clicked back to my flow.  
The problem is that once a row is clicked, all of the rows are cleared from the table.  
However, if another alarm is added, the entire table populates again with all of the rows intact plus the new one.

Can anyone offer a clue to what could be happening?

```auto
[{"id":"b1343517.a70708","type":"inject","z":"613a1b01.3fefc4","name":"Detect Alarm","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":160,"wires":[["1af047bc.786c78"]]},{"id":"5645d088.ccedb","type":"moment","z":"613a1b01.3fefc4","name":"Add DateTime To msg","topic":"","input":"","inputType":"date","inTz":"America/Chicago","adjAmount":0,"adjType":"days","adjDir":"add","format":"M/D/YY h:mma ","locale":"en_US","output":"datetime","outputType":"msg","outTz":"America/Chicago","x":580,"y":160,"wires":[["44d2b282.bc179c"]]},{"id":"1010928d.d9c40d","type":"ui_button","z":"613a1b01.3fefc4","name":"","group":"9ddea0e7.40498","order":8,"width":"4","height":"2","passthru":true,"label":"Acknowledge","tooltip":"","color":"","bgcolor":"","icon":"","payload":"ack","payloadType":"str","topic":"","x":600,"y":250,"wires":[["44d2b282.bc179c"]]},{"id":"b7f1d06f.bb005","type":"ui_button","z":"613a1b01.3fefc4","name":"","group":"9ddea0e7.40498","order":8,"width":"4","height":"2","passthru":true,"label":"Acknowledge All","tooltip":"","color":"","bgcolor":"","icon":"","payload":"ackAll","payloadType":"str","topic":"","x":610,"y":300,"wires":[["44d2b282.bc179c"]]},{"id":"1af047bc.786c78","type":"change","z":"613a1b01.3fefc4","name":"Set Alarm Text & Topic","rules":[{"t":"set","p":"payload","pt":"msg","to":"Temperature High","tot":"str"},{"t":"set","p":"topic","pt":"msg","to":"Tank #2","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":160,"wires":[["5645d088.ccedb"]]},{"id":"44d2b282.bc179c","type":"function","z":"613a1b01.3fefc4","name":"Process Alarms & Inputs","func":"let activeAlarms = flow.get('activeAlarms') || [];\n\nif(msg.payload === 'ack'){ // acknowledge button pressed\n \n activeAlarms.shift(); // remove first alarm in alarm array\n \n} else if(msg.payload === 'ackAll'){ // acknowledge all button pressed\n\n activeAlarms = []; // clear alarm array\n \n} else { // new alarm received\n\n let obj = {'message':msg.payload,'topic':msg.topic,'datetime':msg.datetime}\n activeAlarms.unshift(obj); // insert new alarm at beginning of alarm array\n\n}\n\nflow.set('activeAlarms', activeAlarms);\n\nmsg.payload = flow.get('activeAlarms');\nreturn msg;","outputs":1,"noerr":0,"x":850,"y":160,"wires":[["387d2ee9.a99e62"]]},{"id":"387d2ee9.a99e62","type":"ui_template","z":"613a1b01.3fefc4","group":"9ddea0e7.40498","name":"Alarm Table","order":2,"width":"30","height":"11","format":"<style>\n\n .alarmDiv {\n width: 100%;\n height: 100%;\n background-color:rgb(128,0,1,0.2);\n }\n \n .alarmTable {\n width: 100%;\n background-color:rgb(128,0,1,0.2);\n cursor:pointer;\n }\n \n</style>\n\n<div class=\"alarmDiv\">\n\t<table class=\"alarmTable\" id=\"aT\">\n\t\t<thead class=\"alarmList\">\n\t\t\t<tr>\n\t\t\t <th style=\"background-color:#890000\">ID</th>\n\t\t\t <th style=\"background-color:#890000\">Topic</th>\n\t\t\t\t<th style=\"background-color:#890000\">Time Occured</th>\n\t\t\t\t<th style=\"background-color:#890000\">Description</th>\n\t\t\t</tr>\n\t\t</thead>\n\t\t<tbody class=\"alarmBody\">\n\t\t\t<tr ng-repeat=\"alarm in msg.payload | limitTo:10\">\n\t\t\t <td>{{alarm.id}}</td>\n\t\t\t <td>{{alarm.topic}}</td>\n\t\t\t\t <td>{{alarm.datetime}}</td>\n\t\t\t\t <td>{{alarm.message}}</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table> \n</div>\n\n<script>\n//Declare once to make scope available in functions\nvar theScope = scope;\nvar rowN = 0\n \n$(document).on(\"click\", \"tr\", function (e) {\n rowN = $(e.currentTarget).index() + 1;\n theScope.send({payload:rowN});\n});\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1070,"y":160,"wires":[["c6d9513b.c9053"]]},{"id":"c6d9513b.c9053","type":"debug","z":"613a1b01.3fefc4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":1120,"y":240,"wires":[]},{"id":"9ddea0e7.40498","type":"ui_group","z":"","name":"Testing","tab":"eefe50d3.3cfcf","disp":true,"width":"30","collapse":false},{"id":"eefe50d3.3cfcf","type":"ui_tab","z":"","name":"Sandbox","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![seth350](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/seth350/32/4617_2.png) [@seth350](https://discourse.nodered.org/u/seth350)\
**Post date:** [16 August 2019 17:26 UTC](https://discourse.nodered.org/t/problem-with-dynamic-table-in-ui-template/14401/2 "2019-08-16T17:26:21Z")

</div>

Running the debugger, it appears this function is being called after clicking a row.  
This is deleting each row in my table for some reason.

```auto
    function Ie(e, t, n) {
        for (var r, i = t ? w.filter(t, e) : e, o = 0; null != (r = i[o]); o++)
            n || 1 !== r.nodeType || w.cleanData(ye(r)),
            r.parentNode && (n && w.contains(r.ownerDocument, r) && ve(ye(r, "script")),
            r.parentNode.removeChild(r));
        return e
    }

```

---

<div class="post-metadata">

**Author:** ![seth350](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/seth350/32/4617_2.png) [@seth350](https://discourse.nodered.org/u/seth350)\
**Post date:** [18 August 2019 20:56 UTC](https://discourse.nodered.org/t/problem-with-dynamic-table-in-ui-template/14401/3 "2019-08-18T20:56:12Z")

</div>

After some more debugging...

When `scope.send` is called, it actually replaces the current payload that is loaded in the ui.

Is there some other way to send a message back to the flow?