Dynamic Lightbox From Repeater

Ask the community
,
9

Do you have a link to the page that you are having problems with?

Several observations with the code posted (which is why looking at the page code will be more helpful).

  1. your $w(‘#aiRepeater’).onItemReady handler shouldn’t be declared inside of another function. It is best to declare it in the $w.onReady() function. It will run anytime the data array changes OR the dataset is loaded or filtered.
  2. You seem to be using wix-data AND wix-dataset together. Make sure you know what you are doing as it is possible that using both mechanisms to access your data collection can lead to unexpected results. Especially if you have elements on your page connected to the data set using data binding. Is $w(‘#aiRepeater’) connected to a dataset? Is it $w(" #aDataset ") or do you ONLY populate data in the repeater using the .data property?
  3. The $w([#adoptButton](https://www.wix.com/code/home/forum/search/posts%3Fquery=%23adoptButton)).onClick() should be declared in the $w.onReady() function. The event argument delivers a new context value that you use to determine which repeater element is being used for the button press. This is what the $w.at() function is there for.

If you are familiar with the DOM, think of the repeater element as one of several attached to a common repeater node e.g.,

document.repeater.item1.adoptButton
document.repeater.item2.adoptButton
etc.

When you click on a button the Wix system figures out that you need element information scoped to a specific item. So getting the $w.at() value essentially provides you the repeater item scope you need to get the correct button value

for example

$w(`#adoptButton`).onClick((event)=>{
    let $repeaterItem = $w.at(event.context);
    let lightboxName = $repeaterItem('#adoptButton').label;
    let keeperInfo = $repeaterItem('#keeperElement').text;
    wixWindow.openLightbox(lightboxName, keeperInfo);
});

If the adoptButton is clicked on the repeater view for item2 then this code will use the event context to point $repeaterItem to all of the elements connected to document.repeater.item2 node. If the lightbox name was used as the label for the adoptButton then the lightbox name would be set from the button label. If you have a text box (this could be visible or hidden) that contained the keeper information (assuming this is a text value) then this would create the lightbox data from that element value. Then the light box would be launched using these arguments.

I hope this makes sense.

Bottom line you probably need to re familiarize yourself with event handlers and how datasets work with repeaters and you will probably end up with less code to do what you want :slight_smile: