# Interference between widgets in the same tab

**URL:** <https://discourse.nodered.org/t/interference-between-widgets-in-the-same-tab/48748>\
**Category:** Dashboard\
**Created:** [22 July 2021 04:30 UTC](https://discourse.nodered.org/t/interference-between-widgets-in-the-same-tab/48748 "2021-07-22T04:30:33Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [22 July 2021 04:30 UTC](https://discourse.nodered.org/t/interference-between-widgets-in-the-same-tab/48748/1 "2021-07-22T04:30:33Z")

</div>

Hello, I have a complex problem with "interference" between widgets in the same tab

To demonstrate and explain the problem I am facing, I have created a simplified flow. In short, the html code in the ui\_template nodes have two "sections" that I show/hide using _style.display = "none"_ and _style.display = "block"_ respectively. The control is triggered via drop down messages sent to the nodes. The ui\_template nodes receive the messages via the scope

This works fine when I have the ui\_templates and related drop downs in separate tabs but not if I have them in the same which I need for the project I'm currently working on

When in separate tabs, all is ok, both can be controlled individually without interfering each other

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/b/1b0019b20b9c57712f099175bd40b7a3084f26bf.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/6/d65ded8eee212563bf36d5226f3deaefcd4c4963.png)

When in the same tab, they cannot be controlled individually, they do interfere, both dropdowns controls the same ui\_template

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/651684359dd8837bde4851ca495d5e67fd8b0b08.png)

[drop\_down\_demo.json](https://discourse.nodered.org/uploads/short-url/9INVsLoBE8eLHV1TKIYrRlZFP3Y.json) (4.6 KB)

The attached flow is configured with separate tabs where it is working. To recreate the problem, just edit and move one of the dashboard group nodes so they are all on the same tab

Greatful for any hints getting around this  
Best regards, Walter

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 July 2021 05:26 UTC](https://discourse.nodered.org/t/interference-between-widgets-in-the-same-tab/48748/2 "2021-07-22T05:26:01Z")

</div>

You have template nodes where you define and search elements with same "id"'s . That is not valid.  
The "id" property of element is meant to be unique.

There is an example at the ui\_template node's help page showing how to use unique id's

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [22 July 2021 05:32 UTC](https://discourse.nodered.org/t/interference-between-widgets-in-the-same-tab/48748/3 "2021-07-22T05:32:27Z")

</div>

Good morning,  
I thought I have unique id's  
div1a, div2a, div1b, div2b

I suspect there is something with using the scope. It is unique per tab but not per widget

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 July 2021 05:39 UTC](https://discourse.nodered.org/t/interference-between-widgets-in-the-same-tab/48748/4 "2021-07-22T05:39:04Z")

</div>

The uniqueness must be across html DOM. The other tab does not exist so there is only one ui\_template. If you put more than one in same tab, you are creating elements with same id's cos in the view A and view B you have elements with same ids. ("div1a" ...)

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [22 July 2021 05:55 UTC](https://discourse.nodered.org/t/interference-between-widgets-in-the-same-tab/48748/5 "2021-07-22T05:55:29Z")

</div>

OK, thank you, if I understand you correctly, I must have "more complete" html sections, one DOM for each so to say to be able to have uniqueness?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 July 2021 06:00 UTC](https://discourse.nodered.org/t/interference-between-widgets-in-the-same-tab/48748/6 "2021-07-22T06:00:51Z")

</div>

If you follow the structure of this example you can make one ui\_template and copy it how many times you want. The uniqueness is guaranteed by the scope id.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/7/a7c57ddd2f8bb81dd31f4e73e8645434ec2383a3.png)

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [22 July 2021 06:03 UTC](https://discourse.nodered.org/t/interference-between-widgets-in-the-same-tab/48748/7 "2021-07-22T06:03:40Z")

</div>

Thank you, I will try,  
Best regards, Walter

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [22 July 2021 08:10 UTC](https://discourse.nodered.org/t/interference-between-widgets-in-the-same-tab/48748/8 "2021-07-22T08:10:45Z")

</div>

So I am on the way I believe!! The two widgets seem to be independent now, but I would like to ask you one more question, is about setting properties of the html. The example syntax given like _$("#my\_"+scope.$id).html(msg.payload);_ works fine for changing the text, that I have tested

But now I need to change some other attributes. Normally I would from javascript do _document.getElementById_  
As example I have tried this but it seems not working  
`document.getElementById($("#div2a_"+scope.$id)).style.backgroundColor="red";`

I have also tried several other syntaxes but no success, so if you could hint how I can change such attributes as in the example below I would be very happy 😃

Best regards, Walter

[drop\_down\_demo2.json](https://discourse.nodered.org/uploads/short-url/oV2nO74pyMH8Ie5Mdl5HxAXkjRr.json) (3.9 KB)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 July 2021 08:28 UTC](https://discourse.nodered.org/t/interference-between-widgets-in-the-same-tab/48748/9 "2021-07-22T08:28:43Z")

</div>

It goes a bit easier with JQuery I'd guess  
`document.getElementById('id')` goes like this

```auto
 $("#div1a_"+scope.$id)

```

To change CSS properties [.css() | jQuery API Documentation](https://api.jquery.com/css/)

```auto
<div id="{{'div1a_'+$id}}" style="background-color: green;" height="50" width="100%">text1a</div>
<div id="{{'div2a_'+$id}}" style="background-color: green;" height="50" width="100%">text2a</div>

<script>
(function(scope) {
    scope.$watch('msg', function(msg) {
        if (msg.payload.match('one')) {
            console.log(msg.payload+'_a');
            $("#div1a_"+scope.$id).css("display","none");
            $("#div2a_"+scope.$id).css("display","block");
            $("#div2a_"+scope.$id).css("background","red");
        }
        if (msg.payload.match('two')) {
            console.log(msg.payload+'_a');
            $("#div2a_"+scope.$id).css("display","none");
            $("#div1a_"+scope.$id).css("display","block");
            $("#div1a_"+scope.$id).css("background","blue");
        }
    });
})(scope);

</script>

```

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [22 July 2021 08:36 UTC](https://discourse.nodered.org/t/interference-between-widgets-in-the-same-tab/48748/10 "2021-07-22T08:36:15Z")

</div>

Wonderful!! Works perfect!

Many thanks for your kind help!

Best regards, Walter

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [22 July 2021 15:34 UTC](https://discourse.nodered.org/t/interference-between-widgets-in-the-same-tab/48748/11 "2021-07-22T15:34:42Z")

</div>

Basically got everything working but just wonder about what is the best way to update the view

Assume I have the following line in the html part

```auto
<div id="{{'picA_'+$id}}" style="text-align: center; transform:rotate({{msg.rotate}})"><img src={{msg.url}} class="small_monitor" ng-click="send({payload:action('snapshot')})" title="Click for snapshot"></div>

```

I would like to change the image presented and therefore I have the _src={{msg.url}}_ where msg.url will hold the path/url to the image

Is this the best possible way or is it better to set the src already with css? Like  
`$("#picA_"+scope.$id).css("src",msg.url);`  
or similar?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 August 2021 15:35 UTC](https://discourse.nodered.org/t/interference-between-widgets-in-the-same-tab/48748/12 "2021-08-05T15:35:29Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.