Ajax Infinite Scroll In Custom WP_Query Loop Not Working

Question

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!

Answer 1

Do you have a https version of your website ? I ask this because I recently came across a project which was a website which could be reached both in http and https. Thus I had to specify it to the ajax_url function. So, in your case, I suggest you try:

$protocol = isset( $_SERVER['HTTPS'] ) ? 'https://' : 'http://';

$args = array(
  'ajaxurl' => admin_url( 'admin-ajax.php',$protocol ),
  'query'   => $wp_query->query

in your enqueue function.