# Set button state from js

**URL:** <https://discourse.nodered.org/t/set-button-state-from-js/87917>\
**Category:** Developing Nodes\
**Created:** [13 May 2024 14:26 UTC](https://discourse.nodered.org/t/set-button-state-from-js/87917 "2024-05-13T14:26:19Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mstoffel-sag](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mstoffel-sag/32/90422_2.png) [@mstoffel-sag](https://discourse.nodered.org/u/mstoffel-sag)\
**Post date:** [13 May 2024 14:26 UTC](https://discourse.nodered.org/t/set-button-state-from-js/87917/1 "2024-05-13T14:26:19Z")

</div>

Hi experts,

I created a node that connects to a websocket server. I was able to set the node state from the backend (javascript) using:

```auto
node.status({
          fill: "green",
          shape: "ring",
          text: "Connecting...",
        });

```

I also implemented a button to disconnect the websocket via the admin api.

```auto
defaults: {
active: {value: true},

```

```auto

button: {
            toggle: "active",
            onclick: function() {
                var node = this;
                $.ajax({
                    url: 'notification/' + node.id +'/'+(node.active?"enable":"disable"),
                    cache: false,
                    dataType: 'json',
                    method: 'GET',
                    success: function (data) {
                        console.log("Success: " + JSON.stringify(data));
                    }
		        });
            }
        }

```

When I press the button the connection is dropped and the status is displayed as disconnected (cool). Not working is the other way around. The connection drops from the server (btw status I can set correctly) but the button is now out of sync.

I tried to set the button state from javascript backend via

> node.config.active = true;

But that has no effect. Any ideas?

Thanks and kind Regards,  
Marco

---

<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:** [13 May 2024 18:17 UTC](https://discourse.nodered.org/t/set-button-state-from-js/87917/2 "2024-05-13T18:17:51Z")

</div>

> [@mstoffel-sag](#):
>
> I tried to set the button state from javascript backend via
> 
> > node.config.active = true;
> 
> But that has no effect. Any ideas?

This is very confusing as you haven't really told us the full picture. Where, for example, is the button being shown? In the Editor, Dashboard, somewhere else?

Your code DOES have an effect if that is somewhere in the node's runtime. It sets that property to true. But what is `node.config` used for? It has no meaning unless you consume it somewhere else. But certainly it does not have any impact on the Node-RED Editor since that is not how to communicate between the runtime and the Editor.

---

<div class="post-metadata">

**Author:** ![mstoffel-sag](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mstoffel-sag/32/90422_2.png) [@mstoffel-sag](https://discourse.nodered.org/u/mstoffel-sag)\
**Post date:** [13 May 2024 19:05 UTC](https://discourse.nodered.org/t/set-button-state-from-js/87917/3 "2024-05-13T19:05:21Z")

</div>

Sorry for not giving enough info here.

html

```auto
RED.nodes.registerType('notification',{
        category: 'Cumulocity',
        color: '#a6bbcf',
        defaults: {
            name: {value:""},
            active: {value: true},
            subscription: {
                value:"", required: true,
                validate: RED.validators.typedInput('subscriptionType')
            },
            subscriptionType: {
                value: "Select"
            },
            subscriber: {value:"", required: true},
            c8yconfig: {value:"", type:"c8yconfig", required: true},
            useenv: {value: false}
        },
        inputs: 0,
        icon: "file.png",
        outputs:1,
        label: function() {
            return this.name ||"notification-" + this.subscriber;
        },
        button: {
            toggle: "active",
            onclick: function() {
                var node = this;
                $.ajax({
                    url: 'notification/' + node.id +'/'+(node.active?"enable":"disable"),
                    cache: false,
                    dataType: 'json',
                    method: 'GET',
                    success: function (data) {
                        console.log("Success: " + JSON.stringify(data));
                    }
		        });
            }
        }
    });

```

The button is shown in the editor as on the inject or debug node and it works on click.

js

```auto
   function notificationNode(config) {
      RED.nodes.createNode(this, config);
      var node = this;
      node.config = config;
      node.config.active = true;

```

I thought ` assigning toggle: "active",` would somehow bind that variable to the button. But I might have to look in the DOM to find out how to toggle by hand.

Thanks Marco

---

<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:** [14 May 2024 18:59 UTC](https://discourse.nodered.org/t/set-button-state-from-js/87917/4 "2024-05-14T18:59:00Z")

</div>

I may be wrong but I don't believe that the inject-style button was ever meant to have its status changed dynamically. Though certainly you would be able to manually disable it (e.g. change colour and prevent input) by using jQuery, however, there is limited interactivity available on the Editor. Really though, you are pushing the boundaries of the architecture there I think. You would probably need to mess with Node-RED's internal comms or events.

Much easier though would be to implement a "gate" function within the runtime and use the status message (available from the runtime) to indicate that the "gate" was open or closed. Simply don't let the injected message go anywhere if the gate is closed.

---

<div class="post-metadata">

**Author:** ![mstoffel-sag](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mstoffel-sag/32/90422_2.png) [@mstoffel-sag](https://discourse.nodered.org/u/mstoffel-sag)\
**Post date:** [15 May 2024 11:00 UTC](https://discourse.nodered.org/t/set-button-state-from-js/87917/5 "2024-05-15T11:00:14Z")

</div>

Yeah thanks, was having the same impression.... to stop messaging it seems more reasonable to deactivate the whole flow..

---

<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:** [14 July 2024 11:00 UTC](https://discourse.nodered.org/t/set-button-state-from-js/87917/6 "2024-07-14T11:00:31Z")

</div>

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