Discussion - Effects of placing repeater functions under the page's onReady function

Ask the community
,
1

Case: Using the repeater’s onItemReady function to set image’s src inside the repeater’s containers.

When I created the onItemReady function from the properties panel 20-30% of the containers inside the repeater failed to set their image’s src (code below)

export function repeater1_itemReady($item, itemData, index) {
   $item("#btn").link = `https://www.google.org`;
   $item("#image").link = `https://www.google.org`;
   let words = itemData.excerpt;
   var myTruncatedString = words.substring(0, 105);
   $item("#image").src = itemData.baseImage; //problem
   $item("#listTitle").text = itemData.farmName;
   $item("#desc").text = myTruncatedString + '...';
}

But when I deleted the function from the properties panel and manually wrote the following code, I’m having a 100% success rate.

$w.onReady(function () {
   $w("#repeater1").onItemReady( ($item, itemData, index) => {
      $item("#btn").link = `https://www.google.org`;
      $item("#image").link = `https://www.google.org`;
      let words = itemData.excerpt;
      var myTruncatedString = words.substring(0, 105);
      $item("#image").src = itemData.baseImage;
      $item("#listTitle").text = itemData.farmName;
      $item("#desc").text = myTruncatedString + '...';
   });
});

This is not the first time I noticed this. A couple of months ago (in November 2019) same happened with the dynamicDataset’s onReady function. When I deleted the function from the properties panel and added it under the page’s onReady function it was perfect.

Should we be using the page’s onReady function over the functions created using the properties panel in these cases?

2

Depends on where the repeater data is coming from. If it is coming from a dataset, then yes it should be in the dataset’s onReady event. However, you should be able to place the dataset’s on ready with either syntax.

3

If it is running with the page’s own onReady function then I would always prefer to put it all in the code itself whenever possible over adding it through properties.

However, I’m curious to know why the properties panel adding of an event handler is sometimes failing for you, whilst it works perfectly when all in code.

Technically they are doing the same thing here so there should be no issue whichever way you choose to do this.