Ajax Infinite Scroll In Custom WP_Query Loop Not Working
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!