Please explain this behavior of box color and text in a repeater

Ask the community
,
1

I have a repeater showing a monthly data with different color according to the data.
Here’s the code.

export async function submitbtn_click(event,$w) {
    $w('#repeater2').data = []
    $w('#repeater2').data = await createRepeaterData()
}
   **The output of createRepeaterData() looks like this **
        data.push({
            "_id":i.toString(),
            "off":sting,
            "date":string/string,
            "box0mult":string, 
            "box1mult":string,
            "box1mult":string,
            "box0duty":string,
            "box0text":string,
            "box1duty":string,
            "box1text":string,
            "box2duty":string,
            "box2text":string,
            "box3duty":string,
            "box3text":string,
            "box4duty":string,
            "box4text":string,
        })

export function repeater2_itemReady($item, itemData, index) {
    $item('#box0').style.backgroundColor = boxcolor(itemData.box0duty,itemData.box0mult);
    $item('#box1').style.backgroundColor = boxcolor(itemData.box1duty,itemData.box1mult);
    $item('#box2').style.backgroundColor = boxcolor(itemData.box2duty,itemData.box2mult);
    $item('#box3').style.backgroundColor = boxcolor(itemData.box3duty,itemData.box3mult);
    $item('#box4').style.backgroundColor = boxcolor(itemData.box4duty,itemData.box4mult);

    $item('#datetext').text =itemData.date.toString()
    $item('#offtext').text =itemData.off
    $item('#box0text').text =itemData.box0text
    $item('#box1text').text =itemData.box1text
    $item('#box2text').text =itemData.box2text
    $item('#box3text').text =itemData.box3text
    $item('#box4text').text =itemData.box4text
}

export function boxcolor(duty,mult){
    var color = 'rgb(255,255,255)'
    if(mult ==='multiple'){
        color = 'rgb(224,224,224)'
        if(duty === 'consult'||duty==='A'||duty==='B'){
            color = 'rgb(186,229,214)' //bay
        }
        if(duty === 'C'){
            color = 'rgb(247,202,202)'//rose quartz
        }
        if(duty === 'D'||duty === 'E'){
            color = 'rgb(203,220,223)'//blue
        }
        if(duty === 'F'){
            color = 'rgb(223,210,223)'//purple
        }
        if(duty === 'G'||duty === 'H'){
            color = 'rgb(239,238,178)'//yellow
        }
    }
    return color
}

On the first submission, eg select August, the repeater shows correct data and the color.

2090×918 57.8 KB

On second submission, eg September, the repeater still shows the data of the previous submission.

2134×898 56.4 KB

If I change order in repeater2_itemReady code by edit the text first and then the box color

export function repeater2_itemReady($item, itemData, index) {
    $item('#datetext').text =itemData.date.toString()
    $item('#offtext').text =itemData.off
    $item('#box0text').text =itemData.box0text
    $item('#box1text').text =itemData.box1text
    $item('#box2text').text =itemData.box2text
    $item('#box3text').text =itemData.box3text
    $item('#box4text').text =itemData.box4text
    
    $item('#box0').style.backgroundColor = boxcolor(itemData.box0duty,itemData.box0mult);
    $item('#box1').style.backgroundColor = boxcolor(itemData.box1duty,itemData.box1mult);
    $item('#box2').style.backgroundColor = boxcolor(itemData.box2duty,itemData.box2mult);
    $item('#box3').style.backgroundColor = boxcolor(itemData.box3duty,itemData.box3mult);
    $item('#box4').style.backgroundColor = boxcolor(itemData.box4duty,itemData.box4mult);
}

The data on second submission will be correct.
However the color of the box in the repeater still use the previous data submission for render.

Any idea how to display both box and text correctly?
ps. This happens on LIVE site only. In editor site everything works fine.

2022×920 48.2 KB

2

Can u use other ID of your data?

If it is the same ID, it can be a issue.

3

It works perfectly after changing to use different IDs.
Thank you.