Applet auto-refresh in Dashboard

Dashboard
1

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
weather applet698×503 42.5 KB

Here is the code I'm using:

<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

2

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.

3

Check this post. 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

4

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?

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

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)

6

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

7

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

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

Doesn't work.

9

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

10

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