# Dashboard 2.0 Template node issue

**URL:** <https://discourse.nodered.org/t/dashboard-2-0-template-node-issue/94182>\
**Category:** General\
**Created:** [26 December 2024 16:22 UTC](https://discourse.nodered.org/t/dashboard-2-0-template-node-issue/94182 "2024-12-26T16:22:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![saraltech](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@saraltech](https://discourse.nodered.org/u/saraltech)\
**Post date:** [26 December 2024 16:22 UTC](https://discourse.nodered.org/t/dashboard-2-0-template-node-issue/94182/1 "2024-12-26T16:22:27Z")

</div>

I am using dashboard 2.0 template node. It does not call the GET request. When I use the Dashboard 1 template node, it works fine.  
Please guide what is to be changed for Dashboard 2.0 template node.

```auto
[
    {
        "id": "4d7e54d7335d0e3b",
        "type": "http in",
        "z": "4d2fa2d4e0dc8a8c",
        "name": "",
        "url": "/data123",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 230,
        "y": 140,
        "wires": [
            [
                "6a7e466e602d60ad",
                "bdc5bd4eab0a099f"
            ]
        ]
    },
    {
        "id": "6a7e466e602d60ad",
        "type": "function",
        "z": "4d2fa2d4e0dc8a8c",
        "name": "function 27",
        "func": "msg.payload = [\n { \"batteryNumber\": \"12345\", \"irValue\": \"10\", \"edit\": true },\n { \"batteryNumber\": \"67890\", \"irValue\": \"15\", \"edit\": false }\n]\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 410,
        "y": 140,
        "wires": [
            [
                "a3e79fd95413bfd4"
            ]
        ]
    },
    {
        "id": "a3e79fd95413bfd4",
        "type": "http response",
        "z": "4d2fa2d4e0dc8a8c",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 610,
        "y": 140,
        "wires": []
    },
    {
        "id": "95a4350c62c4a833",
        "type": "http in",
        "z": "4d2fa2d4e0dc8a8c",
        "name": "",
        "url": "/dataoutput",
        "method": "put",
        "upload": false,
        "swaggerDoc": "",
        "x": 240,
        "y": 260,
        "wires": [
            [
                "8cf5ed8fa4fde60b",
                "3acad7cc4c78c508"
            ]
        ]
    },
    {
        "id": "7fa0a3da9d11286b",
        "type": "http response",
        "z": "4d2fa2d4e0dc8a8c",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 630,
        "y": 260,
        "wires": []
    },
    {
        "id": "8cf5ed8fa4fde60b",
        "type": "function",
        "z": "4d2fa2d4e0dc8a8c",
        "name": "function 28",
        "func": "msg.payload = {\n status: 400\n}\n\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 450,
        "y": 260,
        "wires": [
            [
                "7fa0a3da9d11286b"
            ]
        ]
    },
    {
        "id": "3acad7cc4c78c508",
        "type": "debug",
        "z": "4d2fa2d4e0dc8a8c",
        "name": "debug 18",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 440,
        "y": 360,
        "wires": []
    },
    {
        "id": "bdc5bd4eab0a099f",
        "type": "debug",
        "z": "4d2fa2d4e0dc8a8c",
        "name": "debug 19",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 380,
        "y": 80,
        "wires": []
    },
    {
        "id": "e5f771ca593519f0",
        "type": "ui-template",
        "z": "4d2fa2d4e0dc8a8c",
        "group": "7c3659d73edd9b9a",
        "page": "",
        "ui": "",
        "name": "",
        "order": 1,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Battery Data Table</title>\n <!-- Bootstrap CSS -->\n <link href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css\" rel=\"stylesheet\">\n <script src=\"https://code.jquery.com/jquery-3.5.1.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js\"></script>\n</head>\n\n<body>\n <div class=\"container mt-4\">\n <h3>Battery IR Values</h3>\n <table class=\"table table-bordered\" id=\"batteryTable\">\n <thead>\n <tr>\n <th>ID</th>\n <th>Battery Number</th>\n <th>IR Value</th>\n <th>Save</th>\n </tr>\n </thead>\n <tbody>\n <!-- Dynamic Rows will be inserted here -->\n </tbody>\n </table>\n </div>\n\n <script>\n $(document).ready(function () {\n // Fetch data from the GET request\n $.get(\"http://localhost:1880/data123\", function (data) {\n // Assume data is an array of objects with 'batteryNumber', 'irValue', and 'edit' flags\n let tableBody = $('#batteryTable tbody');\n data.forEach((item, index) => {\n let row = $('<tr>');\n let idCell = $('<td>').text(index + 1); // Auto-generated ID\n let batteryCell = $('<td>').text(item.batteryNumber); // Battery number from the data\n let irCell = $('<td>');\n\n // IR value input or text\n let irInput = $('<input>').attr('type', 'number').attr('class', 'form-control');\n irInput.val(item.irValue); // Populate IR value\n\n // Make IR value editable only if 'edit' flag is true\n if (!item.edit) {\n irInput.prop('disabled', true); // Disable if not editable\n }\n irCell.append(irInput);\n\n let saveCell = $('<td>');\n let saveButton = $('<button>').attr('type', 'button').addClass('btn btn-primary');\n saveButton.text('Save');\n\n // Disable save button if IR value is not editable\n saveButton.prop('disabled', !item.edit);\n\n saveButton.click(function () {\n // On save, send a PUT request with updated IR value\n let updatedIRValue = irInput.val();\n $.ajax({\n url: 'http://localhost:1880/dataoutput',\n type: 'PUT',\n data: JSON.stringify({\n batteryNumber: item.batteryNumber,\n irValue: updatedIRValue\n }),\n contentType: 'application/json',\n success: function (response) {\n alert('Data saved successfully!');\n },\n error: function () {\n alert('Error saving data.');\n }\n });\n });\n\n saveCell.append(saveButton);\n\n row.append(idCell, batteryCell, irCell, saveCell);\n tableBody.append(row);\n });\n });\n });\n </script>\n</body>\n\n</html>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 260,
        "y": 460,
        "wires": [
            []
        ]
    },
    {
        "id": "f1dcf23b74de409d",
        "type": "ui_template",
        "z": "4d2fa2d4e0dc8a8c",
        "group": "5c4edf437a5c8172",
        "name": "",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Battery Data Table</title>\n <!-- Bootstrap CSS -->\n <link href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css\" rel=\"stylesheet\">\n <script src=\"https://code.jquery.com/jquery-3.5.1.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js\"></script>\n</head>\n\n<body>\n <div class=\"container mt-4\">\n <h3>Battery IR Values</h3>\n <table class=\"table table-bordered\" id=\"batteryTable\">\n <thead>\n <tr>\n <th>ID</th>\n <th>Battery Number</th>\n <th>IR Value</th>\n <th>Save</th>\n </tr>\n </thead>\n <tbody>\n <!-- Dynamic Rows will be inserted here -->\n </tbody>\n </table>\n </div>\n\n <script>\n $(document).ready(function () {\n // Fetch data from the GET request\n $.get(\"http://localhost:1880/data123\", function (data) {\n // Assume data is an array of objects with 'batteryNumber', 'irValue', and 'edit' flags\n let tableBody = $('#batteryTable tbody');\n data.forEach((item, index) => {\n let row = $('<tr>');\n let idCell = $('<td>').text(index + 1); // Auto-generated ID\n let batteryCell = $('<td>').text(item.batteryNumber); // Battery number from the data\n let irCell = $('<td>');\n\n // IR value input or text\n let irInput = $('<input>').attr('type', 'number').attr('class', 'form-control');\n irInput.val(item.irValue); // Populate IR value\n\n // Make IR value editable only if 'edit' flag is true\n if (!item.edit) {\n irInput.prop('disabled', true); // Disable if not editable\n }\n irCell.append(irInput);\n\n let saveCell = $('<td>');\n let saveButton = $('<button>').attr('type', 'button').addClass('btn btn-primary');\n saveButton.text('Save');\n\n // Disable save button if IR value is not editable\n saveButton.prop('disabled', !item.edit);\n\n saveButton.click(function () {\n // On save, send a PUT request with updated IR value\n let updatedIRValue = irInput.val();\n $.ajax({\n url: 'http://localhost:1880/dataoutput',\n type: 'PUT',\n data: JSON.stringify({\n batteryNumber: item.batteryNumber,\n irValue: updatedIRValue\n }),\n contentType: 'application/json',\n success: function (response) {\n alert('Data saved successfully!');\n },\n error: function () {\n alert('Error saving data.');\n }\n });\n });\n\n saveCell.append(saveButton);\n\n row.append(idCell, batteryCell, irCell, saveCell);\n tableBody.append(row);\n });\n });\n });\n </script>\n</body>\n\n</html>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 560,
        "y": 460,
        "wires": [
            []
        ]
    },
    {
        "id": "7c3659d73edd9b9a",
        "type": "ui-group",
        "name": "Record Data",
        "page": "8f3d6fa52275f378",
        "width": "12",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "5c4edf437a5c8172",
        "type": "ui_group",
        "name": "Default",
        "tab": "230e6722c2ba487b",
        "order": 1,
        "disp": true,
        "width": 30,
        "collapse": false,
        "className": ""
    },
    {
        "id": "8f3d6fa52275f378",
        "type": "ui-page",
        "name": "Measurements",
        "ui": "8af0eba80b85dcfe",
        "path": "/measurements",
        "icon": "home",
        "layout": "grid",
        "theme": "0d92c765bfad87e6",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 7,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "230e6722c2ba487b",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    },
    {
        "id": "8af0eba80b85dcfe",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "0d92c765bfad87e6",
        "type": "ui-theme",
        "name": "Basic Blue Theme",
        "colors": {
            "surface": "#4d58ff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 December 2024 16:47 UTC](https://discourse.nodered.org/t/dashboard-2-0-template-node-issue/94182/2 "2024-12-26T16:47:10Z")

</div>

First, you should not have head and body elements inside the template.

Secondly, there is no need for jQuery to send messages to node-red (you can simply call `send` and use wires from the output of the template). Which then of course means you don't need the http-in nodes.

I suggest you try reading the docs: [Getting Started | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/getting-started.html) and search the tag #dashboard-2

---

<div class="post-metadata">

**Author:** ![saraltech](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@saraltech](https://discourse.nodered.org/u/saraltech)\
**Post date:** [28 December 2024 07:25 UTC](https://discourse.nodered.org/t/dashboard-2-0-template-node-issue/94182/3 "2024-12-28T07:25:49Z")

</div>

first: how to add head and body elements if these are not allowed inside the template? Can you please share a basic example? Further I tried to go through the documentation. All examples seems to be only for Vue, so could not get much help.  
second: I will need both applications to run on different servers, thats why I need jquery for data in / out.

---

<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:** [28 March 2025 07:26 UTC](https://discourse.nodered.org/t/dashboard-2-0-template-node-issue/94182/4 "2025-03-28T07:26:34Z")

</div>

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