Use jquery in template node (not datshboard)

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 :

[{"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></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></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').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').attr('data-page') > 3){\n      $('.pagination li:gt(0)').hide();\n      $('.pagination [data-page=\"next\"]').show();\n      for( let i = ( parseInt($('.pagination').attr('data-page'))  -2 )  ; i <= ( parseInt($('.pagination').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"]]}]

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.

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:

configure settings.js file


try to view the file in the browser


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.

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

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