Repeater issue on website; https://foylecycling.wixsite.com/mysite
Repeater works in preview. When page first loads in live, repeater does not populate. If I browse to another page and then back to home, the repeater loads correctly
Any suggestions?
I took a look and everything looks okay to me. What page is having the problem?
Hi Yisrael, thanks for your reply. The issue is on the home page; https://foylecycling.wixsite.com/mysite
When I first hit it, it does not load the repeater in the UPCOMING EVENTS section, see below
Ctrl+F5/page reload does not help. However, if I browse to another page e.g. click on FCC 3 Day Race and then click on the Foyle logo to return to homepage, the repeater then loads correctly, see below
The issue does not seem to happen on mobile version which uses same code
My observations of your site:
-
the repeater, and its embedded components, are connected to a dataset
-
the embedded components are not connected to any fields of the dataset’s items
-
you are also doing a query on the collection and then manually setting the repeater’s data based on the query results
Some issues to consider:
-
connecting the repeater to a dataset and manually setting the repeater’s data causes a conflict
-
by using just a dataset, but not connecting the repeater’s embedded components, the components will not get any content
-
Preview and Live have different paths for rendering, which is why it works for Preview, but not for Live
Try removing the Repeater’s connection to the dataset and try again.
Hi, thanks, I will try that later tonight. The reason for the query is that I need the next 3 events in the club calendar. I think when I initially set up the repeater without query, it always gave the first 3 events in the club calendar, irrespective of today’s date
You can achieve what you want with just the query. Manually setting the contents of the repeater conflicts with the connected dataset.
I see that you set up the dataset to return 3 items based on a filter and sort. That should also give you what you want. The point is - one or the other. You can’t use both since it causes a conflict.
Thanks, will try that tonight. It does still leave me puzzled - if that is the problem, why does it work on mobile devices and when you navigate away from the home page and back to it? Anyway, don’t waste anymore time on it. I will try your suggestion tonight. Thanks again
Well, not only do Preview and Live render differently, but Mobile is also handled differently.
Ok, this is now driving me nuts. So I have removed the dataset. The repeater items are populated via the query (or at least they are meant to be and are some of the time)
Case test 1: Hit the url; https://foylecycling.wixsite.com/mysite Most times the default repeater images/text appear. Keep hitting F5 and eventually the correct data appears. Hit F5 again and the default data might appear again
Case test 2: Hit the url; https://foylecycling.wixsite.com/mysite Browse to another page e.g. Foyle 3 Day Race and then click on Foyle logo to return to home page. The correct data appears every time but hit F5 and it will probably be replaced by default again
Case test 1 and case test 2 are on live. If 2 always works, why is it that case 1 usually doesn’t work?
The database query should be outside of the onItemReady() event handler. This code seemed to work for me:
$w.onReady(function () {
var nd = new Date();
wixData.query("FCC-EVENTS")
.gt("eventStartDt", nd)
.limit(3)
.ascending("eventStartDt")
.find()
.then((results) => {
$w("#repeater1").data = results.items;
});
$w("#repeater1").onItemReady(($item, itemData, index) => {
if (itemData.eventImage) {
$item("#eventImage").src = itemData.eventImage;
} else {
$item("#eventImage").src = "image://v1/c601a6_7f57cef53b7e4fef8b2a59e45ec54b3e~mv2.jpg/300_200/fcc_300_200.jpg";
}
$item("#eventTitle").text = itemData.title;
$item("#eventStartDt").text = itemData.eventStartDt.toString();
const date = itemData.eventStartDt;
// Set the text element to display the date using the user's settings
const options = { day: "2-digit", month: "long", year: "numeric" };
// Sets the property of the text element to be a string representing today's date in UK English
$item("#eventStartDt").text = date.toLocaleDateString('en-GB', options).toUpperCase();
if ($item("#eventCategory")) {
$item("#eventCategory").text = itemData.eventCategory;
} else {
$item("#eventCategory").text = "";
}
//Hide the Loading soon alert
$item("#eventsLoadingText").hide();
});
});
Note that the Repeater data property is set to the results of the query. The onItemReady() event handler is called when the Repeater data is set, and handles each item of the repeater.
See the onItemReady() API for more information.
I thought you had it cracked but unfortunately not. I added your code as is and it worked first time but I think that was due to the random nature of this problem
Again same issues exist, hit the home page and most times you will get default values (actually I did notice that HYDRA, SANTORINI, MYKONOS is being replaced by HYDRA, HYDRA, HYDRA)
Now browse to another page and then back to home - correct data loads. Refresh the page and it usually disappears again
Again, as I stated previously, I am puzzled why browsing away from the page and back loads the expected data first time, every time and why hitting the homepage directly or subsequently deliver random and usually incorrect results
I cannot leave this functionality in place and will have to remove it
The site works fine for me in Preview. The Live site doesn’t work since you haven’t sync’ed your database collections. You have no data, so the display won’t work correctly.
Sync the collections like this:
One small fix I would suggest would be to clear the Repeater data before setting it. Like this:
$w("#repeater1").data = [ ];
$w("#repeater1").data = results.items;
Doing this forces the onItemReady() function to properly cycle through the “new” items in the Repeater.
Hi Yisrael, thanks for all your help on this infurating issue. I have added/performed your suggestions but still the same issue persists. I can also see it good in Preview. In Live, the data was already synched but I performed it again as you requested. However, I don’t follow the logic - if it was a data synch issue ie no Live data, how can I see the correct data when I perform the browse away and back test? If no Live data, I should never be able to see correct Live data?
Just to ensure I don’t have a caching issue, I updated the database for the last event to display ie Fanad Run, it now reads Fanad Run TEST and the browse away and back works
From the forum, I have seen a few others with what seems to be the same issue
The repeater on the Events page ( https://foylecycling.wixsite.com/mysite/FCC-EVENTS ) is behaving as expected
IMPORTANT - ok, spotted something that may be able to help. I had been testing solely with Chrome. I just tested with Firefox and Edge.
If I hit homepage on Edge/FF, I see HYDRA, SANTORINI, MYKONOS and then there is a delay (approx 3 sec) and then the correct Live data loads on home page. Do the browse away and back and the correct Live data loads immediately
If I hit homepage on Chrome, I see HYDRA, SANTORINI, MYKONOS and then there is a delay (approx 3 sec) and then the correct HYDRA, SANTORINI, MYKONOS is being replaced by HYDRA, HYDRA, HYDRA. Do the browse away and back and the correct Live data loads immediately
So I think there are 2 issues happening;
-
when you hit the homepage directly, there is an unacceptable delay (approx 3 secs) before the data loads
-
when the data eventually loads, whilst it is correct on Edge/FF, it is not correct in Chrome
By my logic, that would suggest that the Live data is synched.
Wow! I think the issue is connected to server/browser. The problem is – OK, what follows is technical, take it for what it is – that you want to populate the repeater using the results of a query filtered by the time/date. What happens is that the server has one time (depending on where it is located), and the browser has another time (local for the user). When in Preview mode, it always renders based on the local (browser) time/date. But Live is another ball game. A Live site attempts to improve performance by performing some of the rendering of the site on the server and then sending to the browser where it’s finished. To prevent a conflict, and to ensure that you are presenting data based on the user’s local time/date, you need to check where the rendering is occuring.
Use the following code on your home page:
import wixWindow from 'wix-window';
$w.onReady(function () {
if (wixWindow.rendering.env === 'browser' || wixWindow.viewMode === 'Preview') {
var nd = new Date();
wixData.query("FCC-EVENTS")
.gt("eventStartDt", nd)
.limit(3)
.ascending("eventStartDt")
.find()
.then((results) => {
$w("#repeater1").data = [];
$w("#repeater1").data = results.items;
});
}
... the rest of your code in the onReady() function ...
}
The test for wixWindow.rendering.env === ‘browser’ ensures that when in a Live site, it only uses browser rendering. See the wixWindow.rendering.env API for more information.
The test for wixWindow.viewMode === ‘Preview’ allows you to continue running and testing your site in the Editor. See the wixWindow.viewMode API for more information.
Well, I hope I finally figured this out. I know this solved a similar problem on one of my projects, and I suspect it will solve your problem. What prompted me to think of this was that you stated the FCC-EVENTS page works OK - and it doesn’t use the time/date, at least, not the “current” time/date.
Hi, tried that, but again, no luck. Thinking about it again, even if it were a server/browser issue, it would be consistently bad and it is not. Please try the browse away example ie browse to any other page and then hit the Foyle logo to return to the homepage and you will see the data loads correctly and quickly. If it were a code issue, server/browser, data synch issue, I would expect it to not work on all occasions
Hi, I cloned your site so that I could make changes and experiment. Something is definitely fishy. I am referring this to QA for evaluation, and they will then open a ticket on this based on their finding.
BTW - one small fix to your code (which has no bearing on your problem)…
This line:
$item(“#eventsLoadingText”).hide();
should be:
$w(“#eventsLoadingText”).hide();
This is because the message is not contained within the Repeater.
Hi Yisrael, thanks for your help with this
The site is working now. One other tweak I can suggest, is that to prevent the default Repeater fields from “flashing”, set the Repeater to Hidden on load .
Then add this line to the end of the onItemReady() function:
$w("#repeater1").show();
Hi, excellent. It is now working successfully. Thanks again for all your help
Hello @yisrael-wix I am very glad that you could solve his problem because I am having the same for a couple of days now and it is driving me nuts. I also found an other post https://www.wix.com/corvid/forum/community-discussion/repeater-loads-and-then-disappears where I commentend my issue (which is identical to this one) with all the details to my page. Please, could you have a look. I am working now for weeks on my website and I am almost finished but this issue prevents me from the Go Live. Sorry, for annoying you by, but as you can see I am crawling the whole forum desperately.
Best,
Umut