# How to preserve state of the edit dialog?

**URL:** <https://discourse.nodered.org/t/how-to-preserve-state-of-the-edit-dialog/87029>\
**Category:** Developing Nodes\
**Created:** [5 April 2024 15:37 UTC](https://discourse.nodered.org/t/how-to-preserve-state-of-the-edit-dialog/87029 "2024-04-05T15:37:02Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![hansimeister](https://avatars.discourse-cdn.com/v4/letter/h/a88e4f/32.png) [@hansimeister](https://discourse.nodered.org/u/hansimeister)\
**Post date:** [5 April 2024 15:37 UTC](https://discourse.nodered.org/t/how-to-preserve-state-of-the-edit-dialog/87029/1 "2024-04-05T15:37:02Z")

</div>

Hey there

I want to preserve the selected values and therefore whole state of the custom node code below. What is the best way to do that, that e.g. after browser refresh or restart of node-red the selected values are still shown in the UI?

Thank you and have a great weekend.

```auto
<script type="text/javascript">
    RED.nodes.registerType('sivideo-subscribe-event', {
        category: 'SiVideo',
        paletteLabel: 'Subscribe Event',
        color: '#009999',
        defaults: {
            name: { value: "" },
            server: { value: "", type: "sivideo-server" },
            eventTypes: { value: "" }
        },
        inputs: 0,
        outputs: 1,
        icon: "font-awesome/fa-rss",
        label: function () {
            return this.name || "SiVideo Subscribe Event";
        },
        oneditprepare: function () {
            // click event for the button to reload the eventTypes
            $("#node-input-eventTypes-button").click(function () {
                // make a get request to the server to get the eventTypes
                $.get("/getEventTypes", function (data) {             
                    // set the eventTypes to the input
                    $("#node-input-eventTypes-field").typedInput({
                        types: [
                            {
                                value: "eventTypes",
                                multiple: "true",
                                options: data,
                            }
                        ],

                    })
                });
            });
        },
        // create Listener with the selected eventTypes
        oneditsave: function () {
            var nodeId = this.id;
            // get the selected eventTypes
            var eventTypes = $("#node-input-eventTypes-field").typedInput("value");         
            // create a listener with the selected eventTypes
            console.log("sending post request to: /subscribeEvents/" + nodeId + " with eventTypes: " + eventTypes);
            $.post("/subscribeEvents/" + nodeId, { eventTypes: eventTypes, nodeId: nodeId }, function (data) {
            });
        }
    }
    );
</script>

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 April 2024 09:02 UTC](https://discourse.nodered.org/t/how-to-preserve-state-of-the-edit-dialog/87029/2 "2024-04-07T09:02:59Z")

</div>

To preserve a value, you need to add the item to the `defaults`

Try changing this:

> [@hansimeister](#):
>
> ```auto
> var eventTypes = $("#node-input-eventTypes-field").typedInput("value");         
> 
> ```

to this:

```auto
            this.eventTypes = $("#node-input-eventTypes-field").typedInput("value");         

```

* * *

This is a guess based on the fact I see you have declared `eventTypes` in your `defaults` object

---

<div class="post-metadata">

**Author:** ![hansimeister](https://avatars.discourse-cdn.com/v4/letter/h/a88e4f/32.png) [@hansimeister](https://discourse.nodered.org/u/hansimeister)\
**Post date:** [10 April 2024 13:42 UTC](https://discourse.nodered.org/t/how-to-preserve-state-of-the-edit-dialog/87029/3 "2024-04-10T13:42:44Z")

</div>

Thank you for your reply. Unfortunately this does not work, since Iam there only saving the value and not the label too. I want to basically when I reopen the typedInput have a preserved state. Gosh this seems so hard in comparison to e.g. vuejs or react.

Thanks

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 April 2024 13:46 UTC](https://discourse.nodered.org/t/how-to-preserve-state-of-the-edit-dialog/87029/4 "2024-04-10T13:46:45Z")

</div>

You can store more than simple values in the defaults.

you could, for example, store a lookup object that contains labels and values. simply populate it in `oneditsave` and restore it in `oneditprepare`

> [@hansimeister](#):
>
> Gosh this seems so hard in comparison to e.g. vuejs or react.

they did not exist when Node-RED was invented! Browsers did not have standardised methods either. jQuery was the main choice to simplify web development.

Also, don't forget, there is a lot going on behind the scenes (it isnt just a web server)

---

<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:** [10 April 2024 13:52 UTC](https://discourse.nodered.org/t/how-to-preserve-state-of-the-edit-dialog/87029/5 "2024-04-10T13:52:32Z")

</div>

To be fair, Typed Inputs ARE VERY hard to work with! 🙂

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 April 2024 14:03 UTC](https://discourse.nodered.org/t/how-to-preserve-state-of-the-edit-dialog/87029/6 "2024-04-10T14:03:19Z")

</div>

> With great flexibility comes great complexity.

**Spiderman** 😉

---

<div class="post-metadata">

**Author:** ![hansimeister](https://avatars.discourse-cdn.com/v4/letter/h/a88e4f/32.png) [@hansimeister](https://discourse.nodered.org/u/hansimeister)\
**Post date:** [10 April 2024 14:32 UTC](https://discourse.nodered.org/t/how-to-preserve-state-of-the-edit-dialog/87029/7 "2024-04-10T14:32:03Z")

</div>

great! How does one extract the selected values from a typedInput is there something like a direct method or similar?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 April 2024 14:59 UTC](https://discourse.nodered.org/t/how-to-preserve-state-of-the-edit-dialog/87029/8 "2024-04-10T14:59:45Z")

</div>

See methods in [the docs](https://nodered.org/docs/api/ui/typedInput/)

e.g. `this.value = $('my-typed-input').typedInput('value')`

---

<div class="post-metadata">

**Author:** ![hansimeister](https://avatars.discourse-cdn.com/v4/letter/h/a88e4f/32.png) [@hansimeister](https://discourse.nodered.org/u/hansimeister)\
**Post date:** [10 April 2024 15:06 UTC](https://discourse.nodered.org/t/how-to-preserve-state-of-the-edit-dialog/87029/9 "2024-04-10T15:06:09Z")

</div>

Thanks! So if I see correctly there is no way of receiving the label and value that are selected at the same time?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 April 2024 15:33 UTC](https://discourse.nodered.org/t/how-to-preserve-state-of-the-edit-dialog/87029/10 "2024-04-10T15:33:51Z")

</div>

I dont understand why you would need to?

EDIT:

PS: if you click the reply button at the bottom (as opposed to the reply button on the comment you are responding to), we do not get a notification and have no idea who you are responding to.

---

<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:** [9 June 2024 15:34 UTC](https://discourse.nodered.org/t/how-to-preserve-state-of-the-edit-dialog/87029/11 "2024-06-09T15:34:21Z")

</div>

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