i'm working with repeater a lot and with code
but recently sites and code that work perfect for long time start to have lots of errors after reloading the repeater
there was any update to the repeater code this week on wix side?
i'm getting this error on console:
comlink.ts:265 Uncaught (in promise) TypeError: Cannot read property 'backgroundColor' of undefined
at clientWorker.178227d0.bundle.min.js:2
at Object.set backgroundColor [as backgroundColor] (eval at evaluateBundle (clientWorker.178227d0.bundle.min.js:2), <anonymous>:3:51596)
at Object.keys.reduce.c.value.c.set.d.set [as backgroundColor] (eval at evaluateBundle (clientWorker.178227d0.bundle.min.js:2), <anonymous>:3:56622)
at is8so.js:1
at eval (eval at evaluateBundle (clientWorke.......
and its failing on this code:
$w('#repeater').onItemReady(($item, itemData, index) => {
$item("#repeaterBox").onMouseIn((event) => {
$item("#repeaterBox").style.backgroundColor = "lightblue"
})
})
its working when i reloading the page and happened again when i'm reloading the repeater
Nice library, might use to get itemData, it seems easier.
Wouldn't this work though?
$w("#box1").onMouseIn((event, $item) =>{ $item("#box1").style.backgroundColor="lightblue" })
Don't put event handlers inside any Repeater loop. A small library that helps to event handlers: https://github.com/shoonia/repeater-scope#repeater-scope
import { useScope } from 'repeater-scope'; $w('#repeater').onItemReady(($item, itemData, index) => { // no any event handlers }); // Use global selector $w $w('#repeaterBox').onMouseIn((event) => { const { $item } = useScope(event); $item('#repeaterBox').style.backgroundColor = 'lightblue'; });
Now I see. What you experience is not related to repeaters or events.
It's a bug that style properties return "undefined" when set in Editor.
It's a known issue, and we have a ticket on it. @Chaim Kram FYI Meanwhile, the workaround is to check also if the style argument is 'undefined. if(!$item("#repeaterBox").style || $item("#repeaterBox").style.backgroundColor!==....
'onItemReady' Means: When the Item is ready, -> do something.
If you set an event, (in this case: '$item("#repeaterBox").onMouseIn') it set the event every time the item is load.
The first time the page load, it sets the event. When the repeater Is reload, it sets the event again. The third time the repeater reload, it sets the event for the third. And so on...
Having the same event for items more than once creates bugs.
Events should be sets only once when the page load.
The right code will be something like this:
$w.onReady( function () { $w("#repeaterBox").onMouseIn( (event) => { let $item = $w.at(event.context); $item("#repeaterBox").style.backgroundColor="lightblue" } ); } );
This code will set the event only once at the $w.onReady() function.
You can see an example for it here:
https://www.wix.com/velo/reference/$w/repeater/introduction
The reason it worked for you until now is a mystery :-).
I am not sure if I just noticed something that's been there forever, or if it's something that recently changed...but just a few days ago I was trying to programmatically set the background of a repeater, and found that the repeater container object does not support the style mixin. I thought that was odd, since it was just a container. I actually had to put a container box inside the repeater container box and style that.
In general, I don't get why there are 3 kinds of boxes/containers.
box
container box
repeater container
I understand box vs container box, but it seems like the repeater container should really just be a container box.
Hi Naimi,
Yes, there have been some issues with repeaters this week that we are resolving. Can you share the URL for your site, describe what the problem is and how it's happening, and provide steps for us to reproduce this bug? Thanks.