SOLVED! Editor X: How to Disable a button in a repeater and Enable other buttons when CLICKED?

Ask the community
1

Hi guys, I’ve been struggling with this for a while now. :hushed:

Screencast(Preview) : https://www.screencast.com/t/2u1x4lQBCZhi

1405×875 119 KB

So my repeater has buttons connected to a database (via label). When a button is clicked it loads a video URL onto a video player. THAT WORKS GREAT! :blush:

But what I want is that, when I click on a button it disables to indicate that its corresponding video URL has been loaded onto the video player, and then the other buttons should be enabled. In brevity, only one button should be disabled at a time in the repeater.

1457×871 109 KB

$w.onReady(function () {

    $w("#repeater1").onItemReady(($item, itemData, index) => {

        $item("#button1").onClick(function (event) {

 let player = $w("#videoPlayer1");
            player.src = itemData.videoUrl;

 let selectedButonLabel = $item("#button1").label;
 let selectedButon = event.context.itemId;
 // let currentLabel = $w("#dataset1").getCurrentItem().partLabel;
 let currentLabel = itemData.partLabel;
 const arrSelected = [];
 let disabledBtn = $item("#button1").enabled;

 const arrayVa = arrSelected.push(selectedButonLabel).toString()
 // console.log(selectedButonLabel)
            console.log(arrSelected)
            Check();

 function Check() {
 let sameLab = selectedButonLabel = currentLabel;
                setTimeout(function () {
 if (sameLab && disabledBtn == true) { $item("#button1").disable() } else if (sameLab || disabledBtn == false) { $item("#button1").enable() }
                })

            }

        });

    });

});

I appreciate any responses. Thank you greatly in advance. Cheers!

Walter.

2

Try to store the pressed button as a variable.

let selectedButton = ''; // To know which button was pressed in the previous action

    $w('#repeater1').forEachItem(($item, itemData, index) => {
        $item("#button1").onClick(() => {

            $item("#button1").disable();

             if (selectedButton !== '') {
                 selectedButton.enable();
              }

            selectedButton = $item("#button1");
        });
    });

3

Hi @md60th , thank you for response. I really appreciate you getting back. However, I used your exact codes and steps but it doesn’t seem to work.

I also noticed that forEachItem doesn’t filter the video player. When I used forEachItem, the item buttons disable quite alright and the video player filters properly.

$w.onReady(function () {

 let selectedButton = '';

    $w('#repeater1').forEachItem(($item, itemData, index) => {
        $item("#button1").onClick(() => {

 // let player = $w("#videoPlayer1");
 // player.src = itemData.videoUrl;

            $item("#button1").disable();

 if (selectedButton !== '') {
                selectedButton.enable();
            }

            selectedButton = $item("#button1");
        });
    });
4

Because you are using a dataset , you first have to wait for the dataset to be ready and only then do the functionality of the repeater

Like this:

$w.onReady(function () {

    $w('#dataset1').onReady(() => { // First you have to wait for the dataset to be ready

 let selectedButton = ''; // To know which button was pressed in the previous action

        $w("#repeater1").forEachItem(($item, itemData, index) => {

            $item("#button1").onClick(function (event) {

                $w("#videoPlayer1").src = itemData.videoUrl;

                $item("#button1").disable();

 if (selectedButton !== '') {
                    selectedButton.enable();
                }

                selectedButton = $item("#button1");

            });

        });
    });

});
5

It works. Thank you very much. I will paste my code here for future reference. Thank you very much. YOU ARE A HERO!

$w.onReady(function () {
    $w("#dataset1").onReady(function () {
 let selectedButton = '';

        $w('#repeater1').forEachItem(($item, itemData, index) => {
            $item("#button1").onClick(() => {

 let player = $w("#videoPlayer1");
                player.src = itemData.videoUrl;

                $item("#button1").disable();

 if (selectedButton !== '') {
                    selectedButton.enable();
                }

                selectedButton = $item("#button1");
            });
        });
    });