# Applet auto-refresh in Dashboard

**URL:** <https://discourse.nodered.org/t/applet-auto-refresh-in-dashboard/25151>\
**Category:** Dashboard\
**Created:** [19 April 2020 19:44 UTC](https://discourse.nodered.org/t/applet-auto-refresh-in-dashboard/25151 "2020-04-19T19:44:21Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![StrongTown](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@StrongTown](https://discourse.nodered.org/u/StrongTown)\
**Post date:** [19 April 2020 19:44 UTC](https://discourse.nodered.org/t/applet-auto-refresh-in-dashboard/25151/1 "2020-04-19T19:44:22Z")

</div>

I've added a weather applet from Weather Widgets in my Dashboard. Whenever a browser brings up the Dashboard I have a blank spot where the weather applet should be shown. If I refresh the page the applet appears.

The code is loaded into a ui\_template and appears like this:

 ![weather applet](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/7/c763e096e22df3c4594018bd1c433a37bb6f28ff.jpeg)  
Here is the code I'm using:

```auto
<a class="weatherwidget-io" href="https://forecast7.com/en/42d84n80d30/local/" width=316px data-label_1="LOCAL" data-label_2="WEATHER" data-theme="original" >LOCAL WEATHER</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>

```

How can I make sure the applet is active (up to date) when the Dashboard is initially loaded, avoiding the black hole that now appears where it's supposed to be (until refresh)?

Also, how can I ensure the applet updates automatically in Dashboard every 15 minutes (or so) to avoid old information being displayed?  
TIA

---

<div class="post-metadata">

**Author:** ![StrongTown](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@StrongTown](https://discourse.nodered.org/u/StrongTown)\
**Post date:** [20 April 2020 13:52 UTC](https://discourse.nodered.org/t/applet-auto-refresh-in-dashboard/25151/2 "2020-04-20T13:52:13Z")

</div>

Ok, I tried this. I changed ui\_template content to the following:  
`<iframe>{{msg.template}}</iframe>`

Then I defined msg.template in a function node and a trigger to resend msg.template to the `ui_template` node every 5 minutes. Still no good.

---

<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:** [20 April 2020 16:06 UTC](https://discourse.nodered.org/t/applet-auto-refresh-in-dashboard/25151/3 "2020-04-20T16:06:53Z")

</div>

Check this [post](https://discourse.nodered.org/t/insert-iframe-from-buienradar-not-working/15744/9). Because the url doesn't change, the iframe does not reload, simple solution is to add a timestamp to the url (which is unique) and it will refresh

---

<div class="post-metadata">

**Author:** ![StrongTown](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@StrongTown](https://discourse.nodered.org/u/StrongTown)\
**Post date:** [20 April 2020 18:27 UTC](https://discourse.nodered.org/t/applet-auto-refresh-in-dashboard/25151/4 "2020-04-20T18:27:41Z")

</div>

Thanks `bakman2` but that didn't work (or I applied it incorrectly). Here is the code I got from weatherwidgets that I pasted into the ui\_template. How would you implement here?

```auto
<a class="weatherwidget-io" href="https://forecast7.com/en/42d84n80d30/toronto/" 
width=316px height=200px data-label_1="location" data-label_2="Weather" data-theme="original" >WEATHER</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:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [20 April 2020 18:37 UTC](https://discourse.nodered.org/t/applet-auto-refresh-in-dashboard/25151/5 "2020-04-20T18:37:43Z")

</div>

Did you look at the link @bakman provided?

The flow posted there creates a date object `d = new Date().getTime()` and appends it to the URL as a query parameter (e.g. is.src += '?d=' + d;

Explanation...  
The issue is most likely due to catching so providing a unique URL each time bypasses the cache & you get fresh data (cos the URL is different to last time)

---

<div class="post-metadata">

**Author:** ![StrongTown](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@StrongTown](https://discourse.nodered.org/u/StrongTown)\
**Post date:** [20 April 2020 18:40 UTC](https://discourse.nodered.org/t/applet-auto-refresh-in-dashboard/25151/6 "2020-04-20T18:40:19Z")

</div>

Yes, read it twice, implemented it and it did nothing for me. Where would I put the `d` ? The code I got is not `< iframe >`.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [20 April 2020 18:43 UTC](https://discourse.nodered.org/t/applet-auto-refresh-in-dashboard/25151/7 "2020-04-20T18:43:31Z")

</div>

I would suggest a few lessons in JavaScript - it will help you understand how to apply it to your issue.

The caching thing is something you learn. (look in the browser Dev tools on the network section - it'll likely show you it's getting cached copies). Once you understand that, and you know how to overcome it, a little bit JS to generate a new number to generate a unique URL should solve the issue

Try this...

```auto
<script>
!function(d,s,id) {
  var ds = new Date().getTime(); // get a unique number from datetime
  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?ds=' + ds; //append timestamp as a query parameter
     fjs.parentNode.insertBefore(js,fjs);
    }
 }
(document,'script','weatherwidget-io-js');
</script>

```

---

<div class="post-metadata">

**Author:** ![StrongTown](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@StrongTown](https://discourse.nodered.org/u/StrongTown)\
**Post date:** [20 April 2020 19:15 UTC](https://discourse.nodered.org/t/applet-auto-refresh-in-dashboard/25151/8 "2020-04-20T19:15:25Z")

</div>

Doesn't work.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [20 April 2020 20:06 UTC](https://discourse.nodered.org/t/applet-auto-refresh-in-dashboard/25151/9 "2020-04-20T20:06:11Z")

</div>

You'll need to re-triggering the ui\_template somehow otherwise the URL will not get updated.

---

<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:** [20 May 2020 20:06 UTC](https://discourse.nodered.org/t/applet-auto-refresh-in-dashboard/25151/10 "2020-05-20T20:06:12Z")

</div>

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