[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.
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() } })
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.