As you can see in the picture, I have only one array element in the selected array, but still the row repeat region showing old data, how can I fix this ?
Edit: The server connect api is updating automatically with socket refresh, that’s when the bug is coming. If the page is refreshed then its working correctly. And the server connect is in the layout and not in the content page. The “Repeat children” component was working correctly, but could not use it due to design flaws
Has anybody got this bug ?
Sorry derick, it’s a bit unclear from your screenshots what are you trying to report as a problem.
Please check the highlighted red rectangle and the array data in the console. The array has single item and row repeat is showing two items.
So when does this happen? What actions do you perform on the page?
The data is coming from the server connect api. This api is refreshed with socket. When the server action is refreshed this happens.
The scenario is the other socket connected user logs out, which causes the data to refresh and the array becomes empty. But the design does not update here. And when the same user logs in the same item is added to array but the row is reading it as second element. Even though the response of the api is single element.
Are you sure you have not missed that step:
adding the dynamic attribute for live data refresh to the server connect component on the page?
The data I am getting the server action is perfect here.
Please check this image again
There are no online sellers right now, the array is empty
Above image, you can see the code of row repeat.
could you post or send the html of the page with the repeater on it
<section class="pt-lg-7 pt-5">
<div class="row">
<div class="col-12">
<div class="card">
<div class="row overflow-scroll hide-scrollbar" is="dmx-repeat" id="repeat1" dmx-bind:repeat="fetch_online_sellers.data.query" key="id">
<div class="col-lg-1 col-md-2 col-sm-3 col-4 text-center" dmx-show="id">
<p class="w-100 mb-0 text-sm d-inline-block text-truncate">{{seller_profession_tag}}</p>
<a href="javascript:;" class="avatar avatar-lg rounded-circle border border-primary position-relative">
<img alt="Image placeholder" class="p-1" dmx-bind:src="'/api/get/seller_profile/'+seller_profile_image">
<span class="custom-badge"></span>
</a>
<p class="mb-0 text-sm">{{seller_display_name}}</p>
</div>
</div>
</div>
</div>
</div>
</section>
One more thing, there are some functions that are considered as an array repeat item
I had to add dmx-show event to hide these elements
Any solution for this ?
Could you check what dmx.parse("fetch_online_sellers.data.query") returns. I don’t see anything strange in the html. Not sure where those functions come from, they look like formatter functions.
This data is sent in the image above.
Any solution found this ?
The functions in the repeat you can only get that if the expression is wrong, for example if you use just fetch_online_sellers instead of fetch_online_sellers.data.query. Isn’t there some leftover html somewhere, the first item is always the same and is even there while there are no records in the result.
In the repeat use $key and {{json($value)}}, that should printout the key and value of the repeating item, that could help for debugging it.
Here you said there was nothing wrong with html ?
Here I used the same html code, except the value shown here is {{$value}}, which is the object of an entire item. This was to show you the extra items I was getting from the array. I have also removed the dmx-show attribute to display these functions, because in the previous pictures I have used dmx-show dynamic attribute to hide the unwanted elements.
