How to navigate to specific element within a repeater?

Ask the community
,
1

I’m trying to create an onClick event that navigates the user to a specific item element within a data connected repeater.

The button I’m using the onClick event with is on the home page and the repeater is on a page titled “programs”. Each repeater item has a collapsed element (#detailsContainer)… I would like the button to take the user to the expanded detailsContainer of the item titled “Soccer”.

Sorry if this question has already been answered, I’ve been looking through the forum and haven’t found anything that helps.

2

I’ve already posted a detailed example for such a question (you can try search the forum).
Basically you should add to the button link URL:

 ?id=the_database_id_of_the_specific_item

Then on the second page, use wixLocation.query.id to get the desired id, then use reapeater.forItems([itemId], ($item)…
and inside the block put $item(#detailsContainer).scrollTo()

See:

3

Thank you for your help. I searched the forum for a long time but I couldn’t find anything that matched the issue, so that’s why I ended up adding a question.

I’ve added that id string to the button link URL in the way I’ve interpreted what that means (shown below) the link reads: https://www.georgianbaysportsclub.com/programs?id=a52acb4f-fe66-4016-8a35-a4da2dd7a5b9

2880×1526 499 KB

Then in the 2nd page I have added the following to the code:

$w("#programsDataset").onReady( () => {
 let itemId = wixLocation.query.id;
   $w("#programsRepeater").forItems( [itemId], ($item, itemData, index) => {
    $item("#deatailsContainer").scrollTo();
   })
 })

When I click the button it takes me to the right page and scrolls down to where it seems the #detailsContainer would be positioned, but the container is not expanding and therefore it’s not showing the content that I need it to show.

4

SORTED!

I added the expand promise to the end of the query and changed the .scrollTo item and now it works perfectly. Thank you so much for your help!!

Here’s what the code now reads:

$w("#programsDataset").onReady( () => {
 let itemId = wixLocation.query.id;
   $w("#programsRepeater").forItems( [itemId], ($item, itemData, index) => {
    $item("#programContainer").scrollTo();
    $item("#deatailsContainer").expand();
   })
 })
5

I now have another similar question, I hope it’s okay to ask it here…

I need a button within that #detailsContainer in the repeater to link to it’s corresponding registration form. The form is within a container (on another page) which expands upon selection of a dropdown box item. The dropdown box is connected to the same content manager as the repeater we discussed above.

Is there a way to get a button click to direct to a page and also automatically select the right item within the dropdown box?

e.g if the user clicks the #registerButton on the ‘Soccer’ repeater item then it should take them to the Registration page and automatically select ‘Soccer’ from the dropdown to show the correct form.