I have a typical dynamic page that loads a specific item based on the URL. The dataset is #dynamicDataset1. A second dataset (#dataset1) on the page is filtered to entries that match the page’s item.
My page displays the related items in a repeater, each having a button.
My question is, what is the best way to make sure all the data connected elements are ready before letting the user do anything?
What happens occasionally is that some data is blank in the onclick handler of a repeater item’s button.
I suspect that the buttons are clickable before all the data items are set in the repeater item, and users are clicking before some data is available to the onclick.
This page works almost all the time. In fact, it only seems to fail sometimes with users in far away time zones (that may have higher latency in waiting for backend functions and data loads).
I am trying the following fix. In Editor, the buttons in each repeater item are set to be hidden on load. Then I set a #dataset1 onReady function that will call forEachItem() on the repeater and to show the buttons only when #dataset1 is ready.
But is that waiting long enough to be sure all the repeater items got their data?
Thanks! You’ve triggered one of my other timing confusions: repeater onItemReady().
From the reference –
Note
When using a dataset to populate the contents of your repeated items, the onItemReady() callback function is triggered before the dataset populates the values of your page elements. Therefore, element values that you set using onItemReady() may be overridden when the dataset is ready. To change the values set by the dataset, use forEachItem inside the datset’s onReady() . For more information, see the forEachItem examples.
Does this mean that onItemReady for a repeater could be running before the datasets are ready?
It does seem to say that enabling the button in onItemReady may make the button clickable before the dataset populates other repeater elements–which is what i suspect my issue is now.
All said, I want to know when that second stage is reached — the repeater item is ready AND any data connected items in the repeater have their data connected.
Is there a good document that lays out all the timings?
I cleaned up my earlier ‘fix’ a bit. The first attempt used a dataset.onReady() to run a repeater.forEachItem() that show()'s each repeater item’s button. The idea being that at the very least the dataset was Ready before the button was ever visible and clickable. I still don’t know if dataset Ready also means the data is finished connecting up in the repeater, or just that it is ready to start connecting to items in the repeater.
I changed the dataset.onReady() set the onClick() callback on the repeater template. This way, the onClick()'s for the repeater buttons aren’t ever defined until the dataset is ready.
(Previously I had the onClick() set in the page code as a function and connected it in the Editor Properties, so onClick() was defined earlier. )
Anyway, I’m going to try to use a set of console.log() calls to see if I can determine in what order everything is loading and is ready. If I learn anything, I’ll let you know!