Infinite Scroll for Grid

[Makoto]

Hi Appery team,

I'm trying to build an app with infinite scroll feature.
By following the following great blog post, I could successfully implement the feature to List, but couldn't implement it to Grid. I know there are some related posts, but I couldn't find the answer.

・How to Build an App with Infinite Scroll
https://blog.appery.io/2015/07/how-to...

I found the following information and code, but I don't know what kind of value do I put to the code.

・We really need an infinite scrolling component/ grid.It has become a standard view on many apps now.
https://getsatisfaction.com/apperyio/...

self.eventsListItems = Apperyio("infinite_wrapper").find("[name=item_wrapper]:not([data-appery-tpl])");

I prepared a very simple grid example as follows. Would you give me a specific example code? What value do I put to the above code (infinite_wrapper and item_wrapper)?

One Grid : mobilegrid_103
Two Image components: mobileimage_108 and mobileimage_109

Thank you in advance!

Regards.

[Serhii Kulibaba]

Hello,

Let's continue the discussion in the ticket #34185

[Makoto]

Hi Serhii,
thank you for reply.

The URL that you gave me today is exactly the same one that I mentioned in the very first mail. So, I'd like to keep conversation here and I'm going to close the ticket #34185 because it's much easier to communicate here.

Thanks.

[Illya Stepanov]

Hi Makoto -

Please check the similar forum thread here:
https://getsatisfaction.com/apperyio/...

[Makoto]

Hi Illya,

thank you for reply.
Would you check this post carefully?
I referred to the forum thread at the beginning of this post in line 10.
I know the thread.
I'm referring to the code that Serhii gave in the thread.
I'm asking because there is no specific sample code in that thread.

Regards.

[Illya Stepanov]

Your link does not work for me. Can you share the implementation that you have in your app as an app public link?

[Makoto]

Hello Illya,

here it is.
https://appery.io/app/mobile-frame?sr...

Thank you!

[Serhii Kulibaba]

1. Add the default value of the variable "dogsInfinite"
   preApperyio.storage.dogsInfinite.set({"limit":12,"skip":0});/pre
   
   1. Please disable all JS code except:
      
      It seems you use the correct JS code for the grid, but some styles, which you change on that page break the app. Please use all styles in the CSS file.

[Makoto]

Hello Serhii,

thank you for your reply.

By following the Appery blog instruction, I've already added the default value of the variable "dogsInfinite".

https://blog.appery.io/2015/07/how-to...

As for styles, I follow your advice and create a CSS file.

But, I think the problem is somewhere in the following two JavaScript files because the loading problem occurs after executing dogsListInfinite.

1. The JavaScript BEFORE Success Event mapping

   self.dogsScrollTop = jQuery(window).scrollTop();
   if(data.length == 0){
   var infiniteList = Apperyio.storage.dogsInfinite.get();
   infiniteList.noMoreItems = "true";

   Apperyio.storage.dogsInfinite.set(infiniteList);
   };
   self.dogsListItems = Apperyio("List_mobilegrid_94_wrapper").find("[name=mobilegrid_94]:not([data-appery-tpl)");
   dogsListItems.detach();

2. The JavaScript AFTER Success Event mapping

   Apperyio("mobilegrid_94").prepend(self.dogsListItems);
   jQuery(window).scrollTop(self.dogsScrollTop);

   Is there anything wrong with the above code?

   Thank you.

[Serhii Kulibaba]

It works fine for me: uploads new items to the page.
What exactly doesn't work for you?