[ISSUE ] Wix not properly rendering computed values?

Hi!

I’ve been using Wix for quite a while now. However, I’ve noticed that when writing ‘dynamic’ code, rendering towards Chrome/Safari is often not in sync with Preview mode. Quite often what I coded works fine in Preview, but does not in Chrome/Safari, even when implemented multiple ways… As you can imagine, this is quite frustrating.

Example:

Preview: https://www.dropbox.com/s/uaxd932l5tq9hru/preview.mov?dl=0 (as expected)
Chrome: https://www.dropbox.com/s/ux1vsppt6goc0fo/live.mov?dl=0 (issue - adding after removal not possible)

How is this possible and how can this be overcome?

OK - so the movies weren’t so clear to me. What do you mean by “not in sync”? Post the URL of your site and explain where and how to see the problem.

Hi @yisrael-wix thanks for picking this up.

First movie shows the result in preview mode. In that movie, you clearly see that adding an item after removal isn’t an issue. In the live mode, however, something goes wrong.

The issue is that both “$item(”#input1")" and “$item(”#ImageX92") are not rendered to the front-end in the live version when following condition is met:

itemData._id === obj._id

See following code block:

function addItem(){

 //$w("#repeater2").collapse();

 //add item to repeater 3
    console.log("Before add:")
    console.log("-----------")
    console.log($w("#repeater4").data); 
    console.log("dbSelection")
    console.log(dbSelection)
 
 if(nbSelections >= 1) {
 var item = "item-"+nbSelections;
 var obj_string = '{"_id":"'+ item +'"}'
 var obj = JSON.parse(obj_string)
        console.log("obj:")
        console.log(obj);
 
        dbSelection.push(obj);
        console.log(dbSelection);
        $w("#repeater4").data = dbSelection;
 
    } else {
        $w("#repeater4").expand();
        $w("#repeater4").data = dbSelection;
 var obj = dbSelection[0];
    }

    console.log("forEachItem")
    $w("#repeater4").forEachItem( ($item, itemData, index) => {
        console.log(index);
        console.log(itemData);
        console.log($item);
        console.log("Other than Id ...")
        console.log($item("#text209"))
 if(itemData._id === obj._id){
            console.log("Id found ...")
            $item("#text209").text = "";
            $item("#input1").value = "";
            $item("#input1").show();
            console.log($item("#input1"))
            $item("#imageX91").hide();
            $item("#imageX92").show();
            $item("#text209").hide();
        }
    });

 //reset filter
 //reset = true;
 //filter();

 //clear input
    $w("#input2").value = "";

}

Site URL:

I believe this is related to a recent performance release. I see the issue in Live and it does not happen when I run it under the older rendering engine. The Editor Preview also currently used the older rendering engine which is why it works fine in Preview.

I am sending this on to QA for further evaluation and so that they can open a ticket for this to be fixed.

In the Editor, which page is it?

@yisrael-wix thanks for that. It’s page 8.

@vervoortyves Yeah - I finally found it.

I’ve already sent this on to QA. Let’s see what they say.

Seems that there is in fact an issue with the Repeater under the new rendering system. It’s still under evaluation to find exactly where the issue is.

Hi @yisrael-wix any idea when a fix could become available? Just want to understand whether this is a priority evaluation or not, as it blocks my ability to thoroughly test what I’ve implemented so far - unfortunately Preview mode does not allow me to test navigation/refreshes well.

I believe this is pretty much a priority as it’s connected to a recent performance release, and I’m sure they want to fix this as soon as possible.

If this is an urgent issue for you, I can have your site reconfigured to run under the older rendering engine. It will fix the problem, but will run slower. Up to you.

@yisrael-wix let’s keep it as is then. If it’s a priority, I would (worst case) expect a fix by end of next week?

@vervoortyves To be honest, I really don’t know when there will be a fix. It is being evaluated and worked on now.

Regardless, I can’t go live with my current implementation, so I’ll work in Preview where possible - thanks for the update.

@yisrael-wix any updates on this one? I came to the conclusion that updating individual repeater items after it has been populated, either manually or via $w(“#repeaterX”).data = … is causing issues. This problem is not new, so I’m not entirely sure if it’s related to a performance update, as I’ve been experiencing these issues before (I’ve posted about them)

If you want to repopulate the Repeater, you can do this:

$w(" #repeaterX “).data = ;
$w(” #repeaterX ").data = newData;

The onItemReady() function is not triggered for existing items that are updated when you set the data property. By first setting to an empty array, it forces the Repeater to completely re-render with the onItemReady() function.

The other option is to call forEachItem() after setting the data property.

@yisrael-wix I know that…

I’m using forEachItem() . That’s where it goes wrong. The correct data is visible in the shadow DOM (or how do you guys call it?), but it’s not being rendered to the screen.

See below another snippet to switch positions of colors within a repeater.

For the record, I’m talking about adjustments to $item(), not itemData .

$w("#button156").onClick((event) => { //switch position of colors in repeater

	//insert items
	var nbItems = $w("#repeater1").data.length;
	var prevIndex = nbItems - 1;
	var bgColor_I;
	var bgColor_N;
	var item
	$w("#repeater1").forEachItem(($item, itemData, index) => {
		console.log(index);
		//item in index 0 moves to index 1 OR item in index N moves to index 0
		console.log(itemData._id);

		if (index === 0) {
			item = "item-" + prevIndex;
			console.log("item:", item);

			//save item
			bgColor_I = $item("#box217").style.backgroundColor;

			//get item
			$w("#repeater1").forItems([item], ($item, itemData, index) => {
				if ($item("#box217").style.backgroundColor !== undefined) {
					bgColor_N = $item("#box217").style.backgroundColor;
					console.log(bgColor_N)
				} else {
					bgColor_N = "rgba(255,255,255,1.0)"
				}
			});

			item = "item-" + index;
			console.log("item:", item);

			//store item at index
			$w("#repeater1").forItems([item], ($item, itemData, index) => {

				console.log(itemData._id);
				console.log($item("#box217"));
				console.log("new_value:")
				console.log(bgColor_N)
				console.log("before:")
				console.log($item("#box217").style.backgroundColor);
				$item("#box217").style.backgroundColor = bgColor_N;
				console.log("after:")
				console.log($item("#box217").style.backgroundColor);
			});


		} else {
			item = "item-" + index;
			console.log("item:", item);

			//save item
			$w("#repeater1").forItems([item], ($item, itemData, index) => {
				bgColor_N = $item("#box217").style.backgroundColor;
			});

			//store item at index
			$item("#box217").style.backgroundColor = bgColor_I

			bgColor_I = bgColor_N;
		}


	});


});

Site URL:
https://thefashionsocietyh.editorx.io/website-11/page-3-mwe

I really don’t know what you’re trying to do in your code. You’ve got two loops inside of the forEachItem() function and I can’t figure out what’s going on. I suspect that you have some sort of issue with your code.

Take a look at the Repeater Dropdown example to see how to handle colors in a repeater. Maybe it’ll help you with your code.

@yisrael-wix See below. I’m trying to build the following:

When the button on the right is clicked, the colors ($item ( “#box217” ). style . backgroundColor) should move up one place to the right, with the exception of the last item, which should come to the front.

In my code I loop over each item, I store the current item, overwrite that item with the previous item and use the stored item in the next iteration.

Also when using forItems on 1 particular index, you are not looping, so no I don’t have two loops within forEachItem().

Anyways, after clicking the button, the computed values (showing the values that the browser is actually using on the rendered website) for the first item of the repeater contain the right data as you can see:

It’s just not properly rendered in the UI itself. The data is present, this should work. Please don’t forget about above issue either, this is the second example within this post. Also in previous posts I have talked about this issue.

I tried to open your site but the link is broken.

@yisrael-wix I believe I figured out a part of the issue.

When updating itemData . _id like:

$w("#repeater1").forEachItem(($item, itemData, index) => {
    console.log(index);
    console.log(itemData._id); //check: before update
    itemData._id = "item-"+index; //adjust _id
    console.log(itemData._id); //check: updated correctly
} );

and subsequently executing:

$w("#repeater1").forEachItem(($item, itemData, index) => {
    console.log(itemData._id); //check: old indices (preview) / new indices (published)
});

itemData does not seem to contain the updated ‘_id’ values (assuming that both functions run synchronously) in preview mode. Hence when I make adjustments in the first loop, these seem to get reflected, but later on, things go wrong because somehow the old ‘_id’ values are still in place.

In the published version, however, I’ve got the right ‘_id’ values in both loops, but then my changes are not reflected in the UI, only in the list of computed values.

Site URL:
https://thefashionsocietyh.editorx.io/website-11/page-3-mwe

Thoughts?