Template node not auto loading website widget

Hello

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

#<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
#

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 ?

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

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.

[
    {
        "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:


[
    {
        "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
    }
]

All I need to do is refresh the browser window.

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.

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.

Thanks! Any other takers? :slight_smile:

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 :frowning_face: ) 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 :unamused:

That sucks, I really like that weather widget :frowning:

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

<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>
1 Like

That did the trick! Thank you so much!

:+1: :smiley:

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