I would like to find a way to update a component on the page when the user scrolls to the bottom.

I have a javascript function that detects when the bottom of the page is reached.

I have a component with a method renderGallery(arg) that queries the database to get some pictures. The default markup of the component calls this method and displays the pictures nicely. The component's method is able to take a parameter arg, if the parameter is equal to 1 it will get the first 30 pictures, if the parameter is equal to 2 it will get the first 60 etc. So all I need is to update the component with the new variable when the bottom of the page is reached.

An alternative idea I had was:

If arg = 1 then output of renderGallery(arg) would be first 30 pics.

if arg = 2 then output of renderGallery(arg) would be pics 30 to 60. (instead of the first 60)

etc.

This would mean I could have a javascript handler which renders the component's default markup and returns it. Then with javascript I could inject it into the page after the previous rendering.

Last updated 9 years ago

There are several ways I know. You can directly use the feature of updating Octobercms component/partial by giving the update parameter in your ajax. Use @# to append to previous list instead of overwriting the whole partial. such as:

data-request-update="'{{ __SELF__ }}::yourpartial': '@#yourcontainer'"

different syntax for javascript ajax

update: {
                    yourpartial:'@#yourcontainer'
                },

Second approach is to call ajax, get the html data in the success clause of your ajax, and then append that data all in jquery.

btw, in your database, avoid hard coding. I suggest the following:

add this add the end of your eloquent SQL:

-> take($pageSize)          
-> skip($pageIndex*$pageSize)
-> orderBy('id','desc') 
->get();

So second time, it will skip 30 records, and loads 30 more items. third time, skips 60 item and will load another 30 items and so on. Make sure it is sorted so unique records are returned each time.

You can pass pageSize as part of your component property (add this to your component property). pageIndex can be passed with ajax data. When outputting your html you can either use hidden elements to show current index, or add the current data-attribute to each element you display. Then you can read the last item's index, and pass that to your ajax.

Last updated 9 years ago