Hi Ailin: Share your code and provide some more context and folks will see what they can do.
What if your repeater is not connected to a dataset but is loaded from dataquery?
@mike91901 whether loaded from a dataset or data query the click functionality will be the same.
Presumably you have loaded the repeater using onItemReady or forEachItem. Whenever a click event on a repeater hosted button or image is detected the click event handler will provide a context in the event argument.
If you don’t use a dataset then you will need to use the event to get the index value in the data you used to load the repeater. This is the itemId passed in the context property of event
event.context.itemId
each repeater data item has a unique id. To find the data record for the repeater button clicked you need to filter $(“#repeater1”).data and find the record with matching id.
$w.onReady(() => {
$w(“#repeaterButton”).onClicked(selectItem);
});
function selectItem(event) {
let index = $(“#repeater1”).data.findIndex((item) => {
return item.id === event.context.itemId;
});
let selectedItem = $(“#repeater1”).data[index];
…
}
@stcroppe Thank You for the reply!!! I found another post and managed to pass the info to the lightbox. Here is my code for anyone looking for alternate:
export function editCancel_click ( event ) {
const data = $w ( “#repeater1” ). data ;
**let** clickedItemData = data . filter ( item => item . _id === event . context . itemId )
**let** itemData = clickedItemData [ 0 ];
**let** charId = itemData . charterId ;
wixWindow . openLightbox ( 'Edit' , itemData );
}
I do have a follow up question that I’m struggling to find info on… what’s the best option to refresh a repeater once a user has made changes in the lightbox without having to refresh the page?
Thanks again for your response!
Hey, guys!
I’m with an issue that I can’t send the values of a selected item from a dataset to a lightbox that should show more infos about the item selected.
In the dynamic page I get a random photo of the dataset and show it.
When the person clicks on the photo it should open a lightbox with more information about the clicked item.
Here is the dynamic page code:
import wixWindow from ‘wix-window’ ;
import wixData from ‘wix-data’ ;
$w . onReady ( async function () {
if ( wixWindow . rendering . env === ‘browser’ || wixWindow . viewMode === ‘Preview’ ) {
let res = await wixData . query ( “HomepageImages” ). find ();
let items = res . items ;
let count = items . length ;
let rnd = Math . floor ( Math . random () * count );
$w ( ‘#image3’ ). src = items [ rnd ]. image ;
$w ( ‘#image3’ ). show ();
let selected = items [ rnd ]. _id ;
console . log ( selected );
$w ( '#image3' ). onClick ( lightbox_click );
}
});
export function lightbox_click ( event ) {
let itemId = $w ( ‘#dataset1’ ). getCurrentItem (). _id ;
wixWindow . openLightbox ( ‘GaleriaCovil’ , { id : itemId });
local . setItem ( “courseId” , itemId );
console . log ( itemId )
}
When the console shows the result of “itemId” it’s not the selected image.
Could you help me, please?
Thank you so much!
RM
What is the relationship between your HomepageImages data collection and the dataset1 dataset?
You seem to be loading all data from HomepageImages and randomly selecting one but how does the dataset know which image was selected?
If you only have one image element (ie it’s not on a repeater) then why have a dataset at all? Your life would be much easier if you declare selected outside of the onReady handler and make it globally accessible.
Then when the image is selected simply use the value you have store in selected. Here are some snippets to consider
…
let selected = null;
$w.onReady(() => {
…
selected = items[rnd]._id;
});
export function lightbox_click(event) {
wixWindow.openLightbox(‘GaleriaCovil’, {id:selected});
…
}
That will do what you need.
How can i pass data from repeater to another page or lightbox. I tried session, but i could not do it
Hi, I have the same the issue and I cannot follow through the thread. Little amateur in coding.
Issue
I am creating a restaurant menu with repeater with dataset named ‘MenuStarter’.
Hi, I have the same issue and I cannot follow through the thread. Little amateur in the coding light box should open with a particular image.
Data Set Name. - MenuStarter
Image field key is - ImageStarter
Lightbox Name is - Starters
ImageClick19 is the event key
will be having different data sets for each section in the menu but that I can manage if get the first one sorted.
Any help would be much appreciated!
How are you implementing your code within WIX? Two lines are grayed out so I wonder if that is the issue I am having with your code(Which I need). Ex.
import wixWindow from ‘wix-window’ ;
import wixData from ‘wix-data’ ; //This is grayed out
export function editCancel_click ( event ) {
const data = $w ( “#repeater1” ). data ;
**let** clickedItemData = data . filter ( item => item._id === event.context.itemId )
**let** itemData = clickedItemData [ 0 ];
**let** charId = itemData.charterId ; //***This is also grayed out***
wixWindow . openLightbox ( 'Edit' , itemData );
}
I’m trying to get the Lightbox to display data from its respective container. Here is what I’m working with:
Please help! Thanks!
Hey Simon! Do you remember why you needed to update the lightbox ID?