# Toolbar does not update on refresh or page switch

**URL:** https://discourse.nodered.org/t/toolbar-does-not-update-on-refresh-or-page-switch/48820
**Category:** Dashboard
**Created:** [23 July 2021 15:25 UTC](https://discourse.nodered.org/t/toolbar-does-not-update-on-refresh-or-page-switch/48820 "2021-07-23T15:25:35Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)
#### Post date: [23 July 2021 15:25 UTC](https://discourse.nodered.org/t/toolbar-does-not-update-on-refresh-or-page-switch/48820/1 "2021-07-23T15:25:35Z")

</div>

Steve helped me with getting my data into the toolbar. I have a couple of behavior issues that I need to understand. The data shows up on the home page but when I refresh the page it does not re populate. Also the data does not show up on any of the other pages. Below is my node layout

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/a/ca344b20a74660554128923b597e7e7fc944718b.png)

```auto
[
    {
        "id": "200328b17c35c26b",
        "type": "inject",
        "z": "9cf1e7d7585816ac",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "30",
        "crontab": "",
        "once": true,
        "onceDelay": "5",
        "topic": "",
        "payloadType": "date",
        "x": 110,
        "y": 180,
        "wires": [
            [
                "02db021a09883ba3",
                "567f6f5f.5861f",
                "26bd4339415feab5"
            ]
        ]
    },
    {
        "id": "5f492956e1b54d8d",
        "type": "debug",
        "z": "9cf1e7d7585816ac",
        "name": "",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 550,
        "y": 200,
        "wires": []
    },
    {
        "id": "aa85bd99bcc4adea",
        "type": "ui_template",
        "z": "9cf1e7d7585816ac",
        "group": "12aa555ebffdaafd",
        "name": "Logo / Solar / Clock",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "<script id=\"clockScript1\" type=\"text/javascript\">\n var clockInterval;\n $(function () {\n if (clockInterval) return;\n\n // add solar\n var div1 = $('<div/>');\n var p1 = $('<span>SFi</span>');\n var p2 = $('<span id=\"header-sfi\">...</span>');\n var p3 = $('<span></span>');\n var p4 = $('<span>A</span>');\n var p5 = $('<span id=\"header-Aindex\">...</span>');\n var p6 = $('<span></span>');\n var p7 = $('<span>K</span>');\n var p8 = $('<span id=\"header-kdx\">...</span>');\n var p9 = $('<span></span>');\n\n\n p1[0].style.margin = 'auto';\n p2[0].style.margin = '5px'; \n p3[0].style.margin = '3px';\n p4[0].style.margin = 'auto';\n p5[0].style.margin = 'auto';\n p6[0].style.margin = '5px';\n p7[0].style.margin = 'auto';\n p8[0].style.margin = 'auto';\n p9[0].style.margin = 'auto';\n\n\n div1[0].style.width = 'auto';\n div1[0].style.margin = '55px';\n div1[0].style.align = 'left';\n\n div1.append(p1);\n div1.append(p2);\n div1.append(p3);\n div1.append(p4);\n div1.append(p5);\n div1.append(p6);\n div1.append(p7);\n div1.append(p8);\n div1.append(p9);\n\n\n\n //add logo\n var div2 = $('<div/>');\n var logo = new Image();\n\n logo.src = '/svarclogotp.png'\n logo.height = 40;\n div2[0].style.width = 'auto';\n div2[0].style.margin = 'auto';\n // div2[0].style.align = 'center';\n div2[0].style.float = 'right';\n \n div2.append(logo);\n\n\n // add clock\n var div3 = $('<div/>');\n var p = $('<p/>');\n\n div3.append(p);\n div3[0].style.align = 'right';\n div3[0].style.margin = 'auto'; \n div3[0].style.width = 'auto';\n\n \n function displayTime() {\n var d = Date();\n var options = { timeZone: 'UTC', timeZoneName: 'short', hourCycle: 'h23', hour: `2-digit`, minute: `2-digit`};\n p.text(new Date().toLocaleString('en-US', options));\n }\n \n clockInterval = setInterval(displayTime, 1000);\n\n //add to toolbar when it's available\n var addToToolbarTimer;\n \n function addToToolbar() {\n var toolbar = $('.md-toolbar-tools');\n \n if(!toolbar.length) return;\n \n toolbar.append(div1);\n toolbar.append(div2);\n toolbar.append(div3);\n\n clearInterval(addToToolbarTimer);\n }\n addToToolbarTimer = setInterval(addToToolbar, 100);\n });\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "global",
        "x": 330,
        "y": 160,
        "wires": [
            []
        ]
    },
    {
        "id": "7c287011f60ac8b3",
        "type": "ui_template",
        "z": "9cf1e7d7585816ac",
        "group": "12aa555ebffdaafd",
        "name": "update Aindex",
        "order": 7,
        "width": 0,
        "height": 0,
        "format": "\n<script>\n (function(scope) {\n //hide this card. NOTE: 4b689f7473831a84 is the Node id as \n //seen in the INFO panel on the sidebar when you select this node\n $('[node-id=\"7c287011f60ac8b3\"]').hide();\n scope.$watch('msg', function(msg) {\n if (msg && msg.topic == \"Aindex\") {\n $(\"#header-Aindex\").text(msg.payload);\n }\n });\n })(scope);\n</script>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 600,
        "y": 360,
        "wires": [
            []
        ]
    },
    {
        "id": "02db021a09883ba3",
        "type": "http request",
        "z": "9cf1e7d7585816ac",
        "name": "Ki",
        "method": "GET",
        "ret": "txt",
        "paytoqs": "ignore",
        "url": "https://www.hamqsl.com/solarxml.php",
        "tls": "",
        "persist": false,
        "proxy": "",
        "authType": "",
        "x": 170,
        "y": 280,
        "wires": [
            [
                "ee176491f7e60d4c"
            ]
        ]
    },
    {
        "id": "c68d1bbb02134814",
        "type": "function",
        "z": "9cf1e7d7585816ac",
        "name": "",
        "func": "var kdx = msg.payload.solar.solardata[0].kindex[0];\nmsg.topic = \"kdx\";\nmsg.payload = kdx;\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 440,
        "y": 280,
        "wires": [
            [
                "4946e617dfe4a6e9",
                "5f492956e1b54d8d"
            ]
        ]
    },
    {
        "id": "4946e617dfe4a6e9",
        "type": "ui_template",
        "z": "9cf1e7d7585816ac",
        "group": "12aa555ebffdaafd",
        "name": "update K",
        "order": 7,
        "width": 0,
        "height": 0,
        "format": "\n<script>\n (function(scope) {\n //hide this card. NOTE: 4b689f7473831a84 is the Node id as \n //seen in the INFO panel on the sidebar when you select this node\n $('[node-id=\"4946e617dfe4a6e9\"]').hide();\n scope.$watch('msg', function(msg) {\n if (msg && msg.topic == \"kdx\") {\n $(\"#header-kdx\").text(msg.payload);\n }\n });\n })(scope);\n</script>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 580,
        "y": 280,
        "wires": [
            []
        ]
    },
    {
        "id": "567f6f5f.5861f",
        "type": "http request",
        "z": "9cf1e7d7585816ac",
        "name": "Sfi",
        "method": "GET",
        "ret": "txt",
        "paytoqs": "ignore",
        "url": "https://www.hamqsl.com/solarxml.php",
        "tls": "",
        "persist": false,
        "proxy": "",
        "authType": "",
        "x": 170,
        "y": 320,
        "wires": [
            [
                "8ac5b45e5a585f67"
            ]
        ]
    },
    {
        "id": "eff524ca21288891",
        "type": "ui_template",
        "z": "9cf1e7d7585816ac",
        "group": "12aa555ebffdaafd",
        "name": "update SFi",
        "order": 7,
        "width": 0,
        "height": 0,
        "format": "\n<script>\n (function(scope) {\n //hide this card. NOTE: 4b689f7473831a84 is the Node id as \n //seen in the INFO panel on the sidebar when you select this node\n $('[node-id=\"4946e617dfe4a6e9\"]').hide();\n scope.$watch('msg', function(msg) {\n if (msg && msg.topic == \"sfi\") {\n $(\"#header-sfi\").text(msg.payload);\n }\n });\n })(scope);\n</script>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 590,
        "y": 320,
        "wires": [
            []
        ]
    },
    {
        "id": "ff8cb7addfe65ac9",
        "type": "function",
        "z": "9cf1e7d7585816ac",
        "name": "",
        "func": "var sfi = msg.payload.solar.solardata[0].solarflux[0];\nmsg.topic = \"sfi\";\nmsg.payload = sfi;\nreturn msg;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 440,
        "y": 320,
        "wires": [
            [
                "eff524ca21288891"
            ]
        ]
    },
    {
        "id": "26bd4339415feab5",
        "type": "http request",
        "z": "9cf1e7d7585816ac",
        "name": "Ai",
        "method": "GET",
        "ret": "txt",
        "paytoqs": "ignore",
        "url": "https://www.hamqsl.com/solarxml.php",
        "tls": "",
        "persist": false,
        "proxy": "",
        "authType": "",
        "x": 170,
        "y": 360,
        "wires": [
            [
                "c8d2854b589fccc4"
            ]
        ]
    },
    {
        "id": "c8d2854b589fccc4",
        "type": "xml",
        "z": "9cf1e7d7585816ac",
        "name": "",
        "property": "payload",
        "attr": "",
        "chr": "",
        "x": 310,
        "y": 360,
        "wires": [
            [
                "367061f2c2932a9f"
            ]
        ]
    },
    {
        "id": "367061f2c2932a9f",
        "type": "function",
        "z": "9cf1e7d7585816ac",
        "name": "",
        "func": "var Aindex = msg.payload.solar.solardata[0].aindex;\nmsg1 = {topic: \"Aindex\", payload: Aindex};\n\nnode.send([msg1]);\n\n\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 440,
        "y": 360,
        "wires": [
            [
                "7c287011f60ac8b3"
            ]
        ]
    },
    {
        "id": "ee176491f7e60d4c",
        "type": "xml",
        "z": "9cf1e7d7585816ac",
        "name": "",
        "property": "payload",
        "attr": "",
        "chr": "",
        "x": 310,
        "y": 280,
        "wires": [
            [
                "c68d1bbb02134814"
            ]
        ]
    },
    {
        "id": "8ac5b45e5a585f67",
        "type": "xml",
        "z": "9cf1e7d7585816ac",
        "name": "",
        "property": "payload",
        "attr": "",
        "chr": "",
        "x": 310,
        "y": 320,
        "wires": [
            [
                "ff8cb7addfe65ac9"
            ]
        ]
    },
    {
        "id": "12aa555ebffdaafd",
        "type": "ui_group",
        "z": "9cf1e7d7585816ac",
        "name": "Toolbar",
        "tab": "0a84fc0885f875a9",
        "order": 1,
        "disp": false,
        "width": "18",
        "collapse": false
    },
    {
        "id": "0a84fc0885f875a9",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

Regards

---

<div class="post-metadata">

### Author: ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)
#### Post date: [23 July 2021 21:55 UTC](https://discourse.nodered.org/t/toolbar-does-not-update-on-refresh-or-page-switch/48820/2 "2021-07-23T21:55:38Z")

</div>

I fixed one problem The reason the toolbar data did not update was due to the dashboard setting:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/0/60afab7cf6418dd19e5fc1e8377e0104f75215cd.png)

I had it set to Toolbar only....So that leaves now only one issue. The web browser refresh blows out the data and I have to click on any of the toolbar links to refresh it.

Here is what it looks like after i refresh the browser:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/8/18d1ef36cae001697f72c62d35e80efdecef4c99.png)

If I click on the toolbar button and navigate to any of the pages the data populates:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/c/7c7bfe8f6444a28f0988a653b980cace1e6b3c16.png)

---

<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 August 2021 21:55 UTC](https://discourse.nodered.org/t/toolbar-does-not-update-on-refresh-or-page-switch/48820/3 "2021-08-22T21:55:49Z")

</div>

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