Custom node with values from global

I managed to create a node that gets data from global adn then stores the data in dropdown. The problem now is that the dropdown fills but only 1st item in it is selectable. If i select some other option and close the node . Then the 1st option is selected again. No matter which one i select its always the 1st that gets selected

We've been through all of this and you were advised not to take this approach by Nick and others.

https://discourse.nodered.org/t/containing-data-in-the-global-and-then-reusing-it

Not sure we want to go through this again I'm afraid.

I know but im not asking u anything about global. Im just asking why my dropdown can select only 1st element? I get data by custom http admin

There are 100s of reasons why this might not be working. I'm not sure how you expect us to answer that with no knowledge of what code you've actually written.

$.getJSON("setGlobalHostConfig/" + hostaddress, function (res) {
          if (res.status) {
            $.getJSON("getGlobalHostConfig", function (recdata) {
              console.log(recdata);
              $("#node-input-server").empty();

              let server = [];
              recdata.forEach((item) => {
                server.push({
                  v: item,
                  t: item,
                });
              });
              console.log(server);
              for (let i = 0; i < server.length; i++) {
                let value = server[i].v;
                let text = server[i].t;
                $("#node-input-server").append(
                  $("<option></option>").attr("value", value).text(text) //For every element in the select tag append appropriate value and text (   <option value="#">#</option>    )
                );
              }
            });
          }
        });

I dont know why it selects only 1st

It will always select the first option because you are never telling it which option should be selected.

On my other dropdown i have literally the same code and it works fine

I'm sorry, but it is really hard to help when you don't provide full information.

You started by saying "why isn't X working", without showing us your code or providing any details. Now you say you have it working in another instance - again, without showing any code.

My response is the same though: in the code you have shared, I can see you build a select box with options loaded dynamically. But you never set the value of the select box, so it will default to the first element in the list.

What you are missing is a call, after you have added all the options, to set its value to the server value of the node. If you were to add var node = this; at the start of your oneditprepare function, then you'd be able to to $("#node-input-server").val(node.server) after the for loop that added all the options.

That assumes you have defined a property called server on the node.

        let e = $("#node-input-server")[0];
        let selHost = e.options[e.selectedIndex].value; // Gets the value of only the selected server
        console.log(selHost);

Shouldnt this be fine?

Shouldnt this be fine?

To do what exactly? That code gets the current selected value of the select box and prints it out. Nothing more than that.

I don't know where you have that code in relation to everything else.

What I do not see anywhere in your code is the line to set the value of the select box after you have filled it with options.

i have it right after the loop.
for (let i = 0; i < server.length; i++) { let value = server[i].v; let text = server[i].t; $("#node-input-server").append( $("<option></option>").attr("value", value).text(text) //For every element in the select tag append appropriate value and text ( <option value="#">#</option> ) ); } $("#node-input-server").val(this.server);

Edit: idk why it formats like this

Because you have to use ``` not just ` when marking code blocks.

I don't see the code you asked "Shouldn't this be fine" about anywhere in there.

I do see you call $("#node-input-server").val(this.server); - but you are using this.server. That will not work because at that point in your code, this is not your node object. You missed the bit I said about adding var node = this at the top of your oneditprepare and using node.server instead.

I have now created a button to call fetch inside nodes edit dialog but it doesnt take the value of inputs until i close and reopen the node. can i somehow change that i dont have to reopen the node to get the input values

I have no idea what you mean. Sorry. If you were to provide some actual detail with your question, as I ask repeatedly, then I may be able to help.

     fetch(url)
            .then((res) => res.json())
            .then((data) => {
              data.forEach((item) =>
                options.push({
                  v: item.name,
                  t: item.name,
                })
              );

              for (let i = 0; i < options.length; i++) {
                let value = options[i].v;
                let text = options[i].t;
                $("#node-input-options").append(
                  $("<option></option>").attr("value", value).text(text) //For every element in the select tag append appropriate value and text (   <option value="#">#</option>    )
                );
              }
            });
        }, 1000);

this is the code for the fetch that i call on click. It should fetch 3 objects. But every time i click i delete the objects i have in my nodeedits dialog and on click it adds 3 everytime even tho i delete previous 3. So at start i have 3 obj. On 1st click i have 6 etc..
EDIT: on the top of the code i forgot to write this => $("#node-input-options").empty()

in which case, you could clear the options array and the <select> in your fetch routine before you add it to options and before you build the options...


     fetch(url)
         .then((res) => res.json())
         .then((data) => {
              options = []; //clear options array
              $("#node-input-options").empty(); //clear the select
              //add data to options array & option list
              data.forEach((item) =>
                  let value = item.name;
                  let text = item.name;
                  options.push({ v: value, t: text, });
                  $("#node-input-options").append(
                    $("<option></option>").attr("value", value).text(text)
                  );
              );
         });


but as

1 Like

in addition to this ill write my question here so i dont make a new topic.

if(msg.payload.name === options) {
                        msg.payload = msg.payload.value;
                        node.send(msg)
                    }

This is my code with what happens when we select the option. I think u dont need any other code to fix this.
The problem is that my options are now like this

option1 = SystemCommandRun
option2 = LeadPumpSel
option3 = DptPressure

and if i select lets say option 2 , when i reopen the node the selected option that is displayed will always be option1 but the value will be from whichever i selected. You probably wont understand a word im saying..

EDIT: Its probably because my fetch function calls oneditprepare so it repopulates the dropdown everytime i reopen the node. Is there any way to get around this?

not really but i guess you want this #node-input-options to have the previous selection when the user re-opens the editor?

As I have said in other posts, you need to persist the selection in a node.propertyXXX upon oneditsave then in the oneditprepare function, when you do the fetch & populate the dropdown, use the persisted node.propertyXXX value to re-select the item,

See a full explanation here

So for example...

              data.forEach((item) =>
                  let value = item.name;
                  let text = item.name;
                  options.push({ v: value, t: text, });
                  $("#node-input-options").append(
                    $("<option></option>").attr("value", value).text(text)
                  );
                  if(value == node.selectedValue) $('#node-input-options').attr('selected','selected');  //<<<<<
              );
  • node.selectedValue is something you need to set when the select is changed.
  • that means you need to have an $("#node-input-options").on("change", function(){ ...}
  • and you need to add selectedValue to the defaults object

Yes. I explained how to fix this 4 days ago, but you never responded.

Ok i have made that work using ur explanation. Now im wondering why cant i use fetch function inside js file of the node. It says fetch is not defined