Infinite scroll issue

Trevor

#272087

Ah, good to hear the progress. Do let me know if you resolve it?

Anonymous

#272148

Hi Trevor

No luck here to get the scroll to work on the set container. The container with the scroll has the shortcode results within it.

Does the results have to have the scroll sit within it?

Kind regards

Trevor

#272158

I think so, yes.

Anonymous

#272172

Hi Trevor

added the container with scroll into the results file and still no luck

Seems like the function triggers on window scroll but the scroll we have is on a container with overflow scroll. so not sure if this will work at all with overflow scroll content

Trevor

#272179

That may be so, yes. If you want, I can ask our developer for confirmation?

Anonymous

#272201

Hi Trevor

If you can ask the question does the infinite scroll work on containers with overflow scroll on it instead of the window scroll that would be great.

Kind regards

Ross Moderator

#272292

Hi Rachel

That’s correct, the infinite scroll is triggered when the window scrolls past a certain point in relation to the container – I don’t think this would work if its in a container with overflow.

I’ll stick this on the todo list for further investigation, as it would be nice to work the way you have mentioned – but for now this will not work.

Best

Anonymous

#272429

Hi Ross

Thanks for confirming this.

Can you advise what the Ajax function that is called to load more results so that in this case we hook up the function to be called when we click a button say?

Kind regards

Ross Moderator

#272558

Hi Rachel

Right now our javascript api is a bit limited – we’ll be rewriting this in version 3, but for now you can do it like this:

(function ($) {
	"use strict";

	let searchForm;
	
	$(document).on("sf:init", ".searchandfilter", function(e, data){
		// copy to window so we can access it anywhere
		searchForm = data.object;
		console.log("S&F init", searchForm);
	});
	
	$( 'a' ).on( 'click', function() {
		searchForm.loadMoreResults();
	} );
	
})(jQuery);

To break it down, the first event sf:init is fired for each search form initialised after page load.

We assume in this example there is only one, and we copy that to a variable searchForm.

Then, on the click handler, we trigger a loadMoreResults(); – I’ve added the click event to any a – so you’ll want to change that to your button class / ID I guess…

Best

Anonymous

#272628

Hi Ross

Thanks for the code snipper which i have added to the JS file.

However the click didnt work on either a tags or my class elements, but got it working with this click event

	$(document).on( 'click', '.show-more', function() {
		searchForm.loadMoreResults();
	} );

[Author]

Posts