JavaScript work in added blocks via uib-element #220
-
|
Good afternoon, I'm trying to figure out one question, since I'm new to programming, I don't know how to solve it. I am building a web page with blocks of html code using uib-element, I can form a page with three, four or more blocks. But when a block of code needs to perform a dynamic change, such as a slider that executes a JavaScript file, I can't get it to work dynamically. Please tell me where I can find out how to make JavaScript work in those blocks that were added via uib-element. Thanks in advance. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 5 replies
-
|
When the code is initially in the index.html file in which the links to the JavaScript file are written, then it works as expected, the only problem is to make it work in the newly added code through uib-element |
Beta Was this translation helpful? Give feedback.
-
|
Hi, at present, the zero-code features for user input relies on creating a form and using a button to send the form data back to Node-RED. Individual and fully dynamic inputs for So currently, create a form and use the send button to get the form data back into Node-RED.
The zero-code example in the library has a form flow. To get something more dynamic, you would need to use a generated low-code msg. For example, you could use As an example. Here is a msg.payload input to a The output from the Which probably looks a bit horrendous to begin with. But remember that HTML is hierarchical so work through each section looking for
Each of those children represents 1 input. Each input contains another
And to enable a field to dynamically send back updates, you would need to change the Which will fire the function to get the form data back to Node-RED every time the user changes the value. The You can do the changes either using a function node with JavaScript or using a change node. Use the output of the
Here is an example flow snippet that illustrates all of the above. Once you've got your head around the basics of manipulating the low-code config data, you will hopefully begin to see how you can create your own custom outputs. For example, if you want to have immediate outputs from all user inputs, you don't actually need to wrap everything in a form. |
Beta Was this translation helpful? Give feedback.
-
|
There are, of course, other ways to achieve this. You could write some front-end JavaScript in If you want an example of doing the processing in the browser though, let me know and I'll knock something up. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your quick response. I had a little different. I have code codepen html css, javascript, if I place it in index.html, index.css, index.js files, then everything works correctly for me. But I want to write the html code in the template node, and send it via uib-element type html, so that it works the same way as in the index.html file. or this code: but nothing worked. |
Beta Was this translation helpful? Give feedback.
-
|
OK, interesting. Let me have a go, I'd not actually thought of that approach. Though it should work. There is another method to do that from Node-RED as well, let me experiment. |
Beta Was this translation helpful? Give feedback.
-
|
Oops, I remembered why you can't do this the way you were hoping. It is because, while uibuilder does happily add the script tag and its content, that script is not executed because it was loaded after the page finished loading. So there is no way to be able to do this currently using the zero-code The trick being to use a change node instead of a uib-element node. You will need to know how to load the script dynamically and this can be done using uibuilder's low-code features with the following JSON - just use the change node to set the contents of {
"method": "load",
"txtScripts": [
payload
]
}Note the The load method is documented here: https://totallyinformation.github.io/node-red-contrib-uibuilder/#/client-docs/config-driven-ui?id=method-load. Just note the limitations of this approach. It will take some time for your browser to convert the text to code and execute it. This means that if, for example, you were expecting to be able to, in the same flow, follow this with something that relied on the code, you should send this and then have a small delay before sending the reliant data. Here is a very simple flow fragment: |
Beta Was this translation helpful? Give feedback.
-
|
Just checking your example code. Personally, I would leave that code in the index.css and index.js files, it is a cleaner solution over all. But it works either way. If you need to dynamically load the CSS, add another template node for just the CSS but change its output to something other than {
"method": "load",
"txtScripts": [
payload
],
"txtStyle": [
payload
]
}Again though, remember that you are late-loading the styles and so you may get a flash of unstyled content. Unless you have a real need to make the input code dynamic, it is best left in the front-end code. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much for your answer, I will study your recommendations. |
Beta Was this translation helpful? Give feedback.
Oops, I remembered why you can't do this the way you were hoping. It is because, while uibuilder does happily add the script tag and its content, that script is not executed because it was loaded after the page finished loading.
So there is no way to be able to do this currently using the zero-code
uib-elementnode. However, this is Node-RED so there are always multiple ways to achieve things and you can still do it with minimal effort. 😊The trick being to use a change node instead of a uib-element node. You will need to know how to load the script dynamically and this can be done using uibuilder's low-code features with the following JSON - just use the change node to set the contents of
…