issue on repeaters - need help ASAP

Ask the community
,
1

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), :3:51596)
at Object.keys.reduce.c.value.c.set.d.set [as backgroundColor] (eval at evaluateBundle (clientWorker.178227d0.bundle.min.js:2), :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

2

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.

3

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.

4

hi,
i cant share the sites
they have private content and protected for specific members/password

i’ll try to build new site just for you to check

i’m really need this to be resolve

5

@naimibaby It would be great if you could create a test site with the minimal UI/code needed to reproduce the issue. That would help us troubleshoot the issue more efficiently.

As an alternative, you can open a ticket with Wix Customer Care to share your site info privately.

6

@marlowe-shaeffer i have created minimal repeater test page
you have the instructions on the site

https://naimibaby.wixsite.com/my-site-1

7

@naimibaby Thanks for setting this up! I followed the steps, but I’m not seeing any errors in the Console logs and no obvious issues in the repeater. Are you seeing bugs in this test site?

Edit: Is the issue that the repeater isn’t changing color? Still I’m not seeing any errors…

8

@marlowe-shaeffer this is wired
yes, stopped changing colors and not reacting for clicks (clicking is not configured for this test site)

before push the reload:

1505×696 85.5 KB

after pushing the reload:

1569×760 104 KB

the reload btn is bring the data again from the collection and load the repeater

9

@naimibaby Got it. Thank you! I’ll ask the team to investigate.

10

@marlowe-shaeffer i have now notice that its happen on chrome all the time
and on Microsoft Edge is working sometimes
sometimes after refreshing the page its not working

i have update my chrome and still not working

11

@naimibaby Our QA team is unable to reproduce this error. If you are still experiencing it, please respond with the following information:

  • OS + Chrome Versions you’re using

  • Video recording of the issue (so we can see if you’re doing something differently)

  • Your location, in case this is a Geo issue

  • Also, test under Chrome Incognito Mode and let us know the results

12

@marlowe-shaeffer Hi,
still have issue!!!
i have build by code from all over again
and also the test page

on the test page all working fine now until i’m using the search and then refresh the repeater to load al the data again
also i find an issue when im pushing the load repeater button one clicking on the repeater containers will not change colors
but pushing on the same button again it will work

you can try it by yourself with this new page:

https://naimibaby.wixsite.com/my-site-1/test2

i have notice that’s happen when I’m changing the data of the repeater
$w ( “#repeater” ). data

its happen on mobile as well - I’m using IOS 14.7.1 (latest) - Safari
i’m working from Israel
windows 10
chorme - latest version
same issue on Incognito

this is my code:

import wixData from 'wix-data';
let globalItemId

$w.onReady(async () => {
    loadReapeter()
    addTextToCollectionBtn()
    searchTextInCollectionBtn()
    updateTextBtn()
})

async function getData(searchText) {
    let result = await wixData.query("testCollection")
    if (searchText === undefined || searchText === null) { null } else { result = result.eq("title", searchText) }
    const data = result.find()
        .then(async (queryDataResult) => {
            console.log("queryDataResult.items: ",queryDataResult.items)
            return queryDataResult.items
        })
        
    return data
}

async function loadReapeter() {
    $w("#repeater").data = await getData()
    console.log("repeater Data:",$w("#repeater").data)
    $w("#repeater").onItemReady(($item, itemData, index) => {
        $item("#repeaterTxt").text = itemData.title

        $item("#repeaterBox").onMouseIn(() => {
            if($item("#repeaterBox").style.backgroundColor !== "lightblue"&&$item("#repeaterBox").style.backgroundColor !== "royalblue"){$item("#repeaterBox").style.backgroundColor = "lightblue"}
        })

        $item("#repeaterBox").onMouseOut(() => {
            if($item("#repeaterBox").style.backgroundColor === "lightblue"){$item("#repeaterBox").style.backgroundColor = "white"}
        })
    
        $item("#repeaterBox").onClick(async () => {
            if($item("#repeaterBox").style.backgroundColor === "lightblue"||$item("#repeaterBox").style.backgroundColor === "white"){
                $item("#repeaterBox").style.backgroundColor = "royalblue"
                $w("#repeater").forEachItem(($itemFE, itemDataFE) => {
                    if (itemDataFE._id !== itemData._id) {
                        $itemFE("#repeaterBox").style.backgroundColor = "white";
                    }
                })
                $w('#updateTextInput').show()
                $w('#updateTextInput').value=itemData.title
                $w('#updateTextBtn').show()
                globalItemId=itemData._id

            }else{
                $item("#repeaterBox").style.backgroundColor = "white"
            }
        
        })
    })
}

export async function reloadRepeater_click(event) {
    await loadReapeter()
}

function addTextToCollectionBtn(){
    $w("#addBtn").onClick(async () => {
    let toInsert = {"title":$w('#textInput').value}
    await wixData.insert("testCollection",toInsert)
    loadReapeter()
    })
}

function searchTextInCollectionBtn(){
    $w("#searchBtn").onClick(async () => {
    $w("#repeater").data = await getData($w('#searchText').value)
    
    })
}

function updateTextBtn() {
    $w("#updateTextBtn").onClick(async () => {
        let toUpdate={}
        toUpdate.title = $w('#updateTextInput').value
        toUpdate._id=globalItemId
        console.log("toUpdate: ",toUpdate)
        await wixData.update("testCollection", toUpdate)
        await loadReapeter()
    })
}

i’m working with velo code for 3 years
i have sites and pages that work fine for 2 years and now they are not working

there is away to subscribe to some email list when you making code change?

Thanks

13

‘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:

The reason it worked for you until now is a mystery :-).

14

@binyaminm , correct me if I’m wrong, but onItemReady() is only called when the repeater.data() is updated, is it not?

If so, it wouldn’t be any problem calling the event handler for onMouseIn() .

I use 2 other methods to get context when working with repeaters.

This way that you described:

function loadReapeter() {
    $w("#listRepeater").onItemReady(($item, itemData, index) => {
        $item("#textInstrument").text = itemData.title
        $item("#container1").onClick(() => console.log($item("#textInstrument").text))
        $item("#box1").onMouseIn(() => {
            $item("#box1").style.backgroundColor = "lightblue"
        })
        $item("#box1").onMouseOut(() => {
            $item("#box1").style.backgroundColor = "white"
        })
    })
}

And this way:

import wixData from "wix-data"

$w.onReady(async () => {
    loadReapeter()
    let data = await getData()
    $w('#buttonFeedRepeater').onClick(() => $w("#listRepeater").data = data)
    $w('#buttonClearRepeater').onClick(() => $w("#listRepeater").data = [])

    $w("#container1").onClick((event, $item) => console.log($item("#textInstrument").text))

    $w("#box1").onMouseIn((event, $item) => {
        $item("#box1").style.backgroundColor = "lightblue"
    })

    $w("#box1").onMouseOut((event, $item) => {
        $item("#box1").style.backgroundColor = "white"
    })
})

async function getData() {
    const result = await wixData.query("Items1").find()
    return result.items
}

function loadReapeter() {
    $w("#listRepeater").onItemReady(($item, itemData, index) => {
        $item("#textInstrument").text = itemData.title
    })
}
15

@binyaminm
Hi Binyamin,
i got what you saying
but, its not working as well

i have move it to the onReady as you did:


$w.onReady(async () => {
    $w("#repeaterBox").onMouseIn((event) => {
        let $item = $w.at(event.context);
            if($item("#repeaterBox").style.backgroundColor !== "lightblue"&&$item("#repeaterBox").style.backgroundColor !== "royalblue"){$item("#repeaterBox").style.backgroundColor = "lightblue"}
        })

        $w("#repeaterBox").onMouseOut((event) => {
            let $item = $w.at(event.context);
            if($item("#repeaterBox").style.backgroundColor === "lightblue"){$item("#repeaterBox").style.backgroundColor = "white"}
        })
            
       })

test page with the mouseIn/Out in the onReady:
search for test5 and then search for test4 - test 4 will not work
then load repeater and nothing work

https://naimibaby.wixsite.com/my-site-1/test

tell me if its working for you

16

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 !==…

17

Thanks
fixed today its working fine :slight_smile:
its was happen only when i was loading new data to the repeater

Thanks for your help!!!

18

@binyaminm I made a comment like yours above (Re-quoted below). Is my observation correct? There is a bug where the repeater container doesn’t have the style mixin? The solution you gave above only tests for undefined, but it still doesn’t allow you to set the background color on the repeater container. I had to get around this by putting a container box inside the repeater container and styling that background. Is this a bug? Should I be able to call $w(‘#someRepeaterContainer’).style ?

— My quote from above —
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.

19

@polkaset
You can’t change color on repeater-container the direct way.
Polkaset → you are right, only a box inside container can solve the issued situation. And yes, as i can remember → it was always like that (old issue).

20

@russian-dima @polkaset

There I have an old hack. Change Container background color with a one-pixel image. I wrote about it here: Imitating hover event on repeater container