Event for button in repeater does not fire

Ask the community
,
1

I have a repeater on my page that has a repeating button. Each button has a different label (manually edited) . I want each button to have an onClick event that changes the text of some text on the page to be equal to the label of the clicked button. I tried this code but the event does nothing.

$w . onReady ( function () {
$w ( “#rptStageSelect” ). onItemReady ( ( $item , itemData , index ) => {
$item ( ‘#rptStageSelectButton’ ). onClick ( () => {
$w ( ‘#text4’ ). text = $item ( ‘#rptStageSelectButton’ ). label ;
});
})
});

In the above code rptStageSelect is the repeater, rptStageSelectButton is the button in the repeater, text4 is a text box on the page. Clicking on the button shoud change the text of text4, but it does not.

I tried the next code as a walk-around:

export function rptStageSelectButton_click ( event ) {
$w ( ‘#text4’ ). text = $w ( ‘#rptStageSelectButton’ ). label ;
}

But this gives me bad results - the text in text4 always becomes the text of the label of the first button, to matter which button I click in the repeater.

I am new to Velo and would appreciate some advice.

2

Hi, you can try something like this:

$w.onReady(function () {
    $w('#rptStageSelect').onClick((event)=>{
        let $item = $w.at(event.context);
        $w('#text4').text = $item('#rptStageSelect').label
    })
})
3

WOW! that worked!
thank you so much.
Would you be kind enough to explain what was problem and how this fixed it? I really wand to understand how this work.
Thanks!

4

I’m glad it worked.
I suggest you to read through the repeater velo api
The first problem was that your onClick() button event was inside the repeater onItemReady().
This repeater function is triggered only when a new item is added in the repeater.

In my solution there is only the button onClick() event waiting. As the button is part of the repeater we want to know which one triggered the event. Using the event.context we get the item of the repeater that fired the event, then we can read the label of the button inside that given item to update your text.
Hope it helps :smiley: