Hi all,
I have a dataset connected to a repeater in a dynamic page. The repeater populates the information from the dataset. I then have code that does simple modifications of certain elements within the data. All of that works perfectly. On the first page of the repeater.
I have a pagination bar linked to the dataset. When the "next" button is clicked, the pagination bar advances, as does the repeater. All of the linked elements are updated properly. But none of the data is modified and my code is still working from the first page of the repeater. I've tried a bunch of different variations, and I suspect that I'm missing something regarding variable scope, but can't seem to figure it out. I've included (the pertinent parts) of my code below. Any insight would be appreciated!
Best,
Justin
note: Based on my console logs, the pagination1_change() function has never run. Even though the page changes and I've confirmed that the .currentPage property for the pagination bar is changing. The "click" event functions are being triggered, however.
var myDataset;
$w.onReady(()=>{
$w('#dynamicDataset').onReady(()=>{
myDataset = $w('#sessions');
Large();
});
});
function Large () {
myDataset.onReady(()=>{
$w('#repeater1').forEachItem(($item, itemData, index)=>{
$item("#date").text=itemData.sessionDate.toLocaleDateString();
$item("#session").text = "Session: " + itemData.session + " of " +
itemData.currentPackage; //default modification
if(itemData.completed){ //check for additional data
$item('#group7').expand();
// There are more modifications in here, but no need to clutter the post.
$item('#ratingsInput1').expand();
console.log(itemData.sessionDate);
}
});
});
}
export function pagination1_change(event) {
console.log("change");
myDataset = $w('#sessions');
Large();
}
export function pagination1_click(event) {
console.log("click");
console.log($w('#pagination1').currentPage);
myDataset = $w('#sessions');
$w("#repeater1").onItemReady(()=>{
Large();
});
}
export function pagination1_dblClick(event) {
console.log("double click")
}
I just came across this issue myself! However it turns out that it was due to me using forEachItem on my repeater without onitemready;
I've tested a few solutions and found that adding onItemReady works fine. .previousPage() and NextPage(); break completely;
have posted my test code below in case anyone finds this post like me;
//my initial code $w("#productsData").onReady( (r) => { $w("#productsView").forEachItem( function($i,$iD){ set_repeater_values($i, $iD, index); $i('#wish').onClick( wish_btn_click($iD._id, $i) ); $i('#addBasket').onClick( addToBasket($iD, $i) ); } ); }); //TESTING CODE: //works $w("#productsView").onItemReady( ($i, $iD, index) => { set_repeater_values($i, $iD, index); $i('#addBasket').onClick( addToBasket($iD, $i) ); }); //kind of works - seems to always print the correct index but is tempremental and could run before items are ready; $w("#productsData").onCurrentIndexChanged( (index) => { let newIndex = index; // 3 console.log("on current index change ",{index}); } ); // throws massive error EVERY time - .catch doesn't even get to fire; $w("#productsData").nextPage() .then( (items) => { console.log("on nextpage change ",{items}); } ) .catch( (err) => { console.log("on previouspage change ",{err}); } ); $w("#productsData").previousPage() .then( (items) => { console.log("on previouspage change ",{items}); } ) .catch( (err) => { console.log("on previouspage change ",{err}); } );
I'm aware this may have just been silently fixed in the background since this was posted but it may help save future minutes;
EDIT: I should also point out that using the top two together (forEach and onItemReady) will result in set_repeater_items running twice and double click listeners on the first loaded set when the page loads;
Hi @Justin Baker, I'm using very similar code to format elements in a repeater (see below). But the formats of each element are not showing up when advancing to the next page. Everything looks great on the first page, but clicking the next page in the pagination bar populates the next page correctly, without formats. I tried your "onItemReady()" idea, but that didn't work for me either. Would you be so kind in checking this out for me?
$w.onReady(function () {
$w("#dynamicDataset").onReady(() => {
populateCalculatedFields();
} );
$w("#dynamicDataset").onCurrentIndexChanged( (index) => {
populateCalculatedFields();
} );
} );
function populateCalculatedFields() {
$w("#dynamicDataset").onReady(() => {
$w('#repeater1').forEachItem( ($item, itemData, index) => {
const numberWithCommas = (x) => {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
$item('#priceText').text = "$" + numberWithCommas(parseInt($item('#priceText').text, 10));
} );
});
}
In case anyone ends up having a similar issue, this was, as expected, a simple fix. The formatting needed to be done in an "onItemReady()" event handler.