I’ve seen serval older posts with the opposite of this problem (always false), but I can’t figure it out.
I have a dataset with 4 records and the repeater is set to limit to 2 records per page.
On data ready I call getTotalPageCount() and it outputs 2 pages, as expected. I can also call hasNextPage() and it returns true, again as expected.
This is where things turn weird:
I have a transparent strip below the fold of my page and set the onViewortEnter to call loadMore() which works as expected (the first time). THEN I run a check to see if there are more pages to follow ( hasNextPage() ), if no, collapse the strip so it will quit calling. hasNextPage() always returns true! I started logging the total number of pages and the current page index with every call. The total number of pages stays at 2 (which is correct), but the page index keeps incrementing every time the loadMore() runs.
I’m sure this is a timing/callback issue, but I’ve tried everything. What am I missing/not understanding?
export function stripNextPage_viewportEnter(event) {
console.log($w(“#dbProperties”).getTotalPageCount()); // 2
console.log($w(“#dbProperties”).getCurrentPageIndex()); // Increments on each call
$w("#dbProperties").onReady(() => {
$w("#dbProperties").loadMore()
.then(() => {
console.log("Done loading more data");
$w.onReady(() => {
$w("#dbProperties").onReady(() => {
**let** hasNextPage = $w("#dbProperties").hasNextPage();
console.log(hasNextPage); // always returns true
//If no more pages exist collapse strip
**if** (!hasNextPage) {
$w("#stripNextPage").collapse();
}
});
});
});
});
}
Yes i had the issue with last time too
The reason for that it
It’s not a hasNextDynamicPage()
Note this function is not exist
and this is what you are looking for
For now just use
.getNextDynamicPage()
It will return the URL or an empty string “” if there is no URL
$w(‘#dynamicDataset’) .getNextDynamicPage()
.then(url => {
if(url) {
// has Next dynamic page
} else {
// current page is the last dynamic page
}
})
For example if you have a category dynamic page
let say we have 10 product and limit for the category dynamic dataset is set to 5 (means show 5 product per dynamic page)
then if the user is on the first page
the repeater will show from 1-5 products and
hasNextPage will return true
On the Secod page hasNextPage should be false
and the repeater will show 5-10
Thanks Salman
However, this is not working. I’ve tried it a few ways and still can’t get hasNextDynamicPage() to work for me. Further, I don’t know what URL I would expect to return. This is a single “web page” with a repeater where I’m limiting it to x number of items at a time per “data page”. What would be the URL of the next set of repeater items?
I tried your method and I get a bizarre return:
console.log($w(“#dbProperties”).getNextDynamicPage());
if ($w(“#dbProperties”).getNextDynamicPage().length > 0) {
$w(“#stripNextPage”).expand();
}
Console output is:
[object Object]
{…}
and the object is empty.
Then I tried it this way per the API Reference for that function:
$w(“#dbProperties”).getNextDynamicPage()
.then((next) => {
console.log(next);
if (next) {
$w(“#stripNextPage”).expand();
}
});
It returns null (which actually makes since).
So…this doesn’t seem to fit my situation.
If I have x out y number of items loaded in the repater, I need to know if there are more to load (y-x > 0).
Yes correct i update the sample code
As it’s a promise, so have to use .then or await to resolve the promise
You’ll notice I tried that (see my reply above). It always returns null. I’m confused on what URL you expect to be returned? The data set doesn’t have a URL. I’m trying to identify if there is another “page” of data to load into the repeater.
I am confusing your issue with mine
I have update the code to show some logs
Replace this code and share the logs
$w.onReady(() => {
$w("#stripNextPage").onViewportEnter(async () => {
console.log($w("#dbProperties").getTotalPageCount()); // 2
console.log($w("#dbProperties").getCurrentPageIndex()); // Increments on each call
await $w("#dbProperties").loadMore()
console.log("Done loading more data");
let hasNextPage = $w("#dbProperties").hasNextPage();
console.log({
totalPage : $w("#dbProperties").getTotalPageCount(),
pageSize: $w("#dbProperties").getPageSize(),
count: $w("#dbProperties").getTotalCount(),
hasNextPage
});
//If no more pages exist collapse strip
if (!hasNextPage) {
$w("#stripNextPage").collapse();
}
});
});
Here are the last few occurrences. hasNextPage still comes back at true each time. Also notice how getCurrentPageIndex increments well past the actual 5 pages.
5
5
Done loading more data
{...}
totalPage:
5
pageSize:
6
count:
25
hasNextPage:
true
5
6
Done loading more data
{...}
totalPage:
5
pageSize:
6
count:
25
hasNextPage:
true
5
7
Done loading more data
{...}
totalPage:
5
pageSize:
6
count:
25
hasNextPage:
true
Can confirm this issue still exists. I have the same use case as well.
I’ve tried adding a three-second timeout, but to no avail. hasNextPage () seem to always return true .
Upon further inspection, it seems that the loadMore () will work no matter what (probably due to the fact that hasNextPage () always returns true ).
Here’s an example of the logs. My dataset loads two items at a time. There’s 12 items in total, so there should be six pages.
I have a recursive function that keeps loading as long as hasNextPage () is true . The getTotalPageCount () seems to work fine here.
pageIdx 1 // totalPages 6
hasNextPage true totalsize 12
pageIdx 2 // totalPages 6
hasNextPage true totalsize 12
pageIdx 3 // totalPages 6
hasNextPage true totalsize 12
However, once it reaches page six, where hasNextPage() should return false and the recursion stops, it keeps going.
Note that loadMore() continues to “work” without throwing an error, and the getCurrentPageIndex() is incremented beyond the page count returned by getTotalPageCount().
pageIdx 6 // totalPages 6
hasNextPage true totalsize 12
pageIdx 7 // totalPages 6
hasNextPage true totalsize 12
pageIdx 8 // totalPages 6
hasNextPage true totalsize 12
pageIdx 9 // totalPages 6
hasNextPage true totalsize 12
Workaround
Since we can rely on getCurrentPageIndex () and getTotalPageCount () , this little workaround worked for me.
This is the static event handler I use for the Strip that shows the “Loading…” message (in OP’s case, it’s the transparent Strip).
/**
* @param {object} event
* @param {$w.ColumnStrip} event.target
*/
export async function loadingStrip_viewportEnter(event) {
const dataset = $w("#allOthersDataset");
/** monkeypatch for wix_data.hasNextPage() */
const hasNext = () => dataset.getCurrentPageIndex() < dataset.getTotalPageCount();
if (hasNext()) {
await event.target.expand();
await dataset.loadMore();
// `isVisible` property doesn't seem to work properly either...
// so it will continue to load regardless
event.target.isVisible && loadingStrip_viewportEnter(event);
return;
}
event.target.collapse();
}
Do note that the isVisible property for the Strip doesn’t work properly either, so it will keep loading until it runs out from the first time that the onViewportEnter handler is triggered. Though, it doesn’t really matter too much as the strip will be collapsed eventually once it’s loaded everything. For OP’s case, it probably doesn’t matter either since it’s invisible.
Hope this helps someone.
I confirm I have the exact same issue.
hasNextPage always return true, even if currentPageIndex > totalPageCount