My page code to truncate text being displayed in a repeater was being overwritten from the dataset. setTimeOut of 50ms seems to solve the problem. But is this not a recommended solution?
My repeater is connected to a dataset that is filtered by another dataset. I set up my code as follows to avoid mis-timing, because the mistiming was clear when I did not deeply nest all the other onReady functions inside the first datasetA onReady():
$w.onReady …
$w(“#datasetA).onReady … //the dataset used to filter datasetB
$w(”#datasetB).onReady …
$w(“#repeater”).onItemReady …
//my code to extract substring from too-long text
setTimeout(function(){
$item(‘#myTitleText’).text = substring;;
},50);
});
});
});
})
But without the setTimeout, my substring substitution would be overwritten with the original source text when I used a link on the page to view another page and then clicked back to my page. (Or when I just refreshed the page.)
Would value any views on these questions :
Do I need to nest subsequent dataset onReady() operations inside the onReady of the primary dataset that filters the other datasets? Or does the dependent filtered dataset onReady already account for the primary dataset being “ready”?
Is setTimeOut the appropriate way to time my page-side truncation of text so it is not overwritten from the source dataset? Or is the problem in the way I have set this up? (I wish to link the repeater to the dataset, including the pagination function it provides. So I’m not inclined to “do it all” in Velo code.)
Thank you for clarifying the onReady relationships. But if setTimeout is not recommended, what is the reason? And what is the preferred alternative? Using the code you outline without the timeout, the timing is unreliable and my substring is overwritten .
Again, thank you for the help!
@russian-dima Thanks V-N for engaging this issue with me. I recognize the need to manage asynchronous functions, which is exactly the purpose of nesting the onReady functions. First the primary (filtering) dataset, then the content dataset, then the repeater displaying the content, then the edit to the text element.
Your conceptual workflow seems to assume that all the operations are being conducted through my code. But there is a separate Wix system asynchronous operation functioning on the page, which is the direct connection between repeater elements and the content dataset. My expectation was that the repeater onReady would place my edit after the repeater is populated. But it doesn’t under all circumstances, so I don’t see how to control that system function’s timing, which seems to me the source of the overwrite problem. So I am slowing down my edit step to allow execution of the system operation of writing to the repeater before executing the edit.
What alternative to the setTimeout would you recommend, other than populating the repeaters all through my own code rather than using dataset connections to the repeater? If I don’t have another alternative, then how should I mitigate any downsides of using the setTimeout?
Please describe in a simple descriotion the flow of your project.
Step by step.
For example…
-i have to databases…
DATABASE-A & DATABASE-B
-both are connected to datasets…
DATABASE-A connected with DATASET-A (normal dataset)
DATABASE-B connected with DATASET-B (dynamic dataset).
-i have also a repeater connected to…
-when i click on xxxx-button the following should happen…
and so on…
Sure. Thank you for looking deeply at this. I will add detail to my original question that outlines the situation, which is a simple operation.
I have a page with repeater-B that is connected to Dataset-B (which happens on this page to be linked with the Posts collection–but in other similar cases is other collections.)
Dataset-B is filtered by a field in Dataset-A
The layout of items in repeater-B requires the number of characters in some text fields in Dataset-B to be truncated to a max length. So my code checks the length of each such field of each item, and if it exceeds maximum length, then extracts substring of max length and sets the text value of the corresponding repeater-B element for that item to that substring value.
The problem–it seems to me-- is that the repeater.onReady asynch function does not appear to wait for the repeater to actually be populated, so my edit is happening before the Wix system operation finishes automatically populating repeater-B items through its connection with Dataset-B–therefore my edits are being overwritten. Using setTimeout has prevented that by delaying my edit operation for the item, allowing the repeater to be populated before the edit occurs.
@russian-dima Here is the code for truncating text that exceeds max length. Dataset-A has a filter set manually in the dataset properties. Dataset-B has filter in its properties linked to Dataset-A value. Repeater-B elements linked to Dataset-B in repeater properties. The substring edit is sometimes overwritten when the setTimeout is not included in the code.
$w.onReady(function () {
$w("#datasetA").onReady(() => {
// other page code related just to datasetA
//my original code had the datasetB onReady function here
$w("#repeaterB").onItemReady(($item, itemData, index) => {
if(itemData.title.length > 50) {
setTimeout(function(){
$item(#textNewsTitle").text = itemData.title.substring(0, 50) + " ...";
},50);
}
});
});
// other page code
})
Dataset-A has a filter set manually in the dataset properties. Dataset-B has filter in its properties linked to Dataset-A value. Repeater-B elements linked to Dataset-B in repeater properties.
CODE mixed with PROPERTIES .
Everything will just work properly when doing every step in CODE-MODE and not in MIXED MODE.
In your case, perhaps setTimeout is the last opertunity.
@russian-dima Ok, thanks V-N. That confirms my earlier statement noting that a solution is to write all the repeater content and control through my own code, which is not an option for my purposes.
I’ve looked unsuccessfully to find general pitfalls about setTimeout. For this page, if the timeout is not long enough under unusual circumstances , the repeater item layout looks a little messy because the text is too long. But are there other more serious risks?
So my follow up question then (and now) is what are any major downsides of using the setTimeout in this case where “mixed mode” is employed, and how are those best mitigated ? (e.g., I 've tested with the timeout longer–at least up to 100ms–without visible display issues.)
Thanks again for your assessment after looking at this closely!
At first you perhaps won’t be able to understand why i showed you this link, but after readig all the related posts to the shown “interactive-example”, perhaps you will understand why all this…
