I made a custom node that alows me to select items in dropdown and add its value to the ul.
I want to make sure that when i add the value to the dropdown list , the value stays even after closing the node .
If you want something that is edited in the edit dialog of your node to be avaiable later, you need to persist the values in the "Node properties". This is described in the Creating your first node documentation.
Look at this detailed post #16 i did for another user - it is very similar and covers everything you need to know in persisting your choices. (it doesnt cover rebuilding the form upon oneditprepare but thats a problem for later)
I made a button that on click handles a function. The function should be to create li for every option I select in select tag. How do I create the li with innerHTML as text from option selected?.
console.log(selectTag.options[0].innerText); ==> This gives back the inner text of 1.
How do I take the inner text based on the option i click?
If i click on 2nd option i want its innerText.
EDIT: The problem is not to create li, i made that work. The problem is i want only the selected options inner text
Hi Jake, this is a basic JQuery or JS question with over 1 million answers to "how to get text of li in javascript" on google.
let me google that for you...
var text = $('.some-selector').text();
here is a tip to help you help your self.
- put the keywork
debuggerin your code where you do this work. - save edits, restart node-red, refresh browser
- open devtools (F12)
- code execution will stop at the keyword debugger when it hits it
- while execution is stopped in the chrome debugger, use the console and try out some commands until you get what you need working.
- copy what you get working into your code
- go back to step 1
No no 
i know that.Thats how i made lots of things work. I even managed to make this work. The problem i had is that my function was in a loop
Thats why i couldnt reach every value.
And my answer doesnt really change.
Step through the loop (F10) and use the console & try various commands untill you get the selected items text.
Honestly, this is not a node-red issue - this is a fairly basic JS question with many many answers out on the internet.
1 Like
1 More question. I can now add to li every time i select an option. But i cant if my select tag has multiple selection. Lets say i want to add Pump2Runing and Pump1Runing i need to press on the one then hold ctrl + click on the other. If i do that and then click on the button that creates li with selected option text value it only creates 1 li with the text of the last pressed. Any idea how to make 2 li if i select 2 options?
- get the selected items by using a
selector(the example below uses#cars option:selected) - Loop through the selected items.
- then for each item that is in the "selectedItems" do whatever you need to do.
Again, basic JS stuff (not node-red)
Example...
I know this. But how to make the li (list item) for each selected
<ul>
<li>
I want to create li for everyselected.
</li>
</ul>
Jake. Search the internet. "jQuery add li to ul"
@jake123 a very common problem we have here is you say 'it doesn't work' but you do not explain in what way it doesn't work for you. You show us some code and you assume that we know what you are trying to do and that we will just know what is wrong.
Here you've linked to some html/javascript code. You say "look at the problem I get" - but there's nothing on that link to tell us what the problem is. You tell us to ignore the javascript - when this whole exercise is about getting the javascript right.
Looking at the Javascript, which you tell us to ignore, I can see it loops over the list of selected items, builds up a string with each of the selected items in and then prints it to the console.
So instead of building up a string, in each iteration of the loop you should create a <li> element and append it to your list. You can use vanilla javascript to do that if you want, or with jQuery it would be something like:
$('<li>').text(this.innerText).appendTo("#my-list");
assuming the <ul> you want to append to has an id of my-list.
2 Likes
$("#b1").on("click", function() {
var selectedItems = $("#cars option:selected");
let list = $(".list");
list.empty();
selectedItems.each(function(i,el) {
var text = $(el).text();
var val = $(el).val();
var li = $("<li>").text(text).val(val).attr('title', val);
console.log(text);
list.append(li);
});
});
I get it. I'll try to be more clear with what i have the problem and I will try to explain myself better.
Thank you sir!
By the way, what is the purpose of the debugger in your code? Im seeing this for the first time
Hello, i have 1 more question. If i put the fetch on button click. Then the fetch wouldnt be called everytime i open the node. And that way the dynamic option list should be visible for as long as i dont press on the button to fetch the data again? Am i right or?
That is to have the debugger pause at that point then you can step debug and inspect variables. Infinitely more useful than console.log.
Yes, correct. Move the fetch code to on click of button inside your oneditprepare and it will only operate when clicked.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
