Infinite Scroll not working with WP Query

Anonymous

#221269

Filters are working great, but I’m not getting any results on scroll. Below is the query from my custom template file.

In the plugin settings, Post Result Selector is set to .single-job-result, and Infinite Scroll Container is set to .job-board-results.

<div class="job-board-results-wrapper">
                <div class="mobile-table">
                    <table class="job-board-results grid">
                        <thead>
                            <tr>
                                <th class="title">Title & Organization</th>
                                <th class="function">Job Function</th>
                                <th class="type">Type</th>
                                <th class="date">Date Posted </th>
                            </tr>
                        </thead>
                        <tbody>

                        <?php
                            $args['search_filter_id'] = 220;
                            $query = new WP_Query($args);

                            if($query-> have_posts() ): ?>

                                <?php while($query->have_posts() ): ?>

                                    <?php $query->the_post(); ?>
                                    <?php
                                        $date = get_the_date('M j, Y');
                                        $name = get_the_company_name();
                                        $serviceAreas = get_the_terms( get_the_ID(), 'service_area' );
                                        $jobFunctions = get_the_terms( get_the_ID(), 'job_function' );
                                        $jobType = get_the_terms( get_the_ID(), 'job_type' );
                                    ?>
                                    <tr class="single-job-result">
                                        <td>
                                            <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
                                            <p><?php echo $name; ?></p></td>
                                        <td>
                                            <?php if($jobFunctions): ?>
                                            <ul>
                                                <?php foreach($jobFunctions as $jobFunction):

                                                    ?>
                                                    <li><?php echo $jobFunction->name; ?></li>
                                                <?php endforeach; ?>
                                            </ul>
                                            <?php endif; ?>
                                            </td>
                                        <td><?php echo $jobType[0]->name; ?></td>
                                        <td><?php echo $date; ?></td>
                                    </tr>

                                <?php endwhile;?>
                            <?php else: ?>
                               <div data-search-filter-action='infinite-scroll-end'>
                            <h4>No results found</h4>
                               </div>
                            <?php endif;
                                wp_reset_postdata();
                        ?>
                        </tbody>
                    </table>
                </div>
            </div>

Trevor

#221296

Are you able to send me a live link/URL to your search page so I can take a look?

Anonymous

#221302

This reply has been marked as private.

Anonymous

#221304

This reply has been marked as private.

Trevor

#221364

I can see that both forms there point to the same page in your site as the Results URL. As our Custom method can use many methods to link the form to the results, how did you link them in this case?

Anonymous

#221368

I echoed the shortcode. Full template file below for reference. (Thanks for your responses, by the way.)

<?php
/**
 * Created by PhpStorm.
 * User: jason
 * Date: 9/13/19
 * Time: 9:48 AM
 * Template Name: Job Board
 */
get_header(); ?>
<main id="job-board">
	<section id="job-board-search" class="job-search-menu background-image" style="background-image: url(<?php the_field('search_form_background_image'); ?>);">
		<div class="site-container narrow">
			<fieldset class="form big">
				<?php echo do_shortcode('[searchandfilter id="218"]'); ?>
			</fieldset>
		</div>
	</section>
	<section class="main" id="jobs">
		<div class="site-container">

			<div class="ad top"></div>
            <div class="job-board-filters-wrapper">
                <div id="job-board-filters" class="job-board-filters filter">
                    <h3 class="filters-heading">Job Filters</h3>
                    <a id="job-filter-toggle">
                        <svg viewBox="0 0 24.76 24.76">
                            <path class="cls-1" d="M10,.5a.5.5,0,0,1,.5-.5h3.87a.5.5,0,0,1,.5.5V10h9.44a.5.5,0,0,1,.5.5v3.87a.5.5,0,0,1-.5.5H14.82v9.44a.5.5,0,0,1-.5.5H10.45a.5.5,0,0,1-.5-.5V14.82H.5a.5.5,0,0,1-.5-.5V10.45A.5.5,0,0,1,.5,10H10Z"/>
                        </svg>
                    </a>
                    <div class="job-board-filters-inner">
                        <?php echo do_shortcode('[searchandfilter id="220"]'); ?>
                    </div>
                </div>
                <div class="job-help">
                    <h3 class="filters-heading">Need Help?</h3>
                    <a id="job-help-toggle">
                        <svg viewBox="0 0 24.76 24.76">
                            <path class="cls-1" d="M10,.5a.5.5,0,0,1,.5-.5h3.87a.5.5,0,0,1,.5.5V10h9.44a.5.5,0,0,1,.5.5v3.87a.5.5,0,0,1-.5.5H14.82v9.44a.5.5,0,0,1-.5.5H10.45a.5.5,0,0,1-.5-.5V14.82H.5a.5.5,0,0,1-.5-.5V10.45A.5.5,0,0,1,.5,10H10Z"/>
                        </svg>
                    </a>
                    <div class="job-help-inner">
                        <ul>
                            <li><a href="#">How to Post a Job </a></li>
                            <li><a href="#">Help for Job Seekers </a></li>
                        </ul>
                    </div>
                </div>
                <div class="ad left"></div>

            </div>
            <div class="job-board-results-wrapper">
                <div class="mobile-table">
                    <table class="job-board-results grid">
                        <thead>
                            <tr>
                                <th class="title">Title & Organization</th>
                                <th class="function">Job Function</th>
                                <th class="type">Type</th>
                                <th class="date">Date Posted </th>
                            </tr>
                        </thead>
                        <tbody>

                        <?php
                            $args['search_filter_id'] = 220;
                            $query = new WP_Query($args);

                            if($query-> have_posts() ): ?>

                                <?php while($query->have_posts() ): ?>

                                    <?php $query->the_post(); ?>
                                    <?php
                                        $date = get_the_date('M j, Y');
                                        $name = get_the_company_name();
                                        $serviceAreas = get_the_terms( get_the_ID(), 'service_area' );
                                        $jobFunctions = get_the_terms( get_the_ID(), 'job_function' );
                                        $jobType = get_the_terms( get_the_ID(), 'job_type' );
                                    ?>
                                    <tr class="single-job-result">
                                        <td>
                                            <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
                                            <p><?php echo $name; ?></p></td>
                                        <td>
                                            <?php if($jobFunctions): ?>
                                            <ul>
                                                <?php foreach($jobFunctions as $jobFunction):

                                                    ?>
                                                    <li><?php echo $jobFunction->name; ?></li>
                                                <?php endforeach; ?>
                                            </ul>
                                            <?php endif; ?>
                                            </td>
                                        <td><?php echo $jobType[0]->name; ?></td>
                                        <td><?php echo $date; ?></td>
                                    </tr>

                                <?php endwhile;?>
                            <?php else: ?>
                               <div data-search-filter-action='infinite-scroll-end'>
                            <h4>No results found</h4>
                               </div>
                            <?php endif;
                                wp_reset_postdata();
                        ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

	</section>

</main>
<?php get_footer();

Trevor

#221472

I can see that you have echoed both forms on the page. This may cause issues (but not the one you describe I think).

I suspect that the problem is the HTML structure. I think it should start like this:

<?php
/**
 * Created by PhpStorm.
 * User: jason
 * Date: 9/13/19
 * Time: 9:48 AM
 * Template Name: Job Board
 */
get_header(); ?>
<main id="job-board">
	<section id="job-board-search" class="job-search-menu background-image" style="background-image: url(<?php the_field('search_form_background_image'); ?>);">
		<div class="site-container narrow">
			<fieldset class="form big">
				<?php echo do_shortcode('[searchandfilter id="218"]'); ?>
			</fieldset>
		</div>
	</section>
	<section class="main" id="jobs">
		<div class="site-container">

			<div class="ad top"></div>
            <div class="job-board-filters-wrapper">
                <div id="job-board-filters" class="job-board-filters filter">
                    <h3 class="filters-heading">Job Filters</h3>
                    <a id="job-filter-toggle">
                        <svg viewBox="0 0 24.76 24.76">
                            <path class="cls-1" d="M10,.5a.5.5,0,0,1,.5-.5h3.87a.5.5,0,0,1,.5.5V10h9.44a.5.5,0,0,1,.5.5v3.87a.5.5,0,0,1-.5.5H14.82v9.44a.5.5,0,0,1-.5.5H10.45a.5.5,0,0,1-.5-.5V14.82H.5a.5.5,0,0,1-.5-.5V10.45A.5.5,0,0,1,.5,10H10Z"/>
                        </svg>
                    </a>
                    <div class="job-board-filters-inner">
                        <?php echo do_shortcode('[searchandfilter id="220"]'); ?>
                    </div>
                </div>
                <div class="job-help">
                    <h3 class="filters-heading">Need Help?</h3>
                    <a id="job-help-toggle">
                        <svg viewBox="0 0 24.76 24.76">
                            <path class="cls-1" d="M10,.5a.5.5,0,0,1,.5-.5h3.87a.5.5,0,0,1,.5.5V10h9.44a.5.5,0,0,1,.5.5v3.87a.5.5,0,0,1-.5.5H14.82v9.44a.5.5,0,0,1-.5.5H10.45a.5.5,0,0,1-.5-.5V14.82H.5a.5.5,0,0,1-.5-.5V10.45A.5.5,0,0,1,.5,10H10Z"/>
                        </svg>
                    </a>
                    <div class="job-help-inner">
                        <ul>
                            <li><a href="#">How to Post a Job </a></li>
                            <li><a href="#">Help for Job Seekers </a></li>
                        </ul>
                    </div>
                </div>
                <div class="ad left"></div>

            </div>

                        <?php
                            $args['search_filter_id'] = 220;
                            $query = new WP_Query($args);
?>
            <div class="job-board-results-wrapper">
                <div class="mobile-table">
<?php
                            if($query-> have_posts() ): ?>
                    <table class="job-board-results grid">
                        <thead>
                            <tr>
                                <th class="title">Title & Organization</th>
                                <th class="function">Job Function</th>
                                <th class="type">Type</th>
                                <th class="date">Date Posted </th>
                            </tr>
                        </thead>
                        <tbody>

                                <?php while($query->have_posts() ): ?>

BUT, the ending parts to table and the job-board-results div might then need to be moved, I am not sure. I think the Ajax Container should be .job-board-results-wrapper

Anonymous

#221480

I’ve replaced the first section as instructed and changed the Ajax container, but still no luck.

<?php
/**
 * Created by PhpStorm.
 * User: jason
 * Date: 9/13/19
 * Time: 9:48 AM
 * Template Name: Job Board
 */
get_header(); ?>
    <main id="job-board">
        <section class="job-board-search job-search-menu background-image" style="background-image: url(<?php the_field('search_form_background_image', 'option'); ?>);">
            <div class="site-container narrow">
                <fieldset class="form big">
					<?php echo do_shortcode('[searchandfilter id="218"]'); ?>
                </fieldset>
            </div>
        </section>
        <section class="main" id="jobs">
            <div class="site-container">

                <div class="ad top"></div>
                <div class="job-board-filters-wrapper">
                    <div id="job-board-filters" class="job-board-filters filter">
                        <h3 class="filters-heading">Job Filters</h3>
                        <a id="job-filter-toggle">
                            <svg viewBox="0 0 24.76 24.76">
                                <path class="cls-1" d="M10,.5a.5.5,0,0,1,.5-.5h3.87a.5.5,0,0,1,.5.5V10h9.44a.5.5,0,0,1,.5.5v3.87a.5.5,0,0,1-.5.5H14.82v9.44a.5.5,0,0,1-.5.5H10.45a.5.5,0,0,1-.5-.5V14.82H.5a.5.5,0,0,1-.5-.5V10.45A.5.5,0,0,1,.5,10H10Z"/>
                            </svg>
                        </a>
                        <div class="job-board-filters-inner">
							<?php echo do_shortcode('[searchandfilter id="220"]'); ?>
                        </div>
                    </div>
                    <div class="job-help">
                        <h3 class="filters-heading">Need Help?</h3>
                        <a id="job-help-toggle">
                            <svg viewBox="0 0 24.76 24.76">
                                <path class="cls-1" d="M10,.5a.5.5,0,0,1,.5-.5h3.87a.5.5,0,0,1,.5.5V10h9.44a.5.5,0,0,1,.5.5v3.87a.5.5,0,0,1-.5.5H14.82v9.44a.5.5,0,0,1-.5.5H10.45a.5.5,0,0,1-.5-.5V14.82H.5a.5.5,0,0,1-.5-.5V10.45A.5.5,0,0,1,.5,10H10Z"/>
                            </svg>
                        </a>
                        <div class="job-help-inner">
                            <ul>
                                <li><a href="#">How to Post a Job </a></li>
                                <li><a href="#">Help for Job Seekers </a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="ad left"></div>

                </div>

				<?php
				$args['search_filter_id'] = 220;
				$query = new WP_Query($args);
				?>
                <div class="job-board-results-wrapper">
                    <div class="mobile-table">
						<?php
						if($query-> have_posts() ): ?>
                        <table class="job-board-results grid">
                            <thead>
                            <tr>
                                <th class="title">Title & Organization</th>
                                <th class="function">Job Function</th>
                                <th class="type">Type</th>
                                <th class="date">Date Posted </th>
                            </tr>
                            </thead>
                            <tbody>

                                <?php while($query->have_posts() ): ?>
                                    <?php $query->the_post(); ?>
                                    <?php
                                        $date = get_the_date('M j, Y');
                                        $name = get_the_company_name();
                                        $serviceAreas = get_the_terms( get_the_ID(), 'service_area' );
                                        $jobFunctions = get_the_terms( get_the_ID(), 'job_function' );
                                        $jobType = get_the_terms( get_the_ID(), 'job_type' );
                                    ?>

                                    <tr class="single-job-result">
                                        <td>
                                            <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
                                            <p><?php echo $name; ?></p></td>
                                        <td>
                                            <?php if($jobFunctions): ?>
                                            <ul>
                                                <?php foreach($jobFunctions as $jobFunction): ?>
                                                <li><?php echo $jobFunction->name; ?></li>
                                                <?php endforeach; ?>
                                            </ul>
                                            <?php endif; ?>
                                        </td>
                                        <td>
                                            <?php echo $jobType[0]->name; ?>
                                        </td>
                                        <td>
                                            <?php echo $date; ?>
                                        </td>
                                    </tr>

                                    <?php endwhile;?>
                                <?php else: ?>
                                   <div data-search-filter-action='infinite-scroll-end'>
                                <h4>No results found</h4>
                                   </div>
                                <?php endif;
                                wp_reset_postdata();
                            ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </main>
<?php get_footer();

Trevor

#221482

OK.

The alternative is to use our Shortcode method, which needs it own page to be made, then edit the results.php (as per our documentation), starting with the exemplar infinite scroll PHP template file.

Just take it one step at a time, testing in between. You can port most of your code, but no need to do the query stuff.

Anonymous

#223672

Got things working well, other than the fact that the design requires either two forms (obviously doesn’t work right) or breaking the search field out into a different place in the layout. I read somewhere in this forum that V3 will support this kind of thing. Any idea on when V3 will be released?

[Author]

Posts