# Use jquery in template node (not datshboard)

**URL:** <https://discourse.nodered.org/t/use-jquery-in-template-node-not-datshboard/62564>\
**Category:** General\
**Created:** [12 May 2022 16:17 UTC](https://discourse.nodered.org/t/use-jquery-in-template-node-not-datshboard/62564 "2022-05-12T16:17:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Amt96](https://avatars.discourse-cdn.com/v4/letter/a/cab0a1/32.png) [@Amt96](https://discourse.nodered.org/u/Amt96)\
**Post date:** [12 May 2022 16:17 UTC](https://discourse.nodered.org/t/use-jquery-in-template-node-not-datshboard/62564/1 "2022-05-12T16:17:30Z")

</div>

I am new to node red and I am creating a web page with the http in node and I want to be able to add jquery inside the javascript of the page

example :

```auto
[{"id":"9cab65224c5ade8d","type":"template","z":"e33597892d562b22","name":"CSS","field":"ejemplo.css","fieldType":"msg","format":"css","syntax":"mustache","template":"body{\n\n background-color: #eee; \n}\n\ntable th , table td{\n text-align: center;\n}\n\ntable tr:nth-child(even){\n background-color: #BEF2F5\n}\n\n.pagination li:hover{\n cursor: pointer;\n}\n table tbody tr {\n display: none;\n }","output":"str","x":630,"y":2080,"wires":[["b6e5db3265d2dff1"]]},{"id":"b6e5db3265d2dff1","type":"template","z":"e33597892d562b22","name":"HTML","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<html>\n <head>\n <meta charset=\"UTF_8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <script src=\"./home/pi/JQuery/JQuery.js\"></script>\n <title>ARC</title>\n <style>{{{ejemplo.css}}}</style>\n </head>\n <body>\n \n <div class=\"container\">\n <h2>Select Number Of Rows</h2>\n <div class=\"form-group\"> <!-- Show Numbers Of Rows -->\n <select class =\"form-control\" name=\"state\" id=\"maxRows\">\n <option value=\"5000\">Show ALL Rows</option>\n <option value=\"5\">5</option>\n <option value=\"10\">10</option>\n <option value=\"15\">15</option>\n <option value=\"20\">20</option>\n <option value=\"50\">50</option>\n <option value=\"70\">70</option>\n <option value=\"100\">100</option>\n </select>\n \n </div>\n\n<table class=\"table table-striped table-class\" id= \"table-id\">\n \n <thead>\n <tr>\n <th>Name</th>\n <th>Email</th>\n <th>Phone</th>\n <th>Date</th>\n </tr>\n \n </thead>\n \n <tbody>\n\n <tr>\n <td>Arthur Blackwell</td>\n <td>sodales.elit.erat@vehiculaetrutrum.ca</td>\n <td>1-837-635-8180</td>\n <td>Mar 21, 2017</td>\n </tr>\n <tr>\n <td>Ivan Vasquez</td>\n <td>eu.lacus.Quisque@Nunc.org</td>\n <td>1-626-851-7695</td>\n <td>Feb 23, 2016</td>\n </tr>\n </tbody>\n\n</table>\n\n<!-- Start Pagination -->\n <div class='pagination-container' >\n <nav>\n <ul class=\"pagination\">\n \n <li data-page=\"prev\" >\n <span> < <span class=\"sr-only\">(current)</span></span>\n </li>\n <!-- Here the JS Function Will Add the Rows -->\n <li data-page=\"next\" id=\"prev\">\n <span> > <span class=\"sr-only\">(current)</span></span>\n </li>\n </ul>\n </nav>\n </div>\n\n</div>\n <script>{{{ejemplo.js}}}</script>\n </body>\n</html>","output":"str","x":770,"y":2080,"wires":[["250e32cf53f608ad"]]},{"id":"6afd6eb39599afb5","type":"http in","z":"e33597892d562b22","name":"","url":"ejemploo","method":"get","upload":false,"swaggerDoc":"","x":240,"y":2080,"wires":[["2590a5358d60e4b4"]]},{"id":"250e32cf53f608ad","type":"http response","z":"e33597892d562b22","name":"","statusCode":"","headers":{},"x":950,"y":2080,"wires":[]},{"id":"2590a5358d60e4b4","type":"template","z":"e33597892d562b22","name":"JAVASCRIPT","field":"ejemplo.js","fieldType":"msg","format":"javascript","syntax":"mustache","template":" getPagination('#table-id');\n //getPagination('.table-class');\n //getPagination('table');\n\n /* PAGINATION \n - on change max rows select options fade out all rows gt option value mx = 5\n - append pagination list as per numbers of rows / max rows option (20row/5= 4pages )\n - each pagination li on click -> fade out all tr gt max rows * li num and (5*pagenum 2 = 10 rows)\n - fade out all tr lt max rows * li num - max rows ((5*pagenum 2 = 10) - 5)\n - fade in all tr between (maxRows*PageNum) and (maxRows*pageNum)- MaxRows \n */\n \n\nfunction getPagination(table) {\n var lastPage = 1;\n\n $('#maxRows')\n .on('change', function(evt) {\n //$('.paginationprev').html(''); // reset pagination\n\n lastPage = 1;\n $('.pagination')\n .find('li')\n .slice(1, -1)\n .remove();\n var trnum = 0; // reset tr counter\n var maxRows = parseInt($(this).val()); // get Max Rows from select option\n\n if (maxRows == 5000) {\n $('.pagination').hide();\n } else {\n $('.pagination').show();\n }\n\n var totalRows = $(table + ' tbody tr').length; // numbers of rows\n $(table + ' tr:gt(0)').each(function() {\n // each TR in table and not the header\n trnum++; // Start Counter\n if (trnum > maxRows) {\n // if tr number gt maxRows\n\n $(this).hide(); // fade it out\n }\n if (trnum <= maxRows) {\n $(this).show();\n } // else fade in Important in case if it ..\n }); // was fade out to fade it in\n if (totalRows > maxRows) {\n // if tr total rows gt max rows option\n var pagenum = Math.ceil(totalRows / maxRows); // ceil total(rows/maxrows) to get ..\n // numbers of pages\n for (var i = 1; i <= pagenum; ) {\n // for each page append pagination li\n $('.pagination #prev')\n .before(\n '<li data-page=\"' +\n i +\n '\">\\\n <span>' +\n i++ +\n '<span class=\"sr-only\">(current)</span></span>\\\n </li>'\n )\n .show();\n } // end for i\n } // end if row count > max rows\n $('.pagination [data-page=\"1\"]').addClass('active'); // add active class to the first li\n $('.pagination li').on('click', function(evt) {\n // on click each page\n evt.stopImmediatePropagation();\n evt.preventDefault();\n var pageNum = $(this).attr('data-page'); // get it's number\n\n var maxRows = parseInt($('#maxRows').val()); // get Max Rows from select option\n\n if (pageNum == 'prev') {\n if (lastPage == 1) {\n return;\n }\n pageNum = --lastPage;\n }\n if (pageNum == 'next') {\n if (lastPage == $('.pagination li').length - 2) {\n return;\n }\n pageNum = ++lastPage;\n }\n\n lastPage = pageNum;\n var trIndex = 0; // reset tr counter\n $('.pagination li').removeClass('active'); // remove active class from all li\n $('.pagination [data-page=\"' + lastPage + '\"]').addClass('active'); // add active class to the clicked\n // $(this).addClass('active'); // add active class to the clicked\n limitPagging();\n $(table + ' tr:gt(0)').each(function() {\n // each tr in table not the header\n trIndex++; // tr index counter\n // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out\n if (\n trIndex > maxRows * pageNum ||\n trIndex <= maxRows * pageNum - maxRows\n ) {\n $(this).hide();\n } else {\n $(this).show();\n } //else fade in\n }); // end of for each tr in table\n }); // end of on click pagination list\n limitPagging();\n })\n .val(5)\n .change();\n\n // end of on select change\n\n // END OF PAGINATION\n}\n\nfunction limitPagging(){\n // alert($('.pagination li').length)\n\n if($('.pagination li').length > 7 ){\n if( $('.pagination li.active').attr('data-page') <= 3 ){\n $('.pagination li:gt(5)').hide();\n $('.pagination li:lt(5)').show();\n $('.pagination [data-page=\"next\"]').show();\n }if ($('.pagination li.active').attr('data-page') > 3){\n $('.pagination li:gt(0)').hide();\n $('.pagination [data-page=\"next\"]').show();\n for( let i = ( parseInt($('.pagination li.active').attr('data-page')) -2 ) ; i <= ( parseInt($('.pagination li.active').attr('data-page')) + 2 ) ; i++ ){\n $('.pagination [data-page=\"'+i+'\"]').show();\n\n }\n\n }\n }\n}\n\n$(function() {\n // Just to append id number for each row\n $('table tr:eq(0)').prepend('<th> ID </th>');\n\n var id = 0;\n\n $('table tr:gt(0)').each(function() {\n id++;\n $(this).prepend('<td>' + id + '</td>');\n });\n});","output":"str","x":460,"y":2080,"wires":[["9cab65224c5ade8d"]]}]

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [12 May 2022 22:09 UTC](https://discourse.nodered.org/t/use-jquery-in-template-node-not-datshboard/62564/2 "2022-05-12T22:09:34Z")

</div>

In order to do that, you will need to load the jQuery library as part of the template as well.

In your html `<script src="./home/pi/JQuery/JQuery.js"></script>` needs to point to a valid copy of the library. What you have there is a reference to a filing system path and not to a URL.

You can configure a static folder in settings.js and put the jQuery library in there. After restarting node-red, it would be available at something like `http://serveraddress:1880/jquery/jquery.js` - you would need to check for the exact path.

---

<div class="post-metadata">

**Author:** ![Amt96](https://avatars.discourse-cdn.com/v4/letter/a/cab0a1/32.png) [@Amt96](https://discourse.nodered.org/u/Amt96)\
**Post date:** [13 May 2022 15:25 UTC](https://discourse.nodered.org/t/use-jquery-in-template-node-not-datshboard/62564/3 "2022-05-13T15:25:46Z")

</div>

Hello, thank you very much for your answer. I've been trying to set up a static folder but when I try to view what's in that folder in the browser I get "cannot get home/pi/JQuery/123.png

I created a folder:

 ![folder](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/b/2be4edfed8e76b43797105de5512e3e1bbf7e90d.png)

configure settings.js file

![cmd](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/e/6ed5aec9ed8caca3b37db5e2e5d64c67be01100c.png)

try to view the file in the browser

![browser](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/a/9a03c825215df7048ca6c4a31e4810ffaf9dcdc0.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [13 May 2022 15:42 UTC](https://discourse.nodered.org/t/use-jquery-in-template-node-not-datshboard/62564/4 "2022-05-13T15:42:28Z")

</div>

Your URL is wrong.

If your settings.js file contains `httpStatic: '/home/pi/JQuery/',`  
And you have restarted Node-red after editing it,  
And that directory contains 123.png:  
Then you should be able to see the image at `<IP Address>:1880/123.png`

I don't know if `cproject.arc` rather than IP address makes a difference.

---

<div class="post-metadata">

**Author:** ![Amt96](https://avatars.discourse-cdn.com/v4/letter/a/cab0a1/32.png) [@Amt96](https://discourse.nodered.org/u/Amt96)\
**Post date:** [13 May 2022 15:57 UTC](https://discourse.nodered.org/t/use-jquery-in-template-node-not-datshboard/62564/5 "2022-05-13T15:57:30Z")

</div>

It worked, thank you very much... I was typing the url wrong.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [27 May 2022 15:58 UTC](https://discourse.nodered.org/t/use-jquery-in-template-node-not-datshboard/62564/6 "2022-05-27T15:58:26Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.