Update Repeater code breaks after page reload

Ask the community
,
1

On one of my pages I have a Repeater connected to a dataset. All of the elements inside the Repeater retrieve their values from this dataset, except for two textboxes. The values of these textboxes are set using wix-code after the dataset is done loading all items.

This construction works exactly as expected when you go to the page via the navigation menu (https://michielmunckhof.wixsite.com/bo-art > click on the menu tab “Agenda”). Also in preview mode within the Wix Editor all works fine. So far so good…

The magic happens when you reload the Agenda page (F5) or when you directly visit the page (https://michielmunckhof.wixsite.com/bo-art/agenda). What was working fine after navigating to the page via the menu now doesn’t work at all anymore. As you will see the date and time in the textboxes is formatted in a strange way for a few seconds, and then resets to the default value.

In the console I see that after a reload or visiting the page directly via its URL some Javascript errors occur, which do not occur when you visit the page via the menu.

I spent hours looking into this weird behaviour but cannot figure out why it is happening and whether it might be a bug. Below is the wix-code used to update the two textboxes, which works as expected when visiting the page via the menu bar.

Many thanks in advance for your help!

PS: Don’t mind the blank and unfinished pages on the site, it is still under construction =).

$w.onReady( function () {
$w(‘#AgendaDataset’).onReady( () => {
$w(“#AgendaRepeater”).forEachItem( ($w, itemData, index) => {
let locale = “nl-NL”;
let date_options = {
weekday: ‘long’,
year: “numeric”,
month: “long”,
day: “numeric”
};
let time_options = {
hour: “numeric”,
minute: “numeric”
};
let start_date_formatted = itemData.start_date.toLocaleDateString(locale, date_options);
let start_time_formatted = itemData.start_date.toLocaleTimeString(locale, time_options);
let end_date_formatted = itemData.end_date.toLocaleDateString(locale, date_options);
let end_time_formatted = itemData.end_date.toLocaleTimeString(locale, time_options);
if (start_date_formatted === end_date_formatted) {
$w(“#StartDate”).text = start_date_formatted;
$w(“#EndDate”).text = start_time_formatted + ‘-’ + end_time_formatted;
} else {
$w(“#StartDate”).text = start_date_formatted + ’ ’ + start_time_formatted + ‘-’;
$w(“#EndDate”).text = end_date_formatted + ’ ’ + end_time_formatted;
}
});
});
});

2

I think you should contact Wix Support at support@wix.com or write a post here with the headline of WIX TEAM HELP NEEDED or similar.

I have this exact error on a page and I spent hours and hours trying to solve it but it was something with the new feature SSR that made direct access to some Dynamic Pages break. I can’t tell if that is the case for you but one guess would be to ask them to check it for you.

3

Hi,
I’ve accessed your editor and noticed that you’ve used the forEach function. I would recommend the following:

  1. Get the data using the query function.
  2. Set the data to the repeater.
  3. Use the onItemReady function to change the element within the repeater.

Here’s a code snippet to better explain what I’m referring:

import wixData from 'wix-data';

let collectionRecords = [];  

$w.onReady(function () { 
//Query to get the information from the database
  wixData.query("collectionName") 
  .find() 
  .then((results) => { 
      collectionRecords = results.items; 
      //Set the information to the repeater
      $w(`#repeater1`).data = collectionRecords; 
   }) 
   .catch((err) => { 
     let errorMsg = err; 
   }); 
   
   	       
   $w(`#repeater1`).onItemReady(($w, itemData) => { 
   //Add here all the relevant elements of the repeater 
   //In this case, I've added a text and an image to the repeater	
      $w(`#textTitle`).text = itemData.title; 
      $w('#imageProperty').src = itemData.image;
    }); 
});

I hope it’s clear.

Best,
Tal.

4

Hi Andreas,

Good to know that I’m not the only one experiencing this problem! I contacted Wix Support and my question has been forwarded to the development team for further investigation. Indeed I too would say the issue appears to be caused by SSR, as I read elsewhere on the forum that SSR is for example not applied when reloading a page.

Tal, many thanks for your workaround! I will definitely apply this code to other pages as well, as it gives me much more control over the Repeater content. For this particular page it also works like a charm, the only downside is that loading my page with as little as six agenda items now takes a very long time. I do hope the developers can find a way to make the Repeater work with a dataset and SSR, even after a page reload or visiting a page url directly.

I will keep you up to date about the progress on my ticket at Wix Support.

Michiel

5

Is this fixed yet. I am having the same issue. I have a query and did what Tal said but the page is still breaking. I can’t get it not to break. We shouldn’t as users have to fix a forEach function if it is available to us.