Dynamic Anchors with Repeaters

Ask the community
, ,
1

I built up a page using the content manager and rendering everything dynamically using a repeater. Now I’m trying to use buttons in a second repeater to scroll to specific items in the first repeater on the same page.

Basically I want to mimic the behavior of drag-n-dropping anchors and adding the path to specific buttons but I want it to work with dynamic data.

Any help is appreciated!

2

You can’t do it with anchors, but you can scroll to specific item in the repeater if you know it’s ID. You can also scroll to specific item based on its index in the repeater.

Example for scrolling based on index.

$w.onReady(() => {
 $w('#button5').onClick(event => {
  $w('#reapter1').forEachItem(($i, _ , index) => {
   if(index === 5){
    $i('#box1').scrollTo();
   }
  })
 }) 
})
3

That would work if the buttons I had were bespoke. The problem I have is the buttons are also in a (separate) repeater and being dynamically generated so I don’t know how to get the index of the button to compare it to the items in the repeater with the information (if I could it would work because the indexes would be the same)

I’m currently trying to jury-rig a similar behavior by comparing the button label to the header text because I at least know I can get that information from the onClick event.

4

Ok I figured it out using your code as inspiration.

It’s probably not the most efficient, but it works and it’s small enough that it probably doesn’t matter. I checked the label of the button clicked from the event, and checked it against the header title in the forEachItem loop since both are generated from the same information.

$w.onReady(function () {
    //console.log($w("#listRepeater"))
    $w("#navButton").onClick((e) => {
        let scrollTarget = e.target.label;
       // console.log(e.target.label);
        $w('#listRepeater').forEachItem(($i, itemData, index) => {
            console.log(itemData.title)
            let scrollCheck=itemData.title;
            if (scrollTarget===scrollCheck) {
                $i('#repeaterContainer').scrollTo();
            }
        })
    })
})
5

That’s fine, but I’d use the button ID instead, because the label is for the site visitors/members and you may want to change it in the future without having to change this code.