How can jquery be used within NR/uibuilder? This is necessary to migrate an existing project with intensive use of jquery.
Yes, there is a uibuilder example for using jquery, but unfortunately it runs into an error:
Uncaught ReferenceError: $ is not defined at index.js:24:1
index.js has this:
#23 // When JQuery is ready, update
#24 $(document).ready(function () {
Also note, beside the the template files index.(html|js|css) there is only:
<ip>:1880/jp/uibuilder/vendor with socket.io, build/esm, and node_modules.
My installation has a jquery already:
.node-red/node_modules/jquery
Would it be possible to reference that with uibuilder?
Hello .. can you share your index.html to see how you loaded the Libraries ?
The index.html is 100% of the example
with copy/paste from inside the uibuilder files.
Also note the example is running with replacing one like:
<!-- --- Vendor Libraries - Load in the right order --- -->
<!-- <script src="../uibuilder/vendor/jquery/dist/jquery.min.js"></script> -->
<script src="./jquery-3.6.0.min.js"></script>
and of course the jquery file is installed under src/ (as with the other index.( ..) files.
do you have the jquery library installed in the Libraries section of your uibuilder node ?
so it will be served under /vendor
and then load it in code (index.html)
<!-- --- Vendor Libraries - Load in the right order --- -->
<script src="../uibuilder/vendor/jquery/dist/jquery.min.js"></script>
Not loaded yet, forgive me for not noticing that this is an explicit requirement.
But can you give the required loading statement, please?
possibly its not mentioned in this older jquery example in the wiki because
if i remember correctly (i could be wrong) in previous uibuilder versions some libraries like jquery, vue 2, bootstrap-vue were preloaded in the Libraries section so no additional installation was needed. now you need to install them
Ha, well isn't that typical! Yours is the first request for jQuery in ages and I just removed the jQuery example from the examples for uibuilder v6.1 because it was out of date. The WIKI entry undoubtedly also needs updating.
This is a bare-bones example for uibuilder v6.1
!! Oops - too quick for my own good - this is an updated example that actually works properly!
index.html
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../uibuilder/images/node-blue.ico">
<title>jQuery Example - Node-RED uibuilder</title>
<meta name="description" content="Node-RED uibuilder - jQuery Example">
<!-- Your own CSS (defaults to loading uibuilders css)-->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
<script defer src="../uibuilder/vendor/jquery/dist/jquery.min.js"></script>
<script defer src="../uibuilder/uibuilder.iife.min.js"></script>
<script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
<!-- #endregion -->
</head><body class="uib">
<h1 class="with-subtitle">jQuery Example</h1>
<div role="doc-subtitle">Using the uibuilder IIFE library.</div>
<div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>
</body></html>
index.js
/** The simplest use of uibuilder client library
* See the docs if the client doesn't start on its own.
*/
$(document).ready(function () {
// Listen for incoming messages from Node-RED and action
uibuilder.onChange('msg', (msg) => {
console.log('msg received', msg)
// do stuff with the incoming msg
$('#more').text(msg.payload)
})
})
And to round it off, an example flow:
[{"id":"ef2c6bdb83f45e40","type":"inject","z":"ff9704678e3a4b61","name":"Msg","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"msg-from-nr","payload":"A message from Node-RED","payloadType":"str","x":230,"y":760,"wires":[["0e38f1543880aa12"]]},{"id":"f8176cc4d8409322","type":"debug","z":"ff9704678e3a4b61","name":"std msg output","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":735,"y":740,"wires":[],"l":false},{"id":"174c8a1a9edc3178","type":"debug","z":"ff9704678e3a4b61","name":"ctrl msg output","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":735,"y":800,"wires":[],"l":false},{"id":"0e38f1543880aa12","type":"uibuilder","z":"ff9704678e3a4b61","name":"","topic":"","url":"uib-jquery-example","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":true,"sourceFolder":"src","deployedVersion":"6.2.0-dev","showMsgUib":true,"credentials":{},"x":580,"y":760,"wires":[["f8176cc4d8409322"],["174c8a1a9edc3178"]]},{"id":"29c3f512d2ec644d","type":"inject","z":"ff9704678e3a4b61","name":"Reload","props":[{"p":"_ui","v":"{\"method\":\"reload\"}","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"reload","x":230,"y":880,"wires":[["0e38f1543880aa12"]],"info":"Sends a pre-formatted msg to the front-end that\r\ncauses the page to reload itself."},{"id":"1d65510c9840813a","type":"inject","z":"ff9704678e3a4b61","name":"Toggle Visible Msgs","props":[{"p":"_uib","v":"{\"command\":\"showMsg\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":270,"y":800,"wires":[["0e38f1543880aa12"]]},{"id":"84eb0817119a73dc","type":"inject","z":"ff9704678e3a4b61","name":"Toggle Visible Status","props":[{"p":"_uib","v":"{\"command\":\"showStatus\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":270,"y":840,"wires":[["0e38f1543880aa12"]]}]
And the WIKI entry now updated to match this example.
Thanks for rework.
I'm sure it's described somewhere how to add the jquery as said on the libraries tab.
Maybe you are kind enough to add it to the example (and/or this chat) ...I am lost with it atm 
OK, missed that. It is remarkably simple 
On the libraries tab, click the small "Add" button and type in "jquery" (without the quotes) into the box
Then click the install button. There is a small animation next to the add button when it is installing. The Node-RED log gives a little information. After a few seconds, the animation stops and you are ready to go.
The library manager attempts to give you a clue as to what URL to put in your script link but just bear in mind that it can't always work it out because it relies on library authors to code up their package.json files correctly. For jQuery for example, it lists jquery.js which will work but it is better to use jquery.min.js to get the smaller production version.
OK, got it!
Now it's time to see how that works out with migrating my previous project
Thanks!
1 Like
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
