Interference between widgets in the same tab

[krambriw]

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

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

drop_down_demo.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

[hotNipi]

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

[krambriw]

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

[hotNipi]

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" ...)

[krambriw]

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?

[hotNipi]

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.

[krambriw]

Thank you, I will try,
Best regards, Walter

[krambriw]

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 (3.9 KB)

[hotNipi]

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

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

To change CSS properties .css() | jQuery API Documentation

<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>

[krambriw]

Wonderful!! Works perfect!

Many thanks for your kind help!

Best regards, Walter

[krambriw]

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

<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?