# Help with jQuery toggleClass

**URL:** <https://discourse.nodered.org/t/help-with-jquery-toggleclass/41083>\
**Category:** Dashboard\
**Created:** [16 February 2021 11:35 UTC](https://discourse.nodered.org/t/help-with-jquery-toggleclass/41083 "2021-02-16T11:35:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sfedo](https://avatars.discourse-cdn.com/v4/letter/s/3da27b/32.png) [@sfedo](https://discourse.nodered.org/u/sfedo)\
**Post date:** [16 February 2021 11:35 UTC](https://discourse.nodered.org/t/help-with-jquery-toggleclass/41083/1 "2021-02-16T11:35:59Z")

</div>

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:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 February 2021 11:54 UTC](https://discourse.nodered.org/t/help-with-jquery-toggleclass/41083/2 "2021-02-16T11:54:09Z")

</div>

> [@sfedo](#):
>
> `<script type="javascript/text" src="jquery-3.5.1.min.js"> `

???

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.

---

<div class="post-metadata">

**Author:** ![sfedo](https://avatars.discourse-cdn.com/v4/letter/s/3da27b/32.png) [@sfedo](https://discourse.nodered.org/u/sfedo)\
**Post date:** [16 February 2021 12:52 UTC](https://discourse.nodered.org/t/help-with-jquery-toggleclass/41083/3 "2021-02-16T12:52:51Z")

</div>

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.

---

<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:** [16 February 2021 13:01 UTC](https://discourse.nodered.org/t/help-with-jquery-toggleclass/41083/4 "2021-02-16T13:01:00Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![sfedo](https://avatars.discourse-cdn.com/v4/letter/s/3da27b/32.png) [@sfedo](https://discourse.nodered.org/u/sfedo)\
**Post date:** [16 February 2021 13:15 UTC](https://discourse.nodered.org/t/help-with-jquery-toggleclass/41083/5 "2021-02-16T13:15:34Z")

</div>

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?

---

<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:** [16 February 2021 13:29 UTC](https://discourse.nodered.org/t/help-with-jquery-toggleclass/41083/6 "2021-02-16T13:29:43Z")

</div>

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

---

<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:** [18 March 2021 13:30 UTC](https://discourse.nodered.org/t/help-with-jquery-toggleclass/41083/7 "2021-03-18T13:30:04Z")

</div>

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