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!

Topic infinite-scroll loop ajax wp-query Wordpress

Category Web


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.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.