Collapse Load More Button Once All Items Have Been Loaded

Ask the community
,
1

Hello, Me again! :wave:

While I wait for the Next/Prev Page actions for Repeater Connect Buttons, I have added a “Load More” to my repeater pages. This works wonderfully except that the button looks out of place once they’ve all been loaded. Could someone help me figure out how to collapse the button, once all Items from a dataset have been loaded to the page?

I’ve tried a bunch of things, but this is what I thought had made the most sense, yet didn’t work. Once again, I hope I wasn’t too far off. :sweat_smile:

import wixData from 'wix-data';
  
$w.onReady( function() {
$w("#photoData").onReady( () => {

wixData.query("Photo-Library")
 .find()
 .then( (res) => {
  let allItems = res.items;
if (allItems.isVisible) {
	$w("#loadButton").collapse();
    }
  });
  
  });
  });

Thanks in advance for any help! :heart:

2

Hi… I think you should decide that according to the number of photos. a bit like:

$w("#photoData").onReady( () => {

wixData.query("Photo-Library")
 .find().limit(500)
 .then( (res) => {
  let allItems = res.items;
  if (allItems.length === 500) {
	$w("#loadButton").collapse();
  }
});
});
});

Note the use of ‘limit’ as wixData.quey has a default of 50 items (put a large enough number).
And note that ‘items’ is an array, therefore no ‘isVisible’ for it, but ‘length’ should do.

Liran.

3

Thanks for replying Liran!

I had to switch around the order of .find() and .limit() in order for it to do anything. I changed to limit to match the amount of items currently in my database. And what that did was, collapse the load more button without all items loaded, therefore cannot load more than the dataset limit of 6.

4

Are the items connected to a data set?
If so, can you check if getCurrentItemIndex() is equal to the size of database? or maybe to getTotalCount() ?

Liran

5

Hi, I’ve stumbled across your thread while researching the same issue.
Here is the code that i got to work, which is used in a scenario where a dataset is connected to a repeater.
The button shows until all elements in the filter are visible, then hides itself. It is run from the button itself, as well as a few other tabs that refresh the dataset filters.

// Show or hide the 'See More' button based on whether or not there are more results waiting
export function SetSeeMoreButtonDisplay($w)
{
	if($w("#dataset1").getTotalCount() > $w("#repeater1").data.length)
		$w("#btnSeeMore").show();
	else
		$w("#btnSeeMore").hide();
}
6

Hello,

I have added your code - it works for me, thank you.
One more question - I have add filter by categories of my repeater. What should be the code for “load more” button if I would like to hide it when there is the end of the list of exact category?

I mean if “Investment” category has 10 items - the “load more” button should hide at the end of this list, but if “Landing” category has 5 items, the “load more” button should hide after list of 5.

Would be grateful for any advice.

7

Please add a new post with a link to refer back to this old post from 2017 instead of bumping up an old thread from 2017, thank you.