Repeater onItemReady is supposed to fire for each repeater item. But, it appears to be largely random as to whether the event fires. With some repeaters, the event correctly fires for every item. In many others, it fires for the last item in the unfiltered collection the dataset the repeater is bound to is using, even when that item does not even appear in the dataset, and consequently does not appear in the repeater. In other words, none of the items are generating the event, but a would-be item that the dataset filters out is generating the event, as though it were in the repeater! For some repeaters, the event is randomly skipped for some items. Something as simple as adding an empty stub function that is not even called into the page code can cause this bug to start happening. I have observed this happening with simple pages, consisting of a dataset bound to a collection, and a repeater bound to the dataset, and an onItemReady handler that just logs the index to the console. But with another identical page in the same site, it will work, but if I add other, unrelated, uncalled functions, or other functionality, it breaks as described above. Like this, the onItemReady is unusable, making it virtually impossible to conditionally format the display of an item with code.
Perhaps instead of describing the whole world, you better should add your current working code and some related console-logs, or screenshots, which show your issued situation.
Anybody will be able to help you, without have a look onto your current working (not working) code .
Ok, here is a sample:
$w.onReady(function () {
});
export function repeater1_itemReady($item, itemData, index) {
console.log(index.toString());
}
Repeater is bound to a dataset that filters a collection of 13 items to 5 items. Repeater displays the correct 5 items in preview. So, on the console in preview, expecting to see:
0
1
2
3
4
Instead, seeing:
12
(the index of the last collection item). Repeater displays correctly, but event did not fire for any item, and fired for a nonexistent one.
But in another identical page, same code, it will work. But if I add
function DoFilter() {
}
as an uncalled empty stub, the bug might start happening.
Where are you setting the repeater’s data? Might need to see a bit more code.
As Kyle S. already mentioned (and me too).
Please, just show the related working (not working) code (code-part) as it is.
Typical onItemReady-situation/constalation…
$w.onReady(function () {
$w("#myRepeater").onItemReady( ($item, itemData, index) => {
let repeatedElement = $item("#repeatedElement");
let nonRepeatedElement = $w("#nonRepeatedElement");
let itemDataValue = itemData.someProperty;
$item('#myButtonIDhere).onClick(()=>{
//...somecode here.... for example....
$item('#myButtonIDhere).label = "SELECTED";
});
});
});
So the first thing what you will do is → deleted the EXPORT-FUNCTIONS and work the way provided in my example → putting everything inside onReady().
Second thing what you will do is → you will use more CONSOLE-LOGs to inspect your own CODE and its actions…
$w.onReady(function () {
$w("#myRepeater").onItemReady( ($item, itemData, index) => {
let repeatedElement = $item("#repeatedElement"); console.log("repeatedElement");
let nonRepeatedElement = $w("#nonRepeatedElement"); //console...........
let itemDataValue = itemData.someProperty; console.log("itemDataValue");
console.log("Index: ", index);
console.log("Item-Data: ", itemData);
$item('#myButtonIDhere).onClick(()=>{console.log("Button clicked");
//...somecode here.... for example....
$item('#myButtonIDhere).label = "SELECTED";
});
});
});
Now you will navigate to your CONSOLE and investigate/inspect all the added logs and their outputs. This will give you more insight into the codes actions.
Now try to use the new knowledge to solve your issue by your own.
If you are still not skilled enough to solve it by your own, just ask a further question, with detailed description of your issue.
If your REPEATER is connected to your DATASET, you do not need to CODE for DATASET anymore, because all the DATA of your DB is already included in the —>
“itemData”. The index tells you the row in your DATABASE, where the current selected ITEM can be found.
When working INSIDE → REPEATER → $item
When working OUTSIDE → REPEATER → $w
There is no “more code” to see. The five lines of code I pasted is the entire code of the page (minus the comments the editor adds). All I did was:
-
I created a plain old WIX collection containing the data
-
I dropped a repeater onto the page, and chose to bind it to data, let the editor create a dataset, with the dataset set to that collection.
-
Turned on dev mode, selected the repeater, clicked the repeater’s itemReady event in the event list in the lower right, and clicked + to add the event handler.
-
ONLY in this last step I wrote code, which is the single line console.log(index.toString()); in the event handler the editor created.
This one console log statement shows that the repeater does not reliably fire the itemReady event. Originally, my code was much longer, and had logic similar to what you suggested. I reduced my code down to the above after hours of debugging with console logs revealed that the repeater itemReady event is not being raised for each repeater item.
I’d like to see a live test page, if that’s possible.
Hi Ahmad,
You are right, my answer whas totaly wrong there .
I removed it to avoid confusion.
Hi @cfriederich
Could it be that the code tries to run before the the dataset is loaded correctly?
Try adding $w(“#dataset”).onReady(()=>{
console.log(index.toString());
}
Kind regards,
kristof
I was able to determine the cause. It turns out that the code works in the published site, but not in preview. Repeaters, in the editor, only show 12 items. When you switch to preview, the page does not “start over” it simply adds the additional items if any beyond the 12 the editor shows. This means the itemReady event will only fire for any items beyond the first 12, in preview. My dataset happened to have 13 items, so the event only happened in item 12, not items 0-11.
So basically, any page that uses the itemReady event of a repeater cannot be previewed correctly. The page can only be tested when published. The fix would be for the WIX preview system to simply “start the whole page from scratch” when switching to preview, instead of starting with what the editor shows.
A continuation from what @volkaertskristof mentioned…
What if you refresh the data set?
https://www.wix.com/velo/reference/wix-dataset/dataset/refresh
$w.onReady( () => {
$w("#myDataset").onReady( () => {
$w("#myDataset").refresh()
.then( () => {
console.log("Done refreshing the dataset");
} );
} );
} );
Tried this. Has no effect on previewer behavior in regard to itemReady.
I have sent this issue on to Customer Care for evaluation. They will be in touch with you.