I have set up a custom WP_Query loop for a page template. I am implementing an infinite scroll method via ajax, and the call is successful, but for some reason I cannot get the query to like the paged arg in the loop. It just won’t pull anything.
Here is the code for my ajax action:
// AJAX Infinite Scroll
function txcap_ajax_scroll() {
$args = isset( $_POST['query'] ) ? array_map( 'esc_attr',
$_POST['query'] ) : array();
$args['post_type'] = isset( $args['post_type'] ) ? esc_attr(
$args['post_type'] ) : 'post';
$args['paged'] = esc_attr( $_POST['page'] );
$args['post_status'] = 'publish';
ob_start();
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
$post_count = 1;
while ( $query->have_posts() ) {
$query->the_post()
?>
<article id="post-<?php the_ID(); ?>"
<?php if ( $post_count % 3 == 0): ?>
class="fdm-post fdm-standard last"
<?php elseif ( $post_count % 4 == 0 ): ?>
class="fdm-post fdm-half-left"
<?php elseif ( $post_count % 5 == 0 ): ?>
class="fdm-post fdm-half-right"
<?php else: ?>
class="fdm-post fdm-standard"
<?php endif; ?> >
<img src='<?php the_post_thumbnail_url("fdm_blog") ?>'>
<div class="fdm-postlist-item-overlay"></div>
<div class="fdm-postlist-item-content">
<div class="fdm-postlist-item-title">
<a href="#"><h3><?php the_title(); ?></h3></a>
</div>
<div class="fdm-postlist-item-data">
<span><?php the_time('F jS, Y'); ?></span> • <span><?php the_author_posts_link(); ?></span>
</div>
</div>
</article>
<?php
$post_count++;
}
}
wp_reset_postdata();
$data = ob_get_clean();
wp_send_json_success( $data );
wp_die();
}
add_action( 'wp_ajax_txcap_ajax_scroll', 'txcap_ajax_scroll' );
add_action( 'wp_ajax_nopriv_txcap_ajax_scroll', 'txcap_ajax_scroll' );
Here is the code for my enqueue & localize ajax:
global $wp_query;
$args = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'query' => $wp_query->query
);
wp_enqueue_script( 'ajax_infinite_scroll', get_stylesheet_directory_uri() . '/js/ajax_infinite_scroll.js', array('jquery'), '1.0' ,true );
wp_localize_script( 'ajax_infinite_scroll', 'ajaxinfinitescroll', $args );
Here is my ajax handler for the infinite scroll.
jQuery(function($) {
$('.fdm-blog-container').append( '<span class="load-more"></span>' );
var button = $('.fdm-blog-container .load-more');
var page = 2;
var loading = false;
var scrollHandling = {
allow: true,
reallow: function() {
scrollHandling.allow = true;
},
delay: 400 //(milliseconds) adjust to the highest acceptable value
};
$(window).scroll(function() {
if( ! loading && scrollHandling.allow ) {
scrollHandling.allow = false;
setTimeout(scrollHandling.reallow, scrollHandling.delay);
var offset = $(button).offset().top - $(window).scrollTop();
if ( 2000 > offset ) {
loading = true;
$.ajax({
url: ajaxinfinitescroll.ajaxurl,
type: 'post',
data: {
action: 'txcap_ajax_scroll',
page: page,
query: ajaxinfinitescroll.query
},
success: function(result) {
console.log(result);
$('.fdm-blog-container').append( result.data );
$('.fdm-blog-container').append( button );
page = page + 1;
loading = false;
},
fail: function( xhr, textStatus, e ) {
console.log(xhr.responseText);
}
})
}
}
});
});
Here is my main WP_Query Loop that I am adding the infinite scrolling method to (this code is in the page template):
<div class="fdm-blog-container">
<?php
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args_main = array(
'post_type' => 'post',
'posts_per_page' => 1,
'paged' => $paged,
'post_status' => 'publish'
);
$query_main = new WP_Query( $args_main );
if ( $query_main->have_posts() ) {
$post_count = 1;
while ( $query_main->have_posts() ) {
$query_main->the_post();
?>
<article id="post-<?php the_ID(); ?>"
<?php if ( $post_count % 3 == 0): ?>
class="fdm-post fdm-standard last"
<?php elseif ( $post_count % 4 == 0 ): ?>
class="fdm-post fdm-half-left"
<?php elseif ( $post_count % 5 == 0 ): ?>
class="fdm-post fdm-half-right"
<?php else: ?>
class="fdm-post fdm-standard"
<?php endif; ?> >
<img src='<?php the_post_thumbnail_url("fdm_blog") ?>'>
<div class="fdm-postlist-item-overlay"></div>
<div class="fdm-postlist-item-content">
<div class="fdm-postlist-item-title">
<a href="#"><h3><?php the_title(); ?></h3></a>
</div>
<div class="fdm-postlist-item-data">
<span><?php the_time('F jS, Y'); ?></span> • <span><?php the_author_posts_link(); ?></span>
</div>
</div>
</article>
<?php
$post_count++;
}
?>
<?php
}
?>
</div>
<?php wp_reset_postdata();
Thank you very much in advance. I have been beating my head against the wall on this!