Multiple Repeaters - Accessing Container Items on Click

Ask the community
,
1

Hi there,

Working on an FAQ style page consisting of several categories of questions, with a repeater per category. The answers are collapsed on load and expand when a container for a question is clicked.

Items in Repeater 1 work as expected, but Repeater 2 items are incorrectly expanding Repeater 1 items.

In the code below, what is causing $w(“#repeaterItem2”).forItems to access repeaterItem1?

Thanks!

Code in use:


export function itemRepeater1_click(event) {
 $w("#repeaterItem1").forItems([event.context.itemId], ($item) => {
 let $answerItem = $item("#textAnswer");
 let $arrowDown = $item("#vectorImageArrowDown");
 let $arrowRight = $item("#vectorImageArrowRight");

 if ($answerItem.collapsed) {
            $answerItem.expand();
            $arrowDown.show();
            $arrowRight.hide();
        } else {
            $answerItem.collapse();
            $arrowDown.hide();
            $arrowRight.show();
        }
    });
}

export function itemRepeater2_click(event) {
 $w("#repeaterItem2").forItems([event.context.itemId], ($item) => {
 let $answerItem = $item("#textAnswer");
 let $arrowDown = $item("#vectorImageArrowDown");
 let $arrowRight = $item("#vectorImageArrowRight");

 if ($answerItem.collapsed) {
            $answerItem.expand();
            $arrowDown.show();
            $arrowRight.hide();
        } else {
            $answerItem.collapse();
            $arrowDown.hide();
            $arrowRight.show();
        }
    });

}
2

Hi Craig,

Another pair of eyes is noticing something. The names of the elements in both forItems functions are the same. Check out the element names in itemRepeater2. It’s not possible for them to be the same as itemRepeater1.

I’m guessing that you duplicated the first repeater, but when you duplicate a repeater, it creates unique names for the new repeater and the objects in that repeater.

3

Hi Anthony - thanks for answering.

Yes I duplicated the repeater - would like to duplicate several times for the various categories.

Is there a way to rewrite the code so that if there are similar container item names, the relevant clicked container item is still accessed?

Ideally all container items across all repeaters would simply share the same click code regardless of their item name.

Cheers.

4

Something like this could be done if you used a similar naming convention (numeric suffix) for all of the repeaters and the elements within. An example is repeaterItem1 with textAnswer1, vectorImageArrowDown1, vectorImageArrowRight1, and so on.

Then, you would call this function with the event parameter from various repeater container click events.

export function ExpandCollapse(event) {
 console.log(event.target.parent);
 let id = event.target.parent.id;
 let num = "repeaterItem" + id.substr(id.length-1);
 $w("#repeaterItem" + num).forItems([event.context.itemId], 
  ($item) => {
    let $answerItem = $item("#textAnswer" + num);
    let $arrowDown = $item("#vectorImageArrowDown" + num);
    let $arrowRight = $item("#vectorImageArrowRight" + num);

    if ($answerItem.collapsed) {
         $answerItem.expand();
         $arrowDown.show();
         $arrowRight.hide();
     } else {
         $answerItem.collapse();
         $arrowDown.hide();
         $arrowRight.show();
     }
  });
}
5

Thanks but trying to make it so it’s really easy for a client to manage after handover. Looking for a universal solution that is not impacted by the item names (which don’t appear to be update-able) or needs number sequences to be maintained.

Is it incorrect to assume multiple repeaters can operate in a unified way?