# How to reload a page after deploying

**URL:** https://discourse.nodered.org/t/how-to-reload-a-page-after-deploying/17822
**Category:** Dashboard
**Created:** [12 November 2019 07:52 UTC](https://discourse.nodered.org/t/how-to-reload-a-page-after-deploying/17822 "2019-11-12T07:52:54Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Nxito](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nxito/32/88293_2.png) [@Nxito](https://discourse.nodered.org/u/Nxito)
#### Post date: [12 November 2019 07:52 UTC](https://discourse.nodered.org/t/how-to-reload-a-page-after-deploying/17822/1 "2019-11-12T07:52:54Z")

</div>

I need to create several screens with different information but when I deploy on node-red, the dashboard is updated to the first tab created (localhost: 1880 / ui / #! \* 0),  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/adeecc27ab7308381aafd242e0317dd11fa35aef.png) this is not what I want.  
The solution I found is to access the dashboard through a proper node to read the array with the names of each tab and access the url with this data with an iframe.  
something like:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/ee89532b8987a6f14a806573bfee6f9c66da676f.png)

The problem is:  
When doing a node-red deploy, the open pages return to HOME, and this is solved simply by reloading each page.  
How do I reload the page when deploying? (with a Node-Red template node)

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [12 November 2019 08:20 UTC](https://discourse.nodered.org/t/how-to-reload-a-page-after-deploying/17822/2 "2019-11-12T08:20:18Z")

</div>

Take a look at the `ui control` node.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [12 November 2019 14:42 UTC](https://discourse.nodered.org/t/how-to-reload-a-page-after-deploying/17822/3 "2019-11-12T14:42:58Z")

</div>

> [@Nxito](#):
>
> The solution I found is to access the dashboard through a proper node to read the array with the names of each tab and access the url with this data with an iframe.

I'm lost here I'm afraid. The Dashboard is a Single-Page App (SPA) so those tabs are **NOT** separate pages however much they may look like it. So I don't understand why you are going to the bother of trying to load them all?

After a deploy, Dashboard reloads the content of the page I believe and it defaults to the default tab. As backman2 says, you can use the ui\_control node to change that default.

---

<div class="post-metadata">

### Author: ![Nxito](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nxito/32/88293_2.png) [@Nxito](https://discourse.nodered.org/u/Nxito)
#### Post date: [13 November 2019 07:38 UTC](https://discourse.nodered.org/t/how-to-reload-a-page-after-deploying/17822/4 "2019-11-13T07:38:05Z")

</div>

Let's say I need a board with data in one room and another in another place with different information.  
I need to show that information on different screens.

I know that the dashboard is a single page, but doing what I did, I can call a dashboard tab from an iframe with the url I want to use.

The only problem was that when modifying a template node of the dashboard, all the nodes were reset to the default tab, but it is solved by reloading each page  
however, reloading eachpage every minute for each open url could consume a lot of cpu, so I was interested in reloading the address of this iframe when performing a deploy.

the ui node does not help me in this case,  
and don't be afraid ;D I'm just a newbie looking for solutions

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [13 November 2019 09:01 UTC](https://discourse.nodered.org/t/how-to-reload-a-page-after-deploying/17822/5 "2019-11-13T09:01:38Z")

</div>

Hmm, you really are pushing the boundaries I think. Maybe you could add some custom code to a Dashboard Template node (so that it runs in the browser) that is triggered when new data arrives and changes back to the tab that was on the display?

In other words, do it in the front-end rather than the back-end?

---

<div class="post-metadata">

### Author: ![Nxito](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nxito/32/88293_2.png) [@Nxito](https://discourse.nodered.org/u/Nxito)
#### Post date: [15 November 2019 11:10 UTC](https://discourse.nodered.org/t/how-to-reload-a-page-after-deploying/17822/6 "2019-11-15T11:10:58Z")

</div>

I was thinking of looking for an element of the dashboard itself, such as the .masonry-container and creating an "OnChange" function for when the dashboard id changes and so I could reload the page at the moment the dashboard id changes.  
and I think so, my purpose is to do it in the backend

my current goal is to find a child element of the iframe that changes when changing the dashboard tab id to reload

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9b3f119a70461bfbd8e39e0f81f9f4f92be77c83.png)  
but I can't get it to work

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [15 November 2019 11:50 UTC](https://discourse.nodered.org/t/how-to-reload-a-page-after-deploying/17822/7 "2019-11-15T11:50:27Z")

</div>

Sorry, I don't use Angular any more really so I can't really help.

---

<div class="post-metadata">

### Author: ![Nxito](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nxito/32/88293_2.png) [@Nxito](https://discourse.nodered.org/u/Nxito)
#### Post date: [28 November 2019 10:06 UTC](https://discourse.nodered.org/t/how-to-reload-a-page-after-deploying/17822/8 "2019-11-28T10:06:43Z")

</div>

solved with websocket

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/531cae101b5a4d664919689d769a4c56d81a47d2.png)

```auto
[{"id":"c49c925c.7fc97","type":"template","z":"e37f7c8e.a78fa","name":"Iframe with ws","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n\n \n <!-- reload page by time-->\n <!-- <meta http-equiv=\"Refresh\" content=\"5; url=http://localhost:1880/myDash/{{param}}\" /> -->\n\n<body>\n <!--button onclick=\"Refresh()\" width=\"20px\">reload</button-->\n <table><tr><th>\n <iframe id=\"MyIFrame\" align=\"left\" > Tu navegador no soporta iframes</iframe> </th>\n </tr></table>\n</body>\n<style>\n #MyIFrame {border: 0; top:0px; bottom:0px; width:100vw; height:100vh; overflow:hidden; }\n \n html{overflow:hidden;} \n body{margin:0px;}\n</style>\n<script>\n\nvar host=window.location.host\nvar dashboardDir=\"ui\"\nvar index={{payload}}\nvar tabName=window.location.href\nconsole.log(tabName)\n\nvar URL=\"http://\"+host+\"/\"+dashboardDir+\"/#!/\"+index;\nconsole.log(URL)\nvar URLtabName=\"http://\"+host+\"/\"+dashboardDir+\"/#!/\"+index;\nvar iframe = document.getElementById(\"MyIFrame\");\niframe.src = URL;\n\nconsole.log(iframe)\nfunction Refresh(){\nwindow.location = location.href;\nlocation = location;\nlocation = window.location;\nlocation = self.location.href;\n}\n\n\nvar server = window.location.href.split(\"http://\")[1].split(\"/\")[0]\nconsole.log(\"Page location is \" + server)\n\nvar ws = new WebSocket(\"ws://\" + server + \"/ws/mydash\");\nvar message={}\n\nws.onopen = function() {\n message = {\n 'payload': 'Client connected'\n };\n ws.send(JSON.stringify(message));\n};\n\nws.onclose = function(){\n var message = {\n 'payload': 'Connection closed'\n };\n console.log('Connection closed');\n ws.send(JSON.stringify(message));\n};\n\nws.onerror = function(error) {\n console.log('Error detected: ' + JSON.stringify(error));\n};\n\nws.onmessage = function(e) {\n var server_message = e.data;\n console.log(server_message)\n // responseObject = JSON.parse(server_message);\n\n //alert(JSON.stringify(responseObject));\n //Do the required stuff\n //console.log(responseObject.payload)\n if (server_message==\"Refresh page\"){\n Refresh();\n \n }\n}\n\n\n\n\n\n\n\n</script>\n\n\n\n","output":"str","x":820,"y":880,"wires":[["3ff4a774.24d0f8"]]}]

```