repeater ID How it work?

Ask the community
,
1

I need to get the ID of a certain container inside a repeater.
This repeater in turn is connected to a database, so I guess the container id is the same as the one shown in the row of each product in the database.

How do I find the container id clicked?
(in all containers there is a button that if clicked should among other things return the id)

2

You can use the onItemReady of the repeater with the $item scope…

#repeater1 - repeater
#button1 - button in the repeater

$w.onReady(function () {
 $w("#repeater1").onItemReady( ($item, itemData, index) => {
  $item('#button1').onClick((event) => {
   console.log(index);
  });
 });
});
3

Ok but

 $w("#repeater1").onItemReady(($item, itemData, index) => {
        $item("#btnAdd").onClick((event) => {
            console.log('clicked');
            boxId = index;
    });
            
            
            daRimuovere.push(boxId);
            console.log(daRimuovere);
            enableButton()
            
             $w("#repeater1").forItems(daRimuovere, ($item, itemData, index) => {
        $item('#btnAdd').enable;
    });

It return this yellow error:

Wix code SDK Warning: The data that was passed to forItems contained non existing item with the ID: 0 .
Then clicking on other elements always brings me the id of the first one I clicked

4

@bigimatt14 You can try simplifying the code itself…

let daRimuovere = [];
   $w("#repeater1").onItemReady(($item, itemData, index) => {
        $item("#btnAdd").onClick((event) => {
            console.log('clicked');
            boxId = index;
            daRimuovere.push(boxId);
             $item('#btnAdd').enable;    
      });
    });

Or you can follow your code, but with little modifications…

$w("#repeater1").onItemReady(($item, itemData, index) => {
        $item("#btnAdd").onClick((event) => {
            console.log('clicked');
            boxId = index;
            daRimuovere.push(boxId);
            enableButton();
    });
  });
                     
         
     function enableButton () {
       $w("#repeater1").forItems(daRimuovere, ($item, itemData, index) => {
        $item('#btnAdd').enable;
    });
  }
5

@ajithkrr The code is more complex than that.
In all there are 2 repeaters and I should be able to click the button on the first repeater and add that element in the second by deactivating the button and when I remove it from the second the button of the first is reactivated

let secondRepeaterData = [];
let itemShop = {};
var testoMostrato;
var daRimuovere = [];
var boxId;

function buildBox() {

    $w("#repeater1").onItemReady(($item, itemData, index) => {
        $item("#btnAdd").onClick((event) => {
            console.log('clicked');
            boxId = index;
            console.log(boxId);
 let productName = $item('#txtProductName').text;
 let productPrice = $item('#txtProductPrice').text;
 let priceValue = parseInt($item('#txtProductPrice').text, 10);
            console.log(priceValue);

            itemShop = {
 "_id": productName,
 "nome": productName,
 "prezzo": productPrice,
 "prezzoNumero": priceValue
            };

            secondRepeaterData.push(Object.assign({}, itemShop));
            console.log(secondRepeaterData);
            $w("#repeater2").data = secondRepeaterData;
            $w("#repeater2").onItemReady(($itemRepeater, itemData1, index) => {
                $itemRepeater("#txtName").text = itemData1.nome;
                $itemRepeater("#txtPrice").text = itemData1.prezzo;

                console.log(itemData1)

 // update budget
                console.log(secondRepeaterData)
 var price = secondRepeaterData.reduce(function (prev, cur) {
 return prev + cur.prezzoNumero;
                }, 0);
                testoMostrato = budgetScelto - price;
                $w('#txtBudget').text = testoMostrato.toString();
                console.log(price)
 //show second repeater and disable button
                $w('#repeater2').expand();
                $item('#btnAdd').disable();

            })
        });
    });

    $w("#repeater2").onItemReady(($item, itemData, index) => {
        $item("#btnRemove").onClick((event) => {
 //riattiva pulsante

            daRimuovere.push(boxId);
            console.log(daRimuovere);
            enableButton()
 // elimina dal dataset
            secondRepeaterData = secondRepeaterData.filter(object => object._id !== itemData._id);
            $w("#repeater2").data = secondRepeaterData;
            console.log(secondRepeaterData);

 // update budget
 var price = secondRepeaterData.reduce(function (prev, cur) {
 return prev + cur.prezzoNumero;
            }, 0);

            testoMostrato = budgetScelto - price;
            $w('#txtBudget').text = testoMostrato.toString();
            console.log(testoMostrato.toString())

        });
    });

}

function enableButton() {
    $w("#repeater1").forItems(daRimuovere, ($item, itemData, index) => {
        $item('#btnAdd').enable;
    });
}