Skip Navigation

[Resolved] Infinite scroll in a View

This support ticket is created 7 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 2 replies, has 2 voices.

Last updated by Christian Cox 7 years, 1 month ago.

Assisted by: Christian Cox.

Author
Posts
#575978

Hi,
I have a problem with my View.
I need to add an infinite scroll, because I have many records and they contain images, so page load take too much seconds before to be ready.

I tried to set "Pagination enabled with automatic AJAX transition" option in my view. It works well but I have two problems.
The first is that it change page after N seconds. I would like that when I scroll down the first page, the second appear under the first page. So I would like to do something like Facebook's home.

The second problem is when load the second page. In my view I'm using jQuery because I add a slider plugin. That plugin need to be initialize when the document is ready. So, the first 10 results works well, in the next result slider not work because the images are loading after document is ready.

How can I fix those problems?

Thanks,
M.

#575980

UPDATE:
I managed to implement infinite scroll setting option to "Pagination enabled with manual transition and AJAX".

But the problem of jquery slider still remain. I also noticed that the custom shortcode that I had implemented out of my loop view (but inside my view) works only before other pages are load.

M.

#576080

Hi, you can trigger any custom JavaScript with pagination events (or filter change events). Please go to your View Editor and open the JS panel beneath the Loop Output editor. There you will find a button "Front-end events". Click that button and you will be prompted to choose the event you want. Configure the listener and the wizard will insert a JavaScript template where you can add your callback function or code. In the callback, you must use "jQuery" instead of "$" as the namespace for jQuery.