I have a repeater being used to display reviews. Users have the option to add an image when leaving a review. When the page initially loads I have the following code that hides the image field if its SRC is blank. I have to do this because otherwise you can click the image even though theres nothing there.
//Checks to see if image was provide. If not, image field is hidden
export function dataset2_ready() {
$w('#reviewsRepeater').forEachItem(($item, itemData, index) => {
if(!$item('#reviewImage').src) {
$item("#reviewImage").collapse()
} else {
}
})
}
This works perfectly except for when the user selects the "Read More" button and loads more reviews to be displayed. The code does not rerun which I expected so I added the below code in the $w.onReady section to run when the button is pressed. I also tried adding it as an event for the button but that did not work either. I have confirmed the click event is being triggered but running the code again does not hide the blank images shown in the newly loaded content. How can I hide the images when new data is loaded?
$w("#readMore").onClick((event) => {
$w('#reviewsRepeater').forEachItem(($item, itemData, index) => {
if(!$item('#reviewImage').src) {
$item("#reviewImage").collapse()
} else {
}
})
})
You can check out the live site here https://www.mbisilver.com/mbi-silver-30ppm-8oz to see it in action. The blank image is under and a little left of the date field. You wont find it until you load more content and check the new rows.
I ended up figuring it out. I needed to have it in the onItemReady function of the repeater. This also fixed another issue I was having with hover effects not displaying in repeaters but after switching the code into that function its all working now.