Infinite scroll triggering too early

Melissa Chananie

#198619

I inherited this site from another developer and do not usually work in wordpress or php.

2 scenarios:

#1: Infinite scroll container is specified: results will quickly load (as many as I specify per page,) it will hit the infinite scroll trigger at the bottom, trigger loading icon, and then nothing more comes back.

#2: No infinite scroll container is specified: Infinite scroll will load all results at the normal rate per page ie) 7 results per page, but the trigger happens at almost every scroll, even when I’m scrolling toward the top of the page. I think it may be a problem with how the containers are specified and maybe a naming conflict. I’ve tried many different values for offset but it doesn’t seem to make a difference. I saw others requesting a ‘load more results’ button and wondered if that was possible yet?

I’m also open to trying it with pagination, but when I try to implement, it seems like its trying to do some string parsing with the url which initially does not have a query string so I get cannot read property split() of undefined . thanks so much for your insight!

Here are the two files this is happening in:

<?php
/**
 * The template used for displaying page content for the Big Green Database
 *
 * @package red_underscores
 */

// Determine which resource page this is

$page_id = get_the_ID();
$page_name = '';

if ( $page_id == 12614) {
    $page_name = 'garden'; // Your Edible School Garden (cat = garden-skills-resources)
    $lessons_id = 12612;
    $sf_form_id = 14035;
}
if ( $page_id == 12612 ) {
    $page_name = 'lessons'; // Garden Lessons + Curriculum (cat = curriculum-lessons-activities)
    $garden_id = 12614;
    $sf_form_id = 14036;
}

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <?php 

    $featured = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
    $overlay_background = "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0))";

    ?>

    <div class="featured main" style="background: <?php echo $overlay_background ?>, url('<?php echo $featured[0] ?>'); min-height: 720px;">
        <div class="grid-container featured-content">
            <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
        </div>
    </div><!-- featured -->

    <div class="grid-container">
        <div class="entry-content grid-60 prefix-20 tablet-grid-90 tablet-prefix-5">
            <?php the_content(); ?>
        </div><!-- .entry-content -->
    </div>

            
    <?php // Toggle between pages ?>

    <div class="grid-container">

    <?php

    ?>
    </div>
    
    <?php 
    // Display at most three highlighted resources from this main category
    $main_resource_category = '';
    switch ($page_name) {
        case 'lessons':
            $main_resource_category = 'curriculum-lessons-activities';
            break;
        case 'garden':
            $main_resource_category = 'garden-skills-resources';
            break;
    }

    $args = array(
        'post_type' => 'resource',
        'posts_per_page' => 3,
        'tax_query' => array(
            array(
                'taxonomy' => 'resource-category',
                'field' => 'slug',
                'terms' => $main_resource_category
            )
        ),
       
    );

        // Display remaining results (not highlighted) via search & filter

    ?>

    <div class="sf-results-container">
      
        <div class="grid-container">
            <?php echo do_shortcode( '[searchandfilter id="'.$sf_form_id.'"]' ); ?>
        </div>

        <div class="dotted-border"></div>

        <div class="grid-container grid-of-posts resources">

            <div class="grid-33 push-66 sf-pop-sidebar">
                <h3>Popular Collections:</h3>
                <div class="dotted-border"></div>
                <div id="popular-collections-remote-control"></div>
            </div>

            <div class="grid-66 pull-33 two-col-results search-filter-results-list">
                <?php echo do_shortcode( '[searchandfilter id="'.$sf_form_id.'" show="results"]' ); ?>
            </div>
            <div class="pagination">
        Found <?php echo $query->found_posts; ?> Results<br />
        Page <?php echo $query->query['paged']; ?> of <?php echo $query->max_num_pages; ?><br />
        <?php wp_pagenavi(); ?>
        <?php
            /* example code for using the wp_pagenavi plugin */
            if (function_exists('wp_pagenavi'))
            {
                echo "<br />";
                wp_pagenavi( array( 'query' => $query ) );
            } 
        ?>
    </div>
          </div>

        </div>

    </div>

    <script>

    (function($) {
        // Load again after ajax to work after filtering results
        $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
            // Place search and filter boxes within grid
            $("li.sf-field-post-meta-resource_subjects, li.sf-field-taxonomy-grade-level, li.sf-field-search, li.sf-field-taxonomy-resource-category, li.sf-field-post-meta-content_source, li.sf-field-post-meta-grade_level_range, li.sf-field-submit").addClass('grid-33 tablet-grid-50 mobile-grid-100');
        });
        $(document).ready(function() {

            // Get list of labels and inputs in .sf-field-post-meta-popular_collection_tag
            
            var labels = $('.sf-field-post-meta-popular_collection').find('label');
            var inputs = $('.sf-field-post-meta-popular_collection').find('input');
            
            // Append them to the #popular-collections-remote-control div
            for ( var i = 0; i < labels.length; i++ ) {

                var selectedClass = '';

                // Apply selected class to anything that's selected on load
                if(inputs[i].checked) {
                    selectedClass = 'selected';
                }

                $('#popular-collections-remote-control')
                    .append( '<div class="target '+ selectedClass +'" id="' + inputs[i].value + '">' + labels[ i ].innerHTML + '</div><div class="dotted-border"></div>');
            }

            // Set up remote control clicks
            $('#popular-collections-remote-control .target').click(function() {
                var targetValue = $(this).attr('id');
                $(this).toggleClass('selected');
                $(':checkbox[value=' + targetValue + ']').trigger('click');
            });

            // Place search and filter boxes within grid
            $("li.sf-field-post-meta-resource_subjects, li.sf-field-taxonomy-grade-level, li.sf-field-search, li.sf-field-taxonomy-resource-category, li.sf-field-post-meta-content_source, li.sf-field-post-meta-grade_level_range, li.sf-field-submit").addClass('grid-33 tablet-grid-50 mobile-grid-100');
        });
    })(jQuery);

    </script>

	<footer class="entry-footer">
		<?php //edit_post_link( esc_html__( 'Edit', 'red_underscores' ), '<span class="edit-link">', '</span>' ); ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-## -->

<?php
/**
 * Search & Filter Pro 
 *
 * Template for Filter Resources - Garden
 *
 */

if ( $query->have_posts() )
{
    ?>
    <?php
        while ($query->have_posts())
        {
            $query->the_post();

            ?>
            <div class="search-filter-result-item grid-50 tablet-grid-50 mobile-grid-100">
            <?php
            
            get_template_part( 'template-parts/content', 'resource_overview' );
        
            ?></div><?php
        }
    ?>
<?php
}
else
{
    ?>
    <div class='search-filter-results-list end-of-results' data-search-filter-action='infinite-scroll-end'>
    <p>no more results</p>
    </div>
    <?php
}
?>

Add New Note to this Reply

Trevor Moderator

#198667

Is the form set to use the Shortcode Display Results method? If it is, then the results.php template file would need a different structure if you want to use pagination and not infinite scroll. You can see examples in our plugin templates sub-folder. The results.php contained there (these files should not be edited) has the pagination type code, and there is an infinite scroll version, with contents as you would expect.

We do not offer a Load More button, yet (probably coming in V3).

The second of the files you have shown is missing the complete structure that it should have, here is what the default infinite scroll template looks like (without the comments section at the top):

<?php
if ( $query->have_posts() )
{
	?>
	
	Found <?php echo $query->found_posts; ?> Results<br />
	<div class='search-filter-results-list'>
	<?php
		while ($query->have_posts())
		{
			$query->the_post();
			
			?>
			<div class='search-filter-result-item'>
				<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
				
				<p><br /><?php the_excerpt(); ?></p>
				<?php 
					if ( has_post_thumbnail() ) {
						echo '<p>';
						the_post_thumbnail("small");
						echo '</p>';
					}
				?>
				<p><?php the_category(); ?></p>
				<p><?php the_tags(); ?></p>
				<p><small><?php the_date(); ?></small></p>
				
				<hr />
			</div>
			
			<?php
		}
	?>
	</div>
<?php
}
else
{
	?>
	<div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
		<span>End of Results</span>
	</div>
	<?php
}
?>

Your code is missing this line:

<div class='search-filter-results-list'>

and the closing </div>

Add New Note to this Reply

Melissa Chananie

#198728

Thank you so much for your quick reply! I implemented this and I’m still seeing the same behavior. To be clear, infinite scroll is loading more results but it is triggering too early. I forgot to mention the main issue with the early trigger, which is that each result has a modal attached to it. While the new results are loading, the info modal is unclickable. Since new results load even when scrolling to the top of the page, the entire page is frozen any time you scroll.

Is there a standard offset value to the trigger that you’ve found to be most accurate to firing the trigger at the end of the page?

Regarding pagination: I accidentally left that in the file, but yes saw your implementation. Even when using that exact implementation, I get ‘cannot read property split of undefined’. The code is trying to get query params from the url but they do not exist. It does however show page 1 of 90 or so in the container. Is there anything I need to do to enable query params to show up in the url. I see that the XML request is asking for “paged=2” but it is erroring out before making the request.

I’ve attached the updated file where I was missing a few lines to make sure that’s exactly how it should be. Thanks for you help!

<?php
/**
 * Search & Filter Pro 
 *
 * Template for Filter Resources - Garden
 *
 */

if ( $query->have_posts() )
{
    ?>
    <p>Found <?php echo $query->found_posts; ?> Results</p><br />
    
    <div class='search-filter-results-list'>
    <?php
        while ($query->have_posts())
        {
            $query->the_post();

            ?>
            <div class="search-filter-result-item grid-50 tablet-grid-50 mobile-grid-100">
            <?php
            
            get_template_part( 'template-parts/content', 'resource_overview' );
        
            ?></div><?php
        }
    ?>
    </div>
<?php
}
else
{
    ?>
    <div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'>
    	<span>no more results</span>
    </div>
    <?php
}
?>

Add New Note to this Reply

Melissa Chananie

#198730

My other thought was that maybe the original developers implemented some setting to mask query params and I looked for a plugin that might be doing that but don’t see anything. Thanks again!

Add New Note to this Reply

Melissa Chananie

#198734

Here is a link to the page if you would like to observe: https://biggreen.org/teaching-in-your-garden/edible-school-garden/

Add New Note to this Reply

Trevor Moderator

#198763

This reply has been marked as private.

Add New Note to this Reply

[Author]

Posts