1

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!

  • I don't see dataType = "json" in your Ajax call. – Howard E Mar 9 at 15:01
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.