# Template node not auto loading website widget

**URL:** https://discourse.nodered.org/t/template-node-not-auto-loading-website-widget/51291
**Category:** Dashboard
**Created:** [20 September 2021 14:35 UTC](https://discourse.nodered.org/t/template-node-not-auto-loading-website-widget/51291 "2021-09-20T14:35:59Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)
#### Post date: [20 September 2021 14:35 UTC](https://discourse.nodered.org/t/template-node-not-auto-loading-website-widget/51291/1 "2021-09-20T14:35:59Z")

</div>

Hello

I have a template node with the following code (ignore the #'s):

> #\<a class="weatherwidget-io" href="[Melbourne VIC, Australia - Weather Forecast](https://forecast7.com/en/n37d81144d96/melbourne/)" data-#font="Verdana" data-icons="Climacons Animated" data-theme="original" data-basecolor="#282828" #data-accent="#282828" data-highcolor="#ffffff" data-lowcolor="#ffffff" data-cloudfill="#282828" data-#raincolor="#0871b8" data-snowcolor="#ffffff" \>Melbourne VIC, Australia  
> #

It works when I first load the node red dashboard, but as I click around to other tabs then click back into this one, the widget doesn't load properly. The only way I can get it to load again is to close and re-open the dashboard.

Can anyone suggest how I can ensure this remains loaded ?

---

<div class="post-metadata">

### Author: ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)
#### Post date: [21 September 2021 07:12 UTC](https://discourse.nodered.org/t/template-node-not-auto-loading-website-widget/51291/2 "2021-09-21T07:12:58Z")

</div>

Do you have an inject node that starts the function node? Is it set to repeat at all?

---

<div class="post-metadata">

### Author: ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)
#### Post date: [21 September 2021 07:17 UTC](https://discourse.nodered.org/t/template-node-not-auto-loading-website-widget/51291/3 "2021-09-21T07:17:22Z")

</div>

This is my flow. I've tried to do it with an inject node which I had set to 1s, but that didn't refresh it.

```auto
[
    {
        "id": "ab355109a22e1cb3",
        "type": "tab",
        "label": "Flow 2",
        "disabled": false,
        "info": ""
    },
    {
        "id": "0c321c8a39c4bb46",
        "type": "inject",
        "z": "ab355109a22e1cb3",
        "name": "trigger auto check",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "60",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payloadType": "date",
        "x": 850,
        "y": 480,
        "wires": [
            [
                "1afcdeb10cb56d5f"
            ]
        ]
    },
    {
        "id": "1afcdeb10cb56d5f",
        "type": "ui_template",
        "z": "ab355109a22e1cb3",
        "group": "680a90e74f2439dd",
        "name": "Weather",
        "order": 4,
        "width": "20",
        "height": "3",
        "format": "<a class=\"weatherwidget-io\" href=\"https://forecast7.com/en/n37d81144d96/melbourne/\" data-font=\"Verdana\" data-icons=\"Climacons Animated\" data-theme=\"original\" data-basecolor=\"#282828\" data-accent=\"#282828\" data-highcolor=\"#ffffff\" data-lowcolor=\"#ffffff\" data-cloudfill=\"#282828\" data-raincolor=\"#0871b8\" data-snowcolor=\"#ffffff\" >Melbourne VIC, Australia</a>\n<script>\n!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 840,
        "y": 180,
        "wires": [
            [
                "182193f823e35dfd"
            ]
        ]
    },
    {
        "id": "182193f823e35dfd",
        "type": "debug",
        "z": "ab355109a22e1cb3",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1030,
        "y": 260,
        "wires": []
    },
    {
        "id": "680a90e74f2439dd",
        "type": "ui_group",
        "name": "Main",
        "tab": "e6d742089da75a60",
        "order": 1,
        "disp": false,
        "width": "20",
        "collapse": false
    },
    {
        "id": "e6d742089da75a60",
        "type": "ui_tab",
        "name": "Main",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

I also tried parsing the code from the first post via a UI Control node, but that also couldn't get that to work. This was the flow I tried:

```auto

[
    {
        "id": "377ae3af691e5c69",
        "type": "ui_template",
        "z": "4d9b60f02c48e798",
        "group": "680a90e74f2439dd",
        "name": "Weather",
        "order": 4,
        "width": "20",
        "height": "3",
        "format": "{{payload}};",
        "storeOutMessages": true,
        "fwdInMessages": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 920,
        "y": 360,
        "wires": [
            []
        ]
    },
    {
        "id": "6d2bcc99931e2495",
        "type": "ui_ui_control",
        "z": "4d9b60f02c48e798",
        "name": "Reload weather",
        "events": "all",
        "x": 520,
        "y": 340,
        "wires": [
            [
                "290b8b542bfe791f"
            ]
        ]
    },
    {
        "id": "290b8b542bfe791f",
        "type": "template",
        "z": "4d9b60f02c48e798",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<a class=\"weatherwidget-io\" href=\"https://forecast7.com/en/n37d81144d96/melbourne/\" data-font=\"Verdana\" data-icons=\"Climacons Animated\" data-theme=\"original\" data-basecolor=\"#282828\" data-accent=\"#282828\" data-highcolor=\"#ffffff\" data-lowcolor=\"#ffffff\" data-cloudfill=\"#282828\" data-raincolor=\"#0871b8\" data-snowcolor=\"#ffffff\" >Melbourne VIC, Australia</a>\n<script>\n!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');\n</script>",
        "output": "str",
        "x": 750,
        "y": 360,
        "wires": [
            [
                "377ae3af691e5c69"
            ]
        ]
    },
    {
        "id": "680a90e74f2439dd",
        "type": "ui_group",
        "name": "Main",
        "tab": "e6d742089da75a60",
        "order": 1,
        "disp": false,
        "width": "20",
        "collapse": false
    },
    {
        "id": "e6d742089da75a60",
        "type": "ui_tab",
        "name": "Main",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

### Author: ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)
#### Post date: [21 September 2021 07:46 UTC](https://discourse.nodered.org/t/template-node-not-auto-loading-website-widget/51291/4 "2021-09-21T07:46:24Z")

</div>

> [@Sirhc](#):
>
> The only way I can get it to load again is to close and re-open the dashboard.

All I need to do is refresh the browser window.

---

<div class="post-metadata">

### Author: ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)
#### Post date: [21 September 2021 08:02 UTC](https://discourse.nodered.org/t/template-node-not-auto-loading-website-widget/51291/5 "2021-09-21T08:02:06Z")

</div>

Thanks for the response, but if possible I'd like not to refresh the browser to bring it up.

I want it to automatically come up when I change between tabs.

---

<div class="post-metadata">

### Author: ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)
#### Post date: [21 September 2021 08:05 UTC](https://discourse.nodered.org/t/template-node-not-auto-loading-website-widget/51291/6 "2021-09-21T08:05:37Z")

</div>

I understand the need... was just pointing out that a refresh is quicker then a close/reopen of the dashboard/browser.

I have no idea why the issue happens, nor how to automatically refresh the page upon return to the tab.

Perhaps someone else will chip in.

---

<div class="post-metadata">

### Author: ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)
#### Post date: [22 September 2021 02:49 UTC](https://discourse.nodered.org/t/template-node-not-auto-loading-website-widget/51291/7 "2021-09-22T02:49:29Z")

</div>

Thanks! Any other takers? 🙂

---

<div class="post-metadata">

### Author: ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)
#### Post date: [22 September 2021 04:33 UTC](https://discourse.nodered.org/t/template-node-not-auto-loading-website-widget/51291/8 "2021-09-22T04:33:25Z")

</div>

It seems that particular code requires a browser page reload to work...

I think I have finally figured out some of the mysteries of the `ui_control` and have gotten it to refresh the tab (which, if the data is already properly displayed, just wipes it out as if you left the tab and returned ☹ ) and even return focus back to the tab if you are not looking at it, etc... but none of that works for that code.

I have searched this forum for other requests on how to make the browser page itself refresh, due similar issues, but all answers seem to have fallen into either "_Why?_" or "_Just use the_ `ui_control`" categories 😒

---

<div class="post-metadata">

### Author: ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)
#### Post date: [22 September 2021 13:08 UTC](https://discourse.nodered.org/t/template-node-not-auto-loading-website-widget/51291/9 "2021-09-22T13:08:53Z")

</div>

That sucks, I really like that weather widget ☹

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [22 September 2021 13:59 UTC](https://discourse.nodered.org/t/template-node-not-auto-loading-website-widget/51291/10 "2021-09-22T13:59:45Z")

</div>

maybe try removing the if check that looks to see if already there...

```auto
<a class="weatherwidget-io" href="https://forecast7.com/en/n37d81144d96/melbourne/" data-font="Verdana" data-icons="Climacons Animated" data-theme="original" data-basecolor="#282828" data-accent="#282828" data-highcolor="#ffffff" data-lowcolor="#ffffff" data-cloudfill="#282828" data-raincolor="#0871b8" data-snowcolor="#ffffff" >Melbourne VIC, Australia</a>
<script>
!function(d,s,id){
    var js,fjs=d.getElementsByTagName(s)[0];
    //if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src='https://weatherwidget.io/js/widget.min.js';
        fjs.parentNode.insertBefore(js,fjs);
    //}
}(document,'script','weatherwidget-io-js');
</script>

```

---

<div class="post-metadata">

### Author: ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)
#### Post date: [22 September 2021 21:52 UTC](https://discourse.nodered.org/t/template-node-not-auto-loading-website-widget/51291/11 "2021-09-22T21:52:29Z")

</div>

> [@dceejay](#):
>
> ```auto
> <a class="weatherwidget-io" href="https://forecast7.com/en/n37d81144d96/melbourne/" data-font="Verdana" data-icons="Climacons Animated" data-theme="original" data-basecolor="#282828" data-accent="#282828" data-highcolor="#ffffff" data-lowcolor="#ffffff" data-cloudfill="#282828" data-raincolor="#0871b8" data-snowcolor="#ffffff" >Melbourne VIC, Australia</a>
> <script>
> !function(d,s,id){
> var js,fjs=d.getElementsByTagName(s)[0];
> //if(!d.getElementById(id)){
> js=d.createElement(s);
> js.id=id;
> js.src='https://weatherwidget.io/js/widget.min.js';
> fjs.parentNode.insertBefore(js,fjs);
> //}
> }(document,'script','weatherwidget-io-js');
> </script>
> 
> ```

That did the trick! Thank you so much!

---

<div class="post-metadata">

### Author: ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)
#### Post date: [22 September 2021 21:58 UTC](https://discourse.nodered.org/t/template-node-not-auto-loading-website-widget/51291/12 "2021-09-22T21:58:42Z")

</div>

> [@dceejay](#):
>
> maybe try removing the if check that looks to see if already there...

👍 😃

> [@Gunner](#):
>
> It seems that particular code requires a browser page reload to work...

Well, at least I got the general idea right.. if not the solution... but then I am not a real programmer 😛

---

<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: [22 October 2021 21:58 UTC](https://discourse.nodered.org/t/template-node-not-auto-loading-website-widget/51291/13 "2021-10-22T21:58:48Z")

</div>

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