Infinite Scroll

[Joe Sharples]

I've followed the tutorial on here but i cant get it to work.
https://blog.appery.io/2015/07/how-to...

my JS asset is:
pre
var onScrollHandler = function(){

window.clearTimeout(self.scrollTimeout);

var onDelay = function(){
var scrollTop = jQuery(window).scrollTop();
var windowHeight = jQuery(window).height();
var scrollHeight = jQuery(document).height();
var scrollBottom = scrollHeight - scrollTop - windowHeight;

Code: Select all

console.log("scrollBottom = " + scrollBottom); 

if(scrollBottom < 50) 
   jQuery(window)&#46;trigger("onScrollBottom"); 
}; 
self&#46;scrollTimeout = window&#46;setTimeout(onDelay, 500); 

};

$(function() {
jQuery(window).scroll(onScrollHandler);
});
/pre

JS on page load:
pre
var onScrollBottom = function(){

Code: Select all

 var infiniteList = Apperyio.storage.homeInfinite.get(); 

 if(infiniteList.noMoreItems == "true") 
    return;         

 infiniteList.skip = parseInt(infiniteList.skip) + parseInt(infiniteList.limit) + ""; 
 Apperyio.storage.homeInfinite.set(infiniteList); 
 listReviews.execute(); 

};

jQuery(window).bind("onScrollBottom", onScrollBottom);
/pre

JS on page show:
pre

$(function() {
jQuery(window).scroll(onScrollHandler);
});

//Here you can set the needed "limit". Currently it's set to 12.
var infiniteList = {limit: "5", skip: "0", noMoreItems: undefined};
Apperyio.storage.homeInfinite.set(infiniteList);
jQuery( window ).scroll(onScrollHandler);
/pre

I also invoke listReviews service on page show.

on service success JS (but before the mapping):
pre
self.homeScrollTop = jQuery(window).scrollTop();

if(data.length == 0){
var infiniteList = Apperyio.storage.homeInfinite.get();
infiniteList.noMoreItems = "true";

Code: Select all

 Apperyio.storage.homeInfinite.set(infiniteList); 

};

//Where "infinite_list" is your list component name.
self.homeListItems = Apperyio("postList_home").find("li:not([data-appery-tpl])");

homeListItems.detach();
/pre

on service success JS (after mapping):
pre
//Where "infinite_list" is your list component name.
Apperyio("postList_home").prepend(self.homeListItems);
jQuery(window).scrollTop(self.homeScrollTop);
/pre

The limit and skip is set on page show and the service is invoked according to the limit. but when i scroll to the bottom nothing happens.

I had a look at the demo...
http://infinitescroll.app.appery.io/s...
... and every time i scroll here the scrollBottom is shown in the console log.

But when I scroll on my app the scrollBottom is not shown in the console.log. suggesting that the scroll function is not being recognised.

any suggestions?

thank you

[Serhii Kulibaba]

Hello,
We are very sorry, but debug your custom code is something outside the scope (https://docs.appery.io/docs/general-s...) of our standard support.

Please check if there are any errors in the browser console. You can learn here: https://docs.appery.io/docs/using-bro... how to open the console.

[Joe Sharples]

But it's not really custom code, the only changes to the code from the tutorial is the name of the service and the storage variable.

Ok, I have deleted all the code above and replaced it with the exact same code in the tutorial. but instead i have changed the storage variable and service name to match the tutorial... is there anything you can do to help now?

I'm receiving no errors in my console

[Joe Sharples]

This isn't really custom code- it's the code in the tutorial with only service names and local storage names changed.

Either way i have isolated the problem...

Replace the JS on page show:

jQuery(window).scroll(onScrollHandler);

with:

window.setTimeout( function(){
jQuery(window).scroll(onScrollHandler);
},100);

I suggest you change this on the tutorial so that others don't encounter the same problem.

[Serhii Kulibaba]

Thank you for update! Glad to hear things are sorted out now!