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")
}
1 Like
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.
Hi @beyondobediencetrain , 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));
} );
});
}
Hi Charles, some of Wix’s code is still really opaque to me, so I can’t say for sure, but I would guess one of two things is happening. Either the onCurrentIndexChanged trigger isn’t actually getting called, or, (I’d guess more likely), it’s calling and running the populateCalculatedFields function before the repeater actually gets and fills in the updated data. I think that would lead to the result that you’re getting. I would suggest troubleshooting with a console.log in each function to figure out timing. You can add a console log in an itemReady to see which is happening first. For reference, in case it helps, the code I use in this case is:
export function repeater2_itemReady($item, itemData, index) {
Format($item, itemData, index);
}
Also, if you’re not using it already, I find the Site Events tool is sometimes better for debugging than the standard console. You can find that on the Wix Dashboard under settings>production tools> site monitoring, if memory serves.
Hope that helps and happy to try and take another look if it doesn’t.
Best,
Justin
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;