Infinite scrolling

Feature Request
#1

Hi there, altough it is somehow possible, a nice addition would be infinite scrolling

Infinite Scroll (loading data fom server connect) Similar to Lazy Load
Lazy Load with Dynamic Data
#2

what makes you cant do it now?

#3

well ome solutiom is to create a paging and on click to reveal all. What would you suggest?

#4

you can use data view and a button and some inview animations
will that work?

1 Like
#5

have to test it. Thank you

#6

I have done it on this page … is this the kind of thing you are thinking of in theory?

https://lawryk.ca/posters.php

1 Like
#7

Yes it could be, the only difference is that I would like data to load on scroll. In your example the are already loaded and you display them with an inview animation. This of course is very cool and creates the result I am looking for. The only ‘issue’ is that I would prefer to load them from the database while scrolling.

I guess this could be a dynamic server action, equal to ‘success’ , ‘done’, ‘error’. Maybe an ‘onscroll’ server action could work.

Thank you for your demo

1 Like
#8

Good looking site @brad, and very nice looking posters too, quite the designer aren’t you…

1 Like
#9

Thanks @psweb, theatre and theatre posters is my therapy. With out theatre I’d be in a padded room and a jacket with very long sleeves wrapped around me. lol

2 Likes
#10

Your art work @brad, if so well impressed

#11

Thanks @Hyperbytes, live theatre is my second life.

#12

Is there any new development on this feature request? Using paged query, I’m thinking of updating Limit value on scroll. I think it should work but I’m not sure yet how and where could I trigger scroll event to run the server connect.

#13

Update: So I have successfully implement it by updating the current paged query Limit + x number onscroll (when window height = document height). Anyway I still vote this to be implemented directly in Wappler via ui. Cheers :ok_hand:

5 Likes
#14

That is indeed the way to do it. Maybe you can share a guide for other users how this can be done. It will be very helpful.

1 Like
#15

Well, there are few ways to achieve it. Here is one of them;

$( window ) . scroll( function () {
            if ( $( window ) . scrollTop() + $( window ) . height() == $( document ) . height() ) {
                $( "#application_scroll" ) . trigger( "click" );
            }
        } );

then

<button id="application_scroll" dmx-on:click="vessel_paged.load({limit: vessel_paged.data.paged_vessel.limit + 10})"></button>

Perhaps App Connect Browser extension can replace the jquery to run the server connect onscroll when the page reaches % viewport?

2 Likes
Implementation Infinite Scroll
#16

Thanks @transcoderm. This solution works very well.

If this feature were incorporated into Wappler, it would be useful to have an option to include an offset so the scrolling starts a little before the bottom of the page (eg where there are large footers).

#17

How about trying this out. It is simpler and will give you some offset. Just change the amount of - 300 to value that you need.

if ( $( window ).scrollTop() - 300 ) {
                $( "#application_scroll" ).trigger( "click" );
            }

Anyway I still wish this can be done fully with App Connect.

#18

Thanks again. I realise I can tweak the code to get the result. I thought it worth mentioning in case the feature is added to Wappler but doesn’t have this type of flexibility built in.

1 Like
#19

do you perhaps have the page link where you applied this please? So i can see how it works? Thank you

#20

Hello there,

Sorry I don’t have working example to show you but you can now achieve this directly by using appconnect for example:

  1. On your app properties, add dynamic event > dmx-on:wheel
  2. Then create ternary operation browser1.scrollY.position == 1 ? yourserverconnect : null

The steps above will run yourserverconnect whenever Y position equals 1 or at the bottom of the page.

Additionally you can create a variable, then set the variable value from browser1.scrollY.position then on yourserverconnect success, reset the variable value to 0. Use the variable in your ternary operation to check against browser1.scrollY.position.

This example use on wheel event but you can trigger the event by other means for example on value change or update etc. That’s the idea.

5 Likes