Help with jQuery toggleClass

Dashboard
1

Hello,

I move my control page to nodered.
Before I programmed everything in html and js.
Now I need help with the function of jQuery toggleClass. It looks like this in html:

<script type="javascript/text" src="jquery-3.5.1.min.js"> 
    $(document).ready(function () {
      $.ajaxSetup({ cache: false });
        setInterval(function () {
        $('#statusInt_1').text(data.statusInt_1);
        $('#Wire1').toggleClass('Wire1Complete', (data.statusInt_1==3));
        $('#Wire1').toggleClass('Wire1Active', (data.statusInt_1==1));
        $('#Wire1').toggleClass('Wire1Disabled', (data.statusInt_1==0));
        $('#Wire1').toggleClass('Wre1Running',(data.statusInt_1 == 5));
    });
    },1000);
    </script>

I had received an Int value from my control and then the class should be activated, according to the value.
The value was passed to html with JSON.
Now I want to do the same for my dashboard with ui_template. So I need help with the function that can pass the value from the control to my template with html code and toggleClass for my css file to make optical changes in real time.

Or is there a better way to change the style of own template? I change the color of border for example with this toggleClass function.

2

???

Dashboard already has jQuery, you don't need to reference it again.

Also, Dashboard uses Angular so you are unlikely to need either the ajax call or the setInterval. You may need a watch function though.

But really, you don't need any jQuery for your Dashboard since Angular is data responsive - it will self update in response to receiving data. All you need to do is to tie the class attributes to the variables directly.

Check out the cookbook and other examples.

3

i simply showed how i had solved this in html. And now ask how you could achieve the same with the dashboard from nodered. If I knew how to do that, I would not have asked.

A link, an example or a tip how to trigger classes in dashboard would be helpful.

4

Basic examples can be found at the ui_template node's help page. Cos the ui_template node is the one you will be using to make your own stuff for dashboard.

<div class="red" id="{{'my_'+$id}}">Some text</div>
<style>
    .red{
        background:red;
    }
    .blue{
        background:blue;
    }
</style>
<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      $("#my_"+scope.$id).toggleClass('blue')
    }
  });
})(scope);
</script>
5

perfect, thank you
now I can build my functions using your example.

You helped me a lot last days @hotNipi big thanks. Do you have a donation page or something?

1 Like
6

Oh yes. You can donate. Do following - Go to pets store, buy reasonable amount of cat or dog food. Then find animal shelter nearby and give that food to them. Do some pictures with happy people or animals surrounding you. And you have donated. Sharing the experience doubles the donated amount. :wink:

7 Likes
7

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