0

I have been using AJAX on my website successfully and for my category.php page I need to use the offset argument. Unfortunately, AJAX creates complications with offset and I get the same posts looping over and over. I consulted the WordPress codex but I couldn't not figure out how to apply a solution to my particular WP_Query. Anyone that can help I'd be grateful, I can provide more code if necessary as well. Thanks!

category.php

<?php
    $category = get_category( get_query_var( 'cat' ) );
    $cat_id = $category->cat_ID;
    $current_page = max( 1, get_query_var( 'paged' ) );
    $the_query = new WP_Query( array(
        'category__in' => array($cat_id), 
        'post_type'      => 'post',
        'posts_per_page' => 5,
        'paged'          => $current_page,
    ) );

    $_SESSION['count'] = 1;
    wp_localize_script( 'my_loadmore', 'misha_loadmore_params', array(
        'ajaxurl'      => admin_url( 'admin-ajax.php', 'relative' ),
        'posts'        => json_encode( $the_query->query_vars ),
        'current_page' => $current_page,
        'max_page'     => $the_query->max_num_pages
    ) );
?>

<div id="main" class="container feed-container">
    <div class="row mx-auto align-items-center post">      
    <?php if ($the_query->have_posts()) : ?>
        <?php $count = 0; ?>
        <?php while ($the_query->have_posts()) : $the_query->the_post(); get_template_part( 'parts/content', get_post_format() ); ?>
            <?php $count++;

            $_SESSION['count']=$_SESSION['count']+1;
            ?>
        <?php endwhile; ?>
     <?php endif; ?>
<?php wp_reset_postdata(); ?>
    </div><!-- END ROW -->
</div><!-- END CONTAINER -->

AJAX

jQuery(function($){
    var canBeLoaded = true,
                bottomOffset = 1300;


    $(window).scroll(function(){
        if ( misha_loadmore_params.current_page >= misha_loadmore_params.max_page ) {
//          console.log( 'max_page reached; AJAX canceled' );
            return;
        }
        var data = {
            'action': 'loadmore',
            'query': misha_loadmore_params.posts,
            'page' : misha_loadmore_params.current_page
        };
        if( $(document).scrollTop() > ( $(document).height() - bottomOffset ) && canBeLoaded == true ){

            $.ajax({
                url : misha_loadmore_params.ajaxurl,
                data: data,
                type: 'POST',
                beforeSend: function( xhr ){
                    canBeLoaded = false;
                },
                success:function(data){
                    if( data ) {
                        $('#main').find('div.post:last-of-type').after( data ); 
                        canBeLoaded = true;
                        misha_loadmore_params.current_page++;

                        // bottomOffset = ( $( '#main > div.post:last' ).offset() || {} ).top
                    }
                }
            });
        }
    });
});
  • Where's your PHP code which handles the AJAX request? – Sally CJ Apr 17 at 20:32
  • Hi @SallyCJ funny, you were the one to help me with my last AJAX question, this is actually just about the same code you helped me develop. I didn't include originally because I wasn't sure if the AJAX itself was the issue or WordPress parameters. Either way I have added the AJAX code please let me know if I can provide anything else. This is my first foray into AJAX so I'm learning a lot! Thanks! – user5854648 Apr 18 at 22:21
  • I did think of that. But I guess I just wanted to be sure about it. :) Anyway, check my answer. I hope it works for you. – Sally CJ Apr 20 at 2:24
1

So I'm guessing this is a follow-up to this question. And based on my answer there, you can use/add the offset parameter like so:

  1. In category.php, just set the preferred offset:

    $the_query = new WP_Query( array(
        'category__in'   => array( $cat_id ),
        'post_type'      => 'post',
        'posts_per_page' => 5,
        'paged'          => $current_page,
        'offset'         => 1, // set offset
    ) );
    
  2. In misha_loadmore_ajax_handler() (the PHP function which processes the AJAX requests), add this right before $the_query = new WP_Query( $args );:

    if ( isset( $args['offset'] ) ) {
        $offset = absint( $args['offset'] );
        $args['offset'] = absint( ( $args['paged'] - 1 ) * $args['posts_per_page'] ) + $offset;
    }
    

That's all. No changes necessary in the JavaScript parts.

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.