Infinite scroll does not work on scroll

This forum contains topics that were moved from Get Satisfaction
Hawk
Posts: 0
Joined: Mon Aug 04, 2014 11:23 am

Infinite scroll does not work on scroll

Post by Hawk »

Hi,

I'm trying to implement infinite scroll explained here (https://blog.appery.io/2015/07/how-to...).
I followed all the steps. I expected to work as follows:
As the limit is set to 10, then first when I navigate to the page, 10 items will be displayed. When I scroll down another 10 will be displayed, starting from the item number 11 (I set skip = 0).

However, when happens is that only first ten are loaded, and when I scroll down, nothing else is loaded. No errors have appeared though.

One thing I've noticed, is when try to scroll while the page is being "displayed" (I mean it is loading but not completely shown), after that when the page is displayed, all items (20) are displayed together. It is like the event triggered on show+srcoll together!!

As in the your tutorial, I have one global JS file with the JS:
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)&#46;scroll(onScrollHandler);
});/pre

and I have one page load event with the following JS:
prevar onScrollBottom = function(){
console&#46;log('test');
var infiniteList = Apperyio&#46;storage&#46;dogsInfinite&#46;get();

Code: Select all

 if(infiniteList&#46;noMoreItems == "true") 
    return;         

 infiniteList&#46;skip = parseInt(infiniteList&#46;skip) + parseInt(infiniteList&#46;limit) + ""; 
 Apperyio&#46;storage&#46;dogsInfinite&#46;set(infiniteList); 
 dogsListInfinite&#46;execute(); 

};

jQuery(window)&#46;bind("onScrollBottom", onScrollBottom);/pre

And two page show events, first with JS:
pre&#47;&#47;Here you can set the needed "limit"&#46; Currently it's set to 6&#46;
var infiniteList = {limit: "10", skip: "0", noMoreItems: undefined};
Apperyio&#46;storage&#46;dogsInfinite&#46;set(infiniteList);
console&#46;log(infiniteList);/pre

And the second is invoking the service codedogsListInfinite/code

In addition, on the service success, I have the following JS before the mapping:
preself&#46;dogsScrollTop = jQuery(window)&#46;scrollTop();

if(data&#46;length == 0){
var infiniteList = Apperyio&#46;storage&#46;dogsInfinite&#46;get();
infiniteList&#46;noMoreItems = "true";

Code: Select all

 Apperyio&#46;storage&#46;dogsInfinite&#46;set(infiniteList); 

};

&#47;&#47;Where "infinite_list" is your list component name&#46;
self&#46;dogsListItems = Apperyio("infinite_list")&#46;find("li:not([data-appery-tpl])");

dogsListItems&#46;detach();/pre

And the following JS after the mapping:
pre&#47;&#47;Where "infinite_list" is your list component name&#46;
Apperyio("infinite_list")&#46;prepend(self&#46;dogsListItems);
jQuery(window)&#46;scrollTop(self&#46;dogsScrollTop);/pre

For its worth, my App page, is not the first page in the App. And the console log that displays codescrollBottom/code value is only showing in the home page and not in the one I have list in it.

Thank you for your help

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Infinite scroll does not work on scroll

Post by Yurii Orishchuk »

Hi Hawk,

Please try to replace your "page show" event handler

pre

&#47;&#47;Here you can set the needed "limit"&#46; Currently it's set to 6&#46;
var infiniteList = {limit: "10", skip: "0", noMoreItems: undefined};
Apperyio&#46;storage&#46;dogsInfinite&#46;set(infiniteList);
console&#46;log(infiniteList);

/pre

With following:

pre

&#47;&#47;Here you can set the needed "limit"&#46; Currently it's set to 6&#46;
var infiniteList = {limit: "10", skip: "0", noMoreItems: undefined};
Apperyio&#46;storage&#46;dogsInfinite&#46;set(infiniteList);
console&#46;log(infiniteList);

jQuery( window )&#46;scroll(onScrollHandler);

/pre

Regards

Hawk
Posts: 0
Joined: Mon Aug 04, 2014 11:23 am

Infinite scroll does not work on scroll

Post by Hawk »

Hi Yurii,

I tried that. It did not help. Same behavior. It either displays 10 and when I scroll down it does not display anything else, or it display all the items at once.
There is something I mentioned in my question and I feel it has to do with the problem. Unlike the tutorial, I'm implementing infinite scroll in different page (not first page in the App):

I run the App, and first page is displayed (not infinite scroll page). When I scroll on this first page, I can see the values of codeconsole&#46;log("scrollBottom = " + scrollBottom);/code from the global JS is changing. However, when I navigate to the infinite scroll, on that page when I scroll, no logs are displayed. Which means the function is not being called I guess, and onScrollBottom is not being triggered?

What make me think this way is, when I scroll down on home page, then I navigate to infinite scroll, it displays all items. In contrast, when I do not scroll on home page, then I navigate to infinite scroll page, it only displays 10 items. It is somehow affected by scrolling on home page and not the targeted page!

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Infinite scroll does not work on scroll

Post by Yurii Orishchuk »

Hi Hawk,

Solution above should fix this problem(with different start page).

Please show us your app public link and describe steps to reproduce this problem in your app.

Regards.

Hawk
Posts: 0
Joined: Mon Aug 04, 2014 11:23 am

Infinite scroll does not work on scroll

Post by Hawk »

Hi Yurii,

App public link: http://appery.io/app/mobile-frame?src...

App name: Push Notification Dev

Navigation: Home page - click infinite scroll button - will take to the targeted page.

If you scroll down in home page and then click on infinite scroll button, infinite scroll page will display all the items (19 items) without any scroll. If you do not scroll down on home page and you click on infinite scroll button, infinite scroll page will display 10 items only. Even if you scroll down, it will not display more items.

Thanks,

Josh White
Posts: 0
Joined: Tue Aug 18, 2015 3:44 am

Infinite scroll does not work on scroll

Post by Josh White »

I'm having a similar issue to this. I followed the tutorial and got infinite scrolling working on the home page, but when I click a button to navigate to another page and then click the back button to go back to the home page the infinite scroll no longer works. It's like the scroll event is no longer bound. It isn't firing. Any ideas?

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Infinite scroll does not work on scroll

Post by Yurii Orishchuk »

Hi Hawk,

Please check your app.

Josh,

please use following JS code in "page show" event:

precode

&#47;&#47;Here you can set the needed "limit"&#46; Currently it's set to 6&#46;
var infiniteList = {limit: "10", skip: "0", noMoreItems: undefined};
Apperyio&#46;storage&#46;dogsInfinite&#46;set(infiniteList);
console&#46;log(infiniteList);

window&#46;setTimeout( function(){
jQuery(window)&#46;scroll(onScrollHandler);
},

100);

/code/pre

Regards

Hawk
Posts: 0
Joined: Mon Aug 04, 2014 11:23 am

Infinite scroll does not work on scroll

Post by Hawk »

This worked for me after adding setTimeout. Thanks

mansour
Posts: 0
Joined: Wed May 25, 2016 4:40 pm

Infinite scroll does not work on scroll

Post by mansour »

Hi, am trying the same thing and following the same documentation. but i am not able to get the result.
can you please have a look. this is my app
http://appery.io/app/view/b550fb05-d8...

Just to recap:
I am trying to build an app with infine scroll. i followed exactly the same example here
https://blog.appery.io/2015/07/how-to...

the application is running with no error or worning
but i am not getting the function that i am looking for. more specificly:

  1. the list did not get appended (prepend) correctly. every time the application fetch the 12 record, it hide the previous record from the list. please have a look.

    i am going to enable the ability to change code if it help you to find the issue faster.

    many thanks

mansour
Posts: 0
Joined: Wed May 25, 2016 4:40 pm

Infinite scroll does not work on scroll

Post by mansour »

please ignore my comment as i got the answer from another thread. many thanks.

Post Reply