Repeater edit fine in preview but not on live site

Ask the community
,
1

[ Workaround solution: The problem with display of empty image element outlined in this post has been sidestepped by putting the image inside a box in the item. The collapse/expand logic then is applied to the box, rather than to the image. For whatever reason, changes by code to text elements and containers is maintained in the repeater items, while there is a problem with images.]

The following code successfully modifies content and layout (when image missing) of repeater items (linked to dataset) in preview mode, but not on live site. I have tested live site in another browser not used in site editing, with same results. Sandbox synched to Live data collection.

[Situation: heterogenous content in the data collection–item may (or not) have image; description field may have html markup or may be plain text; the description field type therefore set to “rich text.” Display four items at a time in repeater.]

On live site, the text content is successfully modified, but the image collapse is overridden–it collapses initially and then expands again on live site (but in preview it remains collapsed). I initially tried forEachItem() to avoid override with onItemReady(), but that failed totally when advancing to additional items using “next” button. I tried setting default for #image1 as “collapsed” and only “expand” when image present–but that failed with #image1 expanded in all items(!).

After reading some posts here in the forum, I switched to onItemReady(), which works for the text update. The “collapse()” action also occurs, but is overridden when displaying additional items (using “next” button) that lack image. When I use the “previous” button to backtrack through the items, however, the empty image elements are collapsed as desired.

$w( “#newsdataset” ).onReady( () => {
$w( “#repeater1” ).onItemReady( ($item, itemData, index) => {
let descrip = itemData.description;
$item( ‘#text30’ ).html = <p>${descrip}</p>; //for consistent formatting
if (itemData.newsImage){
$item( “#image1” ).expand();
} else { $item( “#image1” ).collapse() }
})
} );

Greatly appreciate any suggestions!
Thanks.

2

I would like to point out that the onItemReady() function does not belong in the dataset onReady(). Both functions are event handlers and should be in the page onReady() function.

Please post the URL of your site and explain where (what page) and how to see the problem.

3

Thank you for looking at this. The code I posted is inside the onReady() function. If I don’t nest the onItemReady() inside the dataset onReady(), then the text modifications are overridden.
The page name in the editor is rssImport. The repeater is at the top of the page. Click the “next” arrow button to move forward through the collection (the collapse state is overridden) and then the “previous” arrow button to move backward (the collapse state is maintained). Then forward again (the collapse state is maintained). The text modification is maintained throughout.
Thanks again.

4

In your case, you really don’t need the dataset onReady() , since the onItemReady() won’t even be triggered till the dataset is ready and sets the data contents of the Repeater. This might be the cause of the problem as the collapse isn’t running until the Repeater is refreshed.

Try the code like this (without the dataset onReady ):

$w("#repeater1").onItemReady(($item, itemData, index) => {
   let descrip = itemData.description;
   $item('#text30').html = `<p>${descrip}</p>`;
   if (itemData.newsImage) {
      $item("#image1").expand();
   }
   else {
      $item("#image1").collapse() }
})
5

Thanks for the very prompt response. Based on your initial comments, I tried removing the dataset onReady(), and as I noted in my initial reply to you, that behaves the same for the collapse and does not reset the text formatting at all. You can see this on the webpage now, as I have changed the code to what you suggested.

6

@dsac I forgot to mention that you might also need to enable the performance setting: “Fetch after the page loads”.

860×1184 253 KB

7

@yisrael-wix Thank you for the follow up (I didn’t see a notification so missed your response until now.)

  • I don’t see any difference whether the “Performance” setting is checked or not.

  • If I don’t use the dataset onReady(), then my edit of the text element does not take effect. With onItemReady() nested inside the dataset onReady(), the text elements are modified as desired.

  • The collapse function for the image does not take effect when the item is first displayed (which I think means the item was initially collapsed but then that was overridden). But subsequent views of an item (using the “next” and “previous” buttons) shows the empty image element collapsed as desired. This is true with and without the dataset onReady().
    The code for the live page is now set up with the onItemReady() nested inside the dataset onReady(), so the behaviors described can be seen. The “Performance” setting for the dataset is checked.

Do you know why the image collapse does not hold when the item is first viewed, but the text edit does?
Thanks again for your time in looking at this situation.

8

@yisrael-wix – following up on my question as to why changes to the text element in an item are maintained, while collapse of the image is not-- I put the image inside a box in the item and applied the collapse logic to the box instead of the image. That workaround fixed the problem. Changes to the box display (collapse/expand) are maintained like changes to the text element content. While not resolving the question regarding images, this approach addresses my display problem.
Thanks again for the time you have spent on my issue.