How can I force refresh an image?

Ask the community
,
1

I am using the refresh command to refresh the database on the page so that it displays a particular image depending on what hour it is from my dataset.
However, it only changes when the page is refreshed so though it will display correct image for a visitor arriving, it will not change whilst that visitor is actually on the page without refreshing.
I do NOT want it to refresh the whole page as we have a live player on there that will also refresh and interrupt the stream.
I ONLY want the image to change - some way of having the code re-run itself every ten minutes or so on a loop so that the new image is then displayed on the visitor’s end.
Is this possible? It seems that we can only refresh the whole page, not just a display element.
Many thanks to those offering answers.

2

Post your code please

3

setInterval function will perform an action continuously every “X” milliseconds.
10min = 600000millisec

setInterval(() => {
    $w("#image").src = "image-link";
}, 600000);
4

  1. “image-link” is a simple string, it not an image url.

  2. If the image in the database has changed you should connect the image to the dateset and refresh the dateset, like:

$w("#dataset1").refresh();
  1. Instead of relying on interval polling, you may like to consider using wixRealtime to keep an open channel, so the database hook will post a message from the backend to the front end once the image has been changed.
5 
Please excuse the messy coding, I am a total amateur and copying and pasting from tutorials and forums such as this one.

This is what I am using to refresh the dataset.

import wixData from 'wix-data';

$w.onReady(function () {

   setInterval(() => $w('#dataset1').refresh(), 300000)
 
 var day = new Date()
 var day1 = day.getDay() + 1;
 // Sunday - Saturday : 1-7

    console.log("day " + day1);
 
 var time = day.getHours()

    console.log("hour " + time)
 //'time' = the hour "slot"- 'day1' = the day number "dayNumber"

    $w("#dataset1").setFilter(wixData.filter()

        .eq("dayNumber", day1)

        .eq("slot", time)
 

    );


 
})
6

@jonatandor35 I have got the dataset refreshing but I need the image to change on an already open visitors browser without them having to first lands or refreshes. The picture wont change automatically even if the dataset has changed.

7

@jonatandor35 looking at realtime, the commands seem to be passive - as in only triggering when the visitor does something. Or am I missing a trick?

8

@darrentomalin You can use realtime with datahooks to detect data change, then publish a message to the front-end and and refresh the dataset.

9

Sorry but can’t see how Realtime can help me. Like I said, I am very green and need examples to learn (leech) from

10

@jonatandor35 Any chance of talking me through this, I have been unable to grasp it so could do with an example to learn from? Many thanks.

11

It depends on what should trigger the refresh()
If it’s data change then use realtime with data hook.
If it’s only time dependent, then you have 2 options:

  1. to create a scheduled job that runs every X hours and publish a message to refresh the dataset to the realtime channel subscribres.

  2. To run an interval on the front end and refresh the dataset every x minutes…

12

@jonatandor35 Mate, I said that I don’t know how to use realtime with a datahook. I wondered if you can post something here I can copy and paste and learn from that.

It is time AND day of week dependent. I already have the dataset refreshing every hour and changing the picture. BUT the picture displayed on a VISITOR’s screen will only change (update) if THEY refresh at their end.

If a visitor is already on the site, and my dataset changes therefore changing the image, the new image will not display on their screen unless they refresh.

Any ideas or perhaps a a few clues as to how I use realtime with a datahook?