# I cant update UI template!

**URL:** <https://discourse.nodered.org/t/i-cant-update-ui-template/47031>\
**Category:** General\
**Created:** [11 June 2021 12:55 UTC](https://discourse.nodered.org/t/i-cant-update-ui-template/47031 "2021-06-11T12:55:33Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [11 June 2021 12:55 UTC](https://discourse.nodered.org/t/i-cant-update-ui-template/47031/1 "2021-06-11T12:55:33Z")

</div>

hi I cant update data injected to Ui telpmate until reload Tabs !!!  
whay  
any help

```auto
[{"id":"fadb2f93.c61ec8","type":"ui_template","z":"3bab7d86.a7d252","group":"917f331.ee040d","name":"Head","order":3,"width":"16","height":"17","format":"<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.datatables.net/v/ju-1.12.1/dt-1.10.18/af-2.3.2/b-1.5.4/datatables.min.css\"/>\n \n<script type=\"text/javascript\" src=\"https://cdn.datatables.net/v/ju-1.12.1/dt-1.10.18/af-2.3.2/b-1.5.4/datatables.min.js\"></script>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":470,"y":460,"wires":[[]]},{"id":"2eb129eb.da4e26","type":"ui_template","z":"3bab7d86.a7d252","group":"917f331.ee040d","name":"Table","order":3,"width":"16","height":"17","format":"<table id=\"example\" class=\"display\" width=\"100%\"></table>\n<style> \nbody.nr-dashboard-theme md-content md-card {\n\tcolor: #000000;\n}\n</style>\n<script type=\"text/javascript\" class=\"init\">\n var dataSet =[];\n $(document).ready(function() {\n $('#example').DataTable( {\n data: dataSet,\n columns: [\n { title: \"Name\" },\n { title: \"Position\" },\n { title: \"Office\" },\n { title: \"Extn.\" },\n { title: \"Start date\" },\n { title: \"Salary\" }\n]\n } );\n} );\n(function(scope) {\n\n scope.$watch('msg', function (msg) { //watch for an incoming NR msg\n if (msg) {\n console.log(msg)\n dataSet = msg.payload;\n \n\n\n\n };\n }); \n })(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":470,"y":500,"wires":[[]]},{"id":"a4b9a602.cedcb8","type":"inject","z":"3bab7d86.a7d252","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[\"Tiger Nixon\",\"System Architect\",\"Edinburgh\",\"5421\",\"2011/04/25\",\"$320,800\"],[\"Garrett Winters\",\"Accountant\",\"Tokyo\",\"8422\",\"2011/07/25\",\"$170,750\"]]","payloadType":"json","x":300,"y":500,"wires":[["2eb129eb.da4e26"]]},{"id":"917f331.ee040d","type":"ui_group","name":"Group 1","tab":"5543b30c.8e955c","order":1,"disp":true,"width":"16","collapse":true},{"id":"5543b30c.8e955c","type":"ui_tab","name":"Tabulka","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 June 2021 13:43 UTC](https://discourse.nodered.org/t/i-cant-update-ui-template/47031/2 "2021-06-11T13:43:06Z")

</div>

You need to call `draw()`

```auto
[{"id":"fadb2f93.c61ec8","type":"ui_template","z":"8ac17474d97456ce","group":"917f331.ee040d","name":"Head","order":3,"width":"16","height":"17","format":"<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.datatables.net/v/ju-1.12.1/dt-1.10.18/af-2.3.2/b-1.5.4/datatables.min.css\"/>\n \n<script type=\"text/javascript\" src=\"https://cdn.datatables.net/v/ju-1.12.1/dt-1.10.18/af-2.3.2/b-1.5.4/datatables.min.js\"></script>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":1090,"y":640,"wires":[[]]},{"id":"2eb129eb.da4e26","type":"ui_template","z":"8ac17474d97456ce","group":"917f331.ee040d","name":"Table","order":3,"width":"16","height":"17","format":"<table id=\"example\" class=\"display\" width=\"100%\"></table>\n<style> \nbody.nr-dashboard-theme md-content md-card {\n\tcolor: #000000;\n}\n</style>\n<script type=\"text/javascript\" class=\"init\">\n\n(function(scope) {\n\n var $datatable\n var dataSet =[];\n $(document).ready(function() {\n $datatable = $('#example').DataTable( {\n data: dataSet,\n columns: [\n { title: \"Name\" },\n { title: \"Position\" },\n { title: \"Office\" },\n { title: \"Extn.\" },\n { title: \"Start date\" },\n { title: \"Salary\" }\n]\n } );\n });\n\n scope.$watch('msg', function (msg) { //watch for an incoming NR msg\n if (msg) {\n //let table = $('#example').DataTable();\n $datatable.clear();\n $datatable.rows.add(msg.payload).draw();\n };\n }); \n\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1090,"y":680,"wires":[[]]},{"id":"a4b9a602.cedcb8","type":"inject","z":"8ac17474d97456ce","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[\"Tiger Nixon\",\"System Architect\",\"Edinburgh\",\"5421\",\"2011/04/25\",\"$320,800\"],[\"Garrett Winters\",\"Accountant\",\"Tokyo\",\"8422\",\"2011/07/25\",\"$170,750\"]]","payloadType":"json","x":920,"y":680,"wires":[["2eb129eb.da4e26"]]},{"id":"917f331.ee040d","type":"ui_group","name":"Group 1","tab":"5543b30c.8e955c","order":1,"disp":true,"width":"16","collapse":true},{"id":"5543b30c.8e955c","type":"ui_tab","name":"Tabulka","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [11 June 2021 13:48 UTC](https://discourse.nodered.org/t/i-cant-update-ui-template/47031/3 "2021-06-11T13:48:05Z")

</div>

thanks man its worked

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [11 June 2021 14:05 UTC](https://discourse.nodered.org/t/i-cant-update-ui-template/47031/4 "2021-06-11T14:05:47Z")

</div>

now i want Get Data from a Selected row or cell and send it to node-red (msg.payload)  
[https://datatables.net/reference/api/cell().data()](https://datatables.net/reference/api/cell().data())  
exp : Alert the data from a cell when it is clicked upon

```auto
$('#example tbody').on( 'click', 'td', function () {
    alert( table.cell( this ).data() );
} );

```

how to implement it???

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 June 2021 14:07 UTC](https://discourse.nodered.org/t/i-cant-update-ui-template/47031/5 "2021-06-11T14:07:24Z")

</div>

Use scope.send as documented in the template built in help.

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [11 June 2021 14:29 UTC](https://discourse.nodered.org/t/i-cant-update-ui-template/47031/6 "2021-06-11T14:29:13Z")

</div>

> [@Steve-Mcl](#):
>
> scope.send

ok am updating ui template to

```auto
<table id="example" class="display" width="100%"></table>
<style> 
body.nr-dashboard-theme md-content md-card {
	color: #000000;
}
</style>
<script type="text/javascript" class="init">

(function(scope) {

    var $datatable
    var dataSet =[];
    $(document).ready(function() {
        $datatable = $('#example').DataTable( {
            data: dataSet,
            columns: [
                { title: "Name" },
                { title: "Position" },
                { title: "Office" },
                { title: "Extn." },
                { title: "Start date" },
                { title: "Salary" }
            ]
        } );
    });
$('#example tbody').on( 'click', 'td', function () {
    msg.payload = table.cell( this ).data()
    $scope.send(msg);
    
} );
    scope.$watch('msg', function (msg) { //watch for an incoming NR msg
        if (msg) {
            //let table = $('#example').DataTable();
            $datatable.clear();
            $datatable.rows.add(msg.payload).draw();
        };
    }); 

})(scope);
</script>

```

but not work

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 June 2021 14:30 UTC](https://discourse.nodered.org/t/i-cant-update-ui-template/47031/7 "2021-06-11T14:30:39Z")

</div>

> [@d0d04m3](#):
>
> `$scope.send(msg)`

```auto
let m {};
m.payload = "whatever";
scope.send(m);

```

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [11 June 2021 14:45 UTC](https://discourse.nodered.org/t/i-cant-update-ui-template/47031/8 "2021-06-11T14:45:45Z")

</div>

nothing  
The problem is not in `scop.send`  
Probably in jquary functions  
changed scop.send with console log and nothing  
Could the function be located wrong?

```auto
$('#example tbody').on( 'click', 'td', function () {
   conole.log("test");
    
} );

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 June 2021 14:52 UTC](https://discourse.nodered.org/t/i-cant-update-ui-template/47031/9 "2021-06-11T14:52:32Z")

</div>

The datatables library has helper functions & handlers / callbacks for cell click and row click and getting values. Read the [docs](https://datatables.net/forums/discussion/10667/row-click-event-need-to-work-with-one-of-the-cell-content-of-the-clicked-row)

.

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [11 June 2021 15:51 UTC](https://discourse.nodered.org/t/i-cant-update-ui-template/47031/10 "2021-06-11T15:51:03Z")

</div>

ok its work and see log in browser console

```auto
console.log('Col Clicked.', this, aData, iDisplayIndex, iDisplayIndexFull);

```

 ![Untitled](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/a/8a60fd28dd4a3f3d799c7041c46077e0582792f3.png)

but how convert this log to object !!!  
and if send` this` to NR i see :

```auto
let m = {"topic":"cell click","payload":""}
m.payload = this;
scope.send(m)

```

![Untitled](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/3/7327c2a00e0269d69411bfac007e2a8c62e2d21e.png)

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [11 June 2021 16:57 UTC](https://discourse.nodered.org/t/i-cant-update-ui-template/47031/11 "2021-06-11T16:57:11Z")

</div>

ok so i found another way  
with

```auto
$('#example tbody').on( 'click', 'td', function () {
   
    scope.send( $datatable.cell( this ).data() );
    
} );

```

but first click worked but with Error in console  
and second click nothing

 ![Untitled](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/1/f1e8e6b56b303b315d78cb3aa00b485551ba42cb.png)

full code UI Template

```auto
<table id="example" class="display" width="100%"></table>
<style> 
body.nr-dashboard-theme md-content md-card {
	color: #000000;
}
</style>

<script type="text/javascript" class="init">

     
(function(scope) {

    var $datatable
    var dataSet =[];
    $(document).ready(function() {
        $datatable = $('#example').DataTable( {
            fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// Row click
$(nRow).on('click', function() {
//console.log('Row Clicked. Look I have access to all params, thank You closures.', this, aData, iDisplayIndex, iDisplayIndexFull);

});

// Cell click
$('td', nRow).on('click', function() {
//console.log('Col Clicked.', this, aData, iDisplayIndex, iDisplayIndexFull);

});
},
            data: dataSet,
            columns: [
                { title: "Name" },
                { title: "Position" },
                { title: "Office" },
                { title: "Extn." },
                { title: "Start date" },
                { title: "Salary" }
            ]
        } );
  
$('#example tbody').on( 'click', 'td', function () {
   
    scope.send( $datatable.cell( this ).data() );
    
} );
    });

        
    scope.$watch('msg', function (msg) { //watch for an incoming NR msg
        if (msg) {
            //let table = $('#example').DataTable();
            $datatable.clear();
            $datatable.rows.add(msg.payload).draw();
        };
    }); 

})(scope);

</script>

```