Infinite Scroll not working

Anonymous

#199441

Infinite scroll isn’t working. I changed the selector and it worked for a little bit, but I just checked today and it’s not working again. I’m using a Genesis theme. Can anyone help me figure out how to resolve this?

Trevor

#199469

Are you able to send me a live link/URL to your search page so I can take a look? A screenshot of the settings for the form’s Display Results settings tab would also be useful (you need to upload the image to a sharing site and give me the link).

Anonymous

#199624

This reply has been marked as private.

Trevor

#199632

I think I can see the issue.

The HTML around the results looks like this:

<div class="recipe-container">
    <main class="content" id="genesis-content">
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <div class="archive-pagination pagination">...</div>
    </main>
</div>

The pagination is inside what you have defined as the Infinite Scroll container (#genesis-content).

Ideally, I would have it structered like this:

<main class="content" id="genesis-content">
    <div class="recipe-container">
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
        <article class="...">...</article>
    </div>
    <div class="archive-pagination pagination">...</div>
</main>

where the Ajax container would be #genesis-content

the post selector would be article

the Infinite Scroll container would be .recipe-container

Does that make sense? Hopefully, you have enough control over the template to be able to make these changes.

Anonymous

#199673

This reply has been marked as private.

Trevor

#199679

This reply has been marked as private.

Anonymous

#199681

Yay, that did it! Thanks! Is it possible to only hide the pagination after infinite scroll activates?

Trevor

#199683

It would be possible, yes. You would need to code some JavaScript, but the bones of it would look like this:

(function ( $ ) {
	
	"use strict";
	
	//detects the start of an ajax request being made
	$(document).on("sf:ajaxstart", ".searchandfilter", function(){
	  console.log("ajax start");
	  //hide your pagination
	});
}(jQuery));

Anonymous

#199685

Perfect, thanks so much for your help!

[Author]

Posts