Highlight Repeater Row onClick?

Discussion Ask a question
,
1

How can I get a repeater to be highlighted when clicked, then if I click a different item in the repeater, the new item becomes highlighted and the other highlight removes itself?
I cannot logically get the coding to work to where when I click from repeated item to another repeated item, it removes the highlight of the previous and ONLY keeps the new onClick highlighted. I believe the issue has to do with global vs repeated item scope.

For example, if I have two items and I click item 1, that becomes highlighted. Easy. However, if I click item 2, the scope of the click only affects anything in item 2. So, I cannot remove the highlight on item 1.

Thoughts?

2

Hi,

I’m looking to perform a similiar function but on hover (not on click). How did you highlight a repeater item?

Maybe, the way to resolve this is de-highlight the rest of the items or to maintain a global variable that holds the previous highlighted item.

3

Here’s how you can do this:

let selectedRecord;

$w.onReady(function () {
    handleSelectRecord();
}

function handleSelectItem() {
    $w("#container1").onClick( (event, $w) => {
      if (selectedRecord) {
        selectedRecord.style.backgroundColor = "#ffffff"; //reset previously select record
      }
      let $item = $w.at(event.context); //get scoped selector
        selectedRecord = $item("#box1");
        selectedRecord.style.backgroundColor = "#f1f1f1"; //highlight newly selected one
   } );
}

Note that “container1” is the id of the main container in the repeated.
Inside it you should put a box with id “box1” that covers the entire container. The reason you need it is that you can’t set the background color of the container using code.
@Guy - you should be able to do something similar using onMouseIn and onMouseOut events

3 Likes
4

Dan, I appreciate your solution. I am a total newbie, and tried your code. I am receiving an error “parsing error: unexpected token function”. I am using your exact code, except changed #container1 to #table1 (my table ID), and added a content box with box1 for ID. I made the box color transparent? Even before adding the box, I receive the parsing error. Without the new code, no error. Thanks in advance for any guidance!

5

In my code sample there’s a missing closing bracket just before the second function.
Should be
$w.onReady(function() {
handleSelectRecord()
})

1 Like
6

@_dan-1 Thank you!!!

7

Old post being closed as .

Please add new forum posts and refer to one old with a link instead of bumping old thread from 2018.