onClick runs multiple times in a repeater after refreshing data

Ask the community
,
1

Hi everyone, pleaaaase help I don’t understand the problem :frowning:

So here is the current flow :
1 / the repeater is populated with a set of data. I have an onClick that runs correctly.
2 / the repeater is now refreshed with a new set of data. The onClick keeps on running correctly.
3 / the repeater is refreshed again with the first set of data. The onClick now runs two times…

If the flow is repeated again, the onClick will run three time etc.

Here is a part of my code :

let currentData

export function refresh_repeater() {

    wixData.query("Modeles")
        .find()
        .then((modeles) => {
            $w('#repeater1').data = modeles.items
            $w("#repeater1").forEachItem(($item, itemData, index) => {
                $item("#image10").src = itemData.src;
                $item("#text43").text = itemData.title
                $item("#text45").text = itemData.description

            });
 })
                        
export function repeater1_itemReady($item, itemData, index) {
    $item("#image10").onClick((event) => {
        console.log("ok")

         if ($item('#box3').hidden) {
            disable(index)
            currentData = itemData
        } else {
            $item('#box3').hide()
            enable()
        }

    })
}

function enable() {
    $w('#repeater1').forEachItem(($item, itemData, index) => {
        $item('#box8').hide()
    })
}

function disable(indexNumber) {
    $w('#repeater1').forEachItem(($item, itemData, index) => {
         if (index === indexNumber) {
            $item('#box8').hide()
            $item("#box3").show()
        } else {
            $item('#box8').show()
            $item("#box3").hide()
        }
    })
}
2

Anyone ? Please ? :sweat_smile:

3

Not sure if this is what you wanted to achieve and if it works for you, but test it out and do your own corrections on it, if it doesn’t work as expected…

var currentData

$w.onReady(()=>{
    refresh_repeater()
    $w('#repeater1').onItemReady(($item, itemData, index) => {console.log("Repeater-Ready")
        $item("#image10").src = itemData.src;
        $item("#text43").text = itemData.title
        $item("#text45").text = itemData.description

        $item("#image10").onClick((event) => {console.log("Image10-clicked")
 if ($item('#box3').hidden) {console.log("IF-statement-running")
                $item('#box8').hide()
                $item("#box3").show()
                currentData = itemData
                console.log(currentData)
            } 
 else {console.log("ELSE-statement-running")
                $item('#box3').hide()
                $item('#box8').show()
            }
        })
    })
})

function refresh_repeater(){console.log("Refresh-function running")
    wixData.query("Modeles")
    .find()
    .then((modeles) => {
        $w('#repeater1').data = modeles.items
    })
}
4

@russian-dima Thank you ! I will try that :slight_smile:

5

For everyone having the same problem :
The reason of this issue is that the index of each item changes while the repeater populates.

For example, here is the flow if you have 3 items on your repeater :

  • first item is ready. It has index 0
  • then, second item is ready. first item get index 1, second item get index 0
  • finally, third item is ready. First item get index 2, second item get index 1, third item get index 0

We can see that the index 0 has been assigned multiple times, therefore if you run a function based on the item’s index number, it will run multiple time.