# Uibuilder to use jquery (example fails?)
**URL:** https://discourse.nodered.org/t/uibuilder-to-use-jquery-example-fails/76230
**Category:** General
**Tags:** uibuilder
**Created:** [7 March 2023 13:23 UTC](https://discourse.nodered.org/t/uibuilder-to-use-jquery-example-fails/76230 "2023-03-07T13:23:01Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@gNeandr](https://discourse.nodered.org/u/gNeandr)
#### Post date: [7 March 2023 13:23 UTC](https://discourse.nodered.org/t/uibuilder-to-use-jquery-example-fails/76230/1 "2023-03-07T13:23:01Z")
How can jquery be used within NR/uibuilder? This is necessary to migrate an existing project with intensive use of jquery.
---
### Author:  [@gNeandr](https://discourse.nodered.org/u/gNeandr)
#### Post date: [7 March 2023 16:54 UTC](https://discourse.nodered.org/t/uibuilder-to-use-jquery-example-fails/76230/2 "2023-03-07T16:54:41Z")
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:
```auto
#23 // When JQuery is ready, update
#24 $(document).ready(function () {
```
Also note, beside the the template files index.(html|js|css) there is only:
`: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?
---
### Author:  [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [7 March 2023 18:09 UTC](https://discourse.nodered.org/t/uibuilder-to-use-jquery-example-fails/76230/3 "2023-03-07T18:09:59Z")
Hello .. can you share your `index.html` to see how you loaded the Libraries ?
---
### Author:  [@gNeandr](https://discourse.nodered.org/u/gNeandr)
#### Post date: [7 March 2023 19:00 UTC](https://discourse.nodered.org/t/uibuilder-to-use-jquery-example-fails/76230/4 "2023-03-07T19:00:06Z")
The index.html is 100% of the example
> **[Example: JQuery](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Example:-JQuery)**
>
> Easily create data-driven web UI's for Node-RED using any (or no) front-end framework. - TotallyInformation/node-red-contrib-uibuilder
with copy/paste from inside the uibuilder files.
Also note the example is running with replacing one like:
```auto
```
```
```
and of course the jquery file is installed under src/ (as with the other index.( ..) files.
---
### Author:  [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [7 March 2023 19:04 UTC](https://discourse.nodered.org/t/uibuilder-to-use-jquery-example-fails/76230/5 "2023-03-07T19:04:38Z")
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)
```auto
```
---
### Author:  [@gNeandr](https://discourse.nodered.org/u/gNeandr)
#### Post date: [7 March 2023 19:10 UTC](https://discourse.nodered.org/t/uibuilder-to-use-jquery-example-fails/76230/6 "2023-03-07T19:10:29Z")
Not loaded yet, forgive me for not noticing that this is an explicit requirement.
But can you give the required loading statement, please?
---
### Author:  [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [7 March 2023 19:22 UTC](https://discourse.nodered.org/t/uibuilder-to-use-jquery-example-fails/76230/7 "2023-03-07T19:22:45Z")
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
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [7 March 2023 19:31 UTC](https://discourse.nodered.org/t/uibuilder-to-use-jquery-example-fails/76230/8 "2023-03-07T19:31:16Z")
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
```auto
jQuery Example - Node-RED uibuilder
jQuery Example
Using the uibuilder IIFE library.
```
index.js
```auto
/** 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:
```auto
[{"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"]]}]
```
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [7 March 2023 20:00 UTC](https://discourse.nodered.org/t/uibuilder-to-use-jquery-example-fails/76230/9 "2023-03-07T20:00:06Z")
And the WIKI entry now updated to match this example.
---
### Author:  [@gNeandr](https://discourse.nodered.org/u/gNeandr)
#### Post date: [7 March 2023 21:18 UTC](https://discourse.nodered.org/t/uibuilder-to-use-jquery-example-fails/76230/10 "2023-03-07T21:18:49Z")
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 🤕
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [7 March 2023 21:34 UTC](https://discourse.nodered.org/t/uibuilder-to-use-jquery-example-fails/76230/11 "2023-03-07T21:34:59Z")
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.
---
### Author:  [@gNeandr](https://discourse.nodered.org/u/gNeandr)
#### Post date: [7 March 2023 21:46 UTC](https://discourse.nodered.org/t/uibuilder-to-use-jquery-example-fails/76230/12 "2023-03-07T21:46:09Z")
👍 😉
OK, got it!
Now it's time to see how that works out with migrating my previous project
_ **Thanks!** _
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [6 May 2023 21:46 UTC](https://discourse.nodered.org/t/uibuilder-to-use-jquery-example-fails/76230/13 "2023-05-06T21:46:32Z")
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.