# HTML template disappearing

**URL:** <https://discourse.nodered.org/t/html-template-disappearing/89538>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [16 July 2024 08:42 UTC](https://discourse.nodered.org/t/html-template-disappearing/89538 "2024-07-16T08:42:58Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![rawdani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rawdani/32/29966_2.png) [@rawdani](https://discourse.nodered.org/u/rawdani)\
**Post date:** [16 July 2024 08:42 UTC](https://discourse.nodered.org/t/html-template-disappearing/89538/1 "2024-07-16T08:42:59Z")

</div>

Hi,

I have a problem using the template dashboard node. I hope I can explain it clearly.

I generate the html in the template function node (using mustache) and I feed the output to the template dashboard node. I use this set up a bit everywhere in my flow.

However, I noticed this. There are times that the final html is not displayed in the page when I navigate to the page. It is totally random. I do a deploy and it is there and the next deploy it is just not there. Or, I navigate away from that page and when I navigate back the html is there. Again, totally random. If I inspect the page when the html is not there I found not even 1 line of the html code.

I can give you the code but this happens many times in different cases.

My html page use jquery and javascript too. If not mistaken, I never noticed this behavior with plain html.

Anyone having this problem? Any help would be much appreciated.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [16 July 2024 09:18 UTC](https://discourse.nodered.org/t/html-template-disappearing/89538/2 "2024-07-16T09:18:33Z")

</div>

> [@rawdani](#):
>
> I feed the output to the template dashboard node.

When do you feed it to the template? If you deploy the ui-template node then it will not display the html until it is given the html again. So if you use partial deploys this can easily happen.

---

<div class="post-metadata">

**Author:** ![rawdani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rawdani/32/29966_2.png) [@rawdani](https://discourse.nodered.org/u/rawdani)\
**Post date:** [16 July 2024 09:37 UTC](https://discourse.nodered.org/t/html-template-disappearing/89538/3 "2024-07-16T09:37:10Z")

</div>

Hi Colin,

thanks for the reply. I do not use partial deploy (at least, I don't think so). I initialize the flow at start with an inject and the template function feeds the template dashboard at start.

As said, sometimes it works perfectly: it deplois, I see the html page, it works as inteded, and then it just disappears, to appears again. I do not think is a problem of initialization. It looks to me that there is something - maybe in the code - that nodered has problem with.

Here below the code of one of the example I have problem with. I have other example in case.

```auto
[
    {
        "id": "680451a6c59fdfab",
        "type": "inject",
        "z": "db9e5b42ac35bf8b",
        "name": "",
        "props": [
            {
                "p": "areas",
                "v": "[{\"name\":\"area1\",\"water\":\"r1_oo1\",\"fire\":\"r1_oo2\",\"hv\":[\"r1_hv1\",\"r1_hv2\"],\"pr\":[\"r1_pr1\",\"r1_pr2\"],\"dw\":[\"r1_dw1\",\"r1_dw2\"]},{\"name\":\"area2\",\"water\":\"r2_oo1\",\"fire\":\"r2_oo2\",\"hv\":[\"r2_hv1\"],\"pr\":[\"r2_pr1\"]},{\"name\":\"area3\",\"water\":\"r3_oo1\",\"fire\":\"r3_oo2\",\"hv\":[\"r3_hv1\",\"r3_hv2\",\"r3_hv3\",\"r3_hv4\"],\"pr\":[\"r3_pr1\",\"r3_pr2\",\"r3_pr3\",\"r3_pr4\"]}]",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "x": 490,
        "y": 300,
        "wires": [
            [
                "6778dc619fed5a9a"
            ]
        ]
    },
    {
        "id": "6778dc619fed5a9a",
        "type": "template",
        "z": "db9e5b42ac35bf8b",
        "name": "",
        "field": "template",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<style>\n\n</style>\n\n<script>\n(function(scope){ \n\n let oo_status = {}\n\n scope.$watch('msg', function(msg) {\n // Force repaint to adjust to table height\n if (msg) {\n $(\"#root\").parent().css(\"height\",\"\");\n }\n\n // change oo status\n if (msg.sensor_type == \"oo\")\n oo_status[msg.sensor_name] = msg.payload\n\n // change color\n if (msg.sensor_name)\n $(\"#\"+msg.sensor_name).css(\"color\", msg.payload?\"green\":\"red\");\n\n });\n\n // pr: payload/state/presence\n // dw: payload/state/open\n // hv: payload/config/\n\n $(\".sensor_oo\").click(function() {\n let id=$(this).attr(\"id\");\n oo_status[id] = !oo_status[id]\n $(\"#\"+id).css(\"color\", oo_status[id]?\"green\":\"red\");\n scope.send({\n topic: \"bahf/sensor/\"+id+\"/api/raw/set/onoff/req/1234\",\n payload:oo_status[id]\n });\n console.log(oo_status)\n });\n\n})(scope);\n</script>\n\n<body>\n<table style=\"width:100%; text-align:left\">\n <tbody>\n {{#areas}}\n <tr>\n <td style=\"width:20%\" title=\"name\">\n <span style=\"margin-top: 5px;\">{{name}}</span>\n </td>\n <td style=\"width:20%\" title=\"oo\">\n {{#water}}\n <span id=\"{{water}}\" class=\"sensor_oo\"><i class=\"fa fa-shower\"></i></span>\n {{/water}}\n {{#fire}}\n <span id=\"{{fire}}\" class=\"sensor_oo\"><i class=\"fa fa-fire\"></i></span>\n {{/fire}}\n </td> \n <td style=\"width:20%\" title=\"hv\">\n {{#hv}}\n <span id=\"{{.}}\" class=\"sensor_hv\"><i class=\"fa fa-circle \"></i></span>\n {{/hv}}\n </td>\n <td style=\"width:20%\" title=\"pr\">\n {{#pr}}\n <span id=\"{{.}}\" class=\"sensor_pr\"><i class=\"fa fa-user \"></i></span>\n {{/pr}}\n </td>\n <td style=\"width:20%\" title=\"dw\">\n {{#dw}}\n <span id=\"{{.}}\" class=\"sensor_dw\"><i class=\"material-icons\">content_copy</i></span>\n {{/dw}}\n </td>\n </tr>\n {{/areas}}\n </tbody>\n</table>\n</body>",
        "output": "str",
        "x": 640,
        "y": 380,
        "wires": [
            [
                "c921ab5572becb08"
            ]
        ],
        "info": "<table style=\"width:100%\">\r\n <tbody>\r\n <tr>\r\n <td style=\"width:25%; text-align:left\">\r\narea1\r\n</td>\r\n <td style=\"width:25%; text-align:left\">\r\n <table style=\"width:100%\">\r\n <tbody>\r\n <tr>\r\n <td style=\"text-align:left\">\r\n OO1\r\n </td>\r\n <td style=\"text-align:left\">\r\n OO2\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </td>\r\n <td style=\"width:25%; text-align:left\">\r\n <table>\r\n <tbody>\r\n <tr>\r\n <td style=\"text-align:center\">\r\n HV1\r\n </td>\r\n <td style=\"text-align:center\">\r\n HV2\r\n </td>\r\n <td style=\"text-align:center\">\r\n HV3\r\n </td>\r\n <td style=\"text-align:center\">\r\n HV4\r\n </td>\r\n\t\t\t\t </tr>\r\n </tbody>\r\n </table>\r\n </td>\r\n <td style=\"width:25%; text-align:left\">\r\n <table>\r\n <tbody>\r\n <tr>\r\n <td style=\"width:25%; text-align:center\">\r\n PR1\r\n </td>\r\n <td style=\"width:25%; text-align:center\">\r\n PR2\r\n </td>\r\n\t\t\t\t </tr>\r\n </tbody>\r\n </table>\r\n </td>\r\n </tr>\r\n </tbody>\r\n</table>"
    },
    {
        "id": "c921ab5572becb08",
        "type": "ui_template",
        "z": "db9e5b42ac35bf8b",
        "group": "65907e78a8611bee",
        "name": "template.homepage.area",
        "order": 18,
        "width": "0",
        "height": "0",
        "format": "",
        "storeOutMessages": true,
        "fwdInMessages": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 950,
        "y": 500,
        "wires": [
            [
                "b2638788fb3a1bf4",
                "6a96fd66e941f0ab"
            ]
        ]
    },
    {
        "id": "65907e78a8611bee",
        "type": "ui_group",
        "name": "Homepage",
        "tab": "4154a19ba5409263",
        "order": 1,
        "disp": false,
        "width": "16",
        "collapse": false
    },
    {
        "id": "4154a19ba5409263",
        "type": "ui_tab",
        "name": "HOMEPAGE",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<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:** [16 July 2024 10:00 UTC](https://discourse.nodered.org/t/html-template-disappearing/89538/4 "2024-07-16T10:00:51Z")

</div>

Does it make a difference if you get rid of the `<body>` and `</body>` tags?

---

<div class="post-metadata">

**Author:** ![rawdani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rawdani/32/29966_2.png) [@rawdani](https://discourse.nodered.org/u/rawdani)\
**Post date:** [16 July 2024 10:04 UTC](https://discourse.nodered.org/t/html-template-disappearing/89538/5 "2024-07-16T10:04:01Z")

</div>

I did not try. I will try now.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [16 July 2024 10:05 UTC](https://discourse.nodered.org/t/html-template-disappearing/89538/6 "2024-07-16T10:05:50Z")

</div>

> [@rawdani](#):
>
> I do not use partial deploy (at least, I don't think so)

What does your Deploy button look like?

---

<div class="post-metadata">

**Author:** ![rawdani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rawdani/32/29966_2.png) [@rawdani](https://discourse.nodered.org/u/rawdani)\
**Post date:** [16 July 2024 10:13 UTC](https://discourse.nodered.org/t/html-template-disappearing/89538/7 "2024-07-16T10:13:54Z")

</div>

I just checked, it is a full deploy (no black node in the button).

---

<div class="post-metadata">

**Author:** ![rawdani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rawdani/32/29966_2.png) [@rawdani](https://discourse.nodered.org/u/rawdani)\
**Post date:** [16 July 2024 10:19 UTC](https://discourse.nodered.org/t/html-template-disappearing/89538/8 "2024-07-16T10:19:14Z")

</div>

@jbudd I tried and the issue is still there. thanks for your help.

---

<div class="post-metadata">

**Author:** ![rawdani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rawdani/32/29966_2.png) [@rawdani](https://discourse.nodered.org/u/rawdani)\
**Post date:** [16 July 2024 10:52 UTC](https://discourse.nodered.org/t/html-template-disappearing/89538/9 "2024-07-16T10:52:27Z")

</div>

Below a printscreen of what is happening. Just to be sure, when I change page from the UI there is no msg sent to the html template: that is, there is not a force refreshed. And, as said before, without doing anything, that html block disappears.

I did not mention this, but there are msg that update the html status. At beginning I thought that was the problem (though the code is correct and the msg is handled properly) but actually if I stop them still the html block still disappears, so it is not them causing this.

![chrome_U8S4JaMvBn](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/1/41ed2a9d44cfbeb378fe1ec913bbe2b21e16874b.gif)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [16 July 2024 11:16 UTC](https://discourse.nodered.org/t/html-template-disappearing/89538/10 "2024-07-16T11:16:40Z")

</div>

Try unchecking `Add output messages to stored state ` in the ui-node.

---

<div class="post-metadata">

**Author:** ![rawdani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rawdani/32/29966_2.png) [@rawdani](https://discourse.nodered.org/u/rawdani)\
**Post date:** [16 July 2024 15:52 UTC](https://discourse.nodered.org/t/html-template-disappearing/89538/11 "2024-07-16T15:52:02Z")

</div>

@E1cid I am trying that. It looks stable. Now I have the problem it does not show the HTML at the deploy, so I have to navigate away and then back. After that it looks stable.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [16 July 2024 17:13 UTC](https://discourse.nodered.org/t/html-template-disappearing/89538/12 "2024-07-16T17:13:56Z")

</div>

Have you looked at ui-control node to send data when tab is opened?

---

<div class="post-metadata">

**Author:** ![rawdani](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rawdani/32/29966_2.png) [@rawdani](https://discourse.nodered.org/u/rawdani)\
**Post date:** [16 July 2024 19:53 UTC](https://discourse.nodered.org/t/html-template-disappearing/89538/13 "2024-07-16T19:53:51Z")

</div>

@E1cid well, that part should work properly. If you see my animated gift, the header is as well a simple template dashboard node and it appears properly, only the other dynamic part with script does not appear at first load.

---

<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:** [30 July 2024 19:54 UTC](https://discourse.nodered.org/t/html-template-disappearing/89538/14 "2024-07-30T19:54:07Z")

</div>

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