Is there a way to dynamically disable items from repeater?

Ask the community
,
1

Hi,
I’m looking to disable certain buttons in a repeater if a conditions is met. Is this possible?

For example, I have 2 repeaters on my test site where each repeater has 5 buttons inside, the content of the buttons is taken from a dataset.

What I’m looking to do is something like: if button with index n gets clicked in repeater 1, then disable button 2 and 3 in repeater 2

What I tried so far in my repeater 1 on.click


if (index === 1) { // index of option in repeater1
    $w("#repeater2").data[0].hide(); // I'm looking to disable a button in another repeater if option with index 1 is 
    //chosen in repeater 11
}

I went through the repeater documentation in velo but couldn’t find anything that would suit me https://www.wix.com/velo/reference/$w/repeater/introduction

2 
$w("#myRepeater").onItemReady( ($item, itemData, index) => {
  console.log(itemData)
  console.log(index)
  
  let repeatedElement = $item("#YourRepeatedElement");
  
  if(your if-query here) {repeatedElement.disable()}
  else {repeatedElement.enable()}
});
3

Hi Dima,
Thank you for your suggestion, this works well but disables all buttons in the repeater, is it possible to only do something like repeatedElement[1].disable instead of disabling all?

4

Show me your working code for this part of functionality of your project.

5

This is where i’m implementing the button disable

export function lightSelectionRepeater_itemReady($w, itemData, index) {
 // Set the action that occurs when a user clicks a choice for the body option.
 $w('#selectLightButton').onClick(() => {
 // Select the choice using the selectChoiceForOption() function.
 console.log(itemData)
 console.log(index)
 selectChoiceForOption($w, 'light', itemData); 
 //above code only handles my image configurator
 if (index === 1) {
 $w("#dekorSelectionRepeater").onItemReady( ($item, itemData, index) => {
 console.log(itemData)
 console.log(index)
 
 let repeatedElement = $item("#selectDekorButton");
 
 repeatedElement.disable()
              })
        }
 else {
 $w("#dekorSelectionRepeater").onItemReady( ($item, itemData, index) => {
 console.log(itemData)
 console.log(index)
 
 let repeatedElement = $item("#selectDekorButton");
 
 repeatedElement.enable()
              })
        }
    })
}
6

@samiyazuu
Ok, you will have to change your CODE!

  1. Use just 1x → $w(“#dekorSelectionRepeater”).onItemReady()
  2. Where is your onReady() on the very beginning of CODE? → $w.onReady()
$w.onReady(function () {
    $w("#dekorSelectionRepeater").onItemReady( ($item, itemData, index) => {
      // ALL THE REST OF YOUR CODE HERE INSIDE !!!!
    })
})
7

@russian-dima this still traverses through the whole repeater, but thanks you got me on the right track with your suggestion and help

8

No problem.