Pagination Breaking how Repeater Retrieves Data

I have a repeater which is connected to a dataset called “Full App Collection Dataset.”

A few fields (app name, description, etc.) are connected directly to the dataset, done via the Wix GUI / drag and drop. They work fine.

There is a rating display which I have connected via Wix Code instead of through the GUI, and that is because I plan to do a few operations on the rating based on input from other datasets. I.e. the rating that is displayed can’t be connected via the GUI to the core rating data, because it will also be affected by regularly updated inputs on other tables, and as far as I can tell the menu doesn’t allow for such operations.

The code I used to do the data connection is here:

$w.onReady(function () {
  $w("#fullAppCollection").onReady( () => {
    $w("#repeater1").forEachItem( ($item, itemData, index) => {
        $item("#ratingsDisplay1").rating = itemData.iOsStoreRating
 // will add in logic here that updates the rating based on other factors
    } );
  } );
} );

The ratings populate correctly when the page first loads here: https://www.syncdhealth.com/database

However, I added a pagination bar, and when you go to another page, the ratings go back to default display of 4 stars (disconnected from the data). Interestingly, when you revisit page 1, the ratings are reset to the default 4 stars as well. However, if you refresh page 1 at this point, it goes back to the correct ratings.

Have played around for quite a bit, but must be missing an important piece of logic on how to organize this to display ratings correctly even with the pagination bar.

Thank you.

1 Like

Tried adding in an onChange event so that the repeater fetches the ratings from the dataset again when pagination changes, but that didn’t work. In fact, this made it so even the initial database page doesn’t load correctly.

$w("#pagination1").onChange( (event) => {
  $w("#fullAppCollection").onReady( () => {
    $w("#repeater1").forEachItem( ($item, itemData, index) => {
        $item("#ratingsDisplay1").rating = itemData.iOsStoreRating
          console.log(itemData)
});

I feel that the problem is that when the page loads, the repeater only grabs the ratings for the apps being displayed as those are the only elements on the page. When you paginate, the page is not being reloaded so the data is not fetched for the new elements appearing.

Two possible solutions I see are 1. make the onReady function re-fire to fetch ratings for new elements each time pagination happens (attempted unsuccessfully above) or 2. make the onReady function grab the ratings for all elements in the repeater (displayed and not displayed) when the page first loads.

Would appreciate some guidance or feedback from someone more experienced with Wix. Thanks.

Hi Mike,

Did you find a way to solve this problem? I have the same issue with a repeater and when switching to the next page a function I have with the dataset on ready is not performing again, I tried both of tour ideas before as well but couldnt make it work properly. For instance I created an on ready function for the repeater that fires my inicial dataset on ready function, however in a very strange manner it does work for all the items displayed but the last one…

Are we missing something with pagination here???

I am also facing the same issue. any concrete solution here? Going to the next page of the repeater clears off all data updated from JS for all repeater items which where displayed initially.

Hello Bubu,

i think it would be better if you would open a new post with new own issue, were you describe detailed your problem.

@russian-dima I don’t, I’ve just come across this exact same problem and it doesn’t seem to be solved. How would opening a new ticket help when I (and most other people with this issue) found this page through google/wix search.
I’ve found at least one other post here from the same month and year as this one, also without a solution. Opening a new post just dilutes the issue and makes it harder to find a solution, does it not???

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;

Well done.

One tip for future coding.

I also like short coded VARIABLEs and DECLARATIONS, but do not make them to short, this could make you troubles in bigger complexe codes.

What do i mean?

$w("#productsView").onItemReady( ($i, $iD, index) => {
   set_repeater_values($i, $iD, index);
   $i('#addBasket').onClick( addToBasket($iD, $i) );
});

A little bit toooooooo short.

$i, $iD
$w("#productsView").onItemReady( ($item, $itemData, index)

or at least

$w("#productsView").onItemReady( ($item, $iData, index)