Wordpress/PHP/Ajax Load More Posts

Question

I have some code on my wordpress categories page, where if they click on the graphic, then more posts are loaded - in this case 15.

It works great the first time that it is pressed. However, once it is pressed again, it doesn't bring in the next set of posts (ie. the third), but brings in the 2nd.

I understand that the problem is the offset - ie. where it starts. So, the first time it is pressed, the offset should be 16, the second time 31, the third time 46 etc.

However, where I am having difficulty, is passing through this offset.

This is the js:

    $('#do-show-more-posts').live('click', function(){


    if( $(this).data("o-set")){
        $offset=$(this).data("o-set");
    }else
    {
        $offset=16 ; //assume this is 16 initially
    }

    var post_type = $(this).attr('post-type');
    var parent = $(this).attr('parent-id');
    var offset = $('.article').size();

    $(this).fadeTo(0,0);
    $('.load-more-posts-wrapper .loader').addClass('show');

    $.post( ajaxurl, { action: 'load_more_posts', post_type : post_type, parent : parent, offset : offset }, function(data){
        $load_more = $('.load-more-posts-wrapper');
        $load_more.find('.loader').removeClass('show');
        $load_more.find('.link').removeAttr('style');
        var load_more_button = '<div class="load-more-posts-wrapper">' + $load_more.html() + '</div>';
        $load_more.remove();

        if( data == '' || data == 'udefined' || data == 'No More Posts' || data == 'No $args array created' ){
            data = '';
            load_more_button = '<div class="load-more-posts-wrapper">There are no more posts.</div>';
            setTimeout("$('.load-more-posts-wrapper').fadeTo(1800,0)", 8000 );
        }

        $('#content').append( data );
        $('#content').append( load_more_button );
        $(this).data("o-set",$offset);
    });


});

This is the PHP:

function load_more_posts() {




if( isset($_POST['post_type']) && $_POST['post_type'] == 'publication' ){

    $args = array(
        'offset'         => $_POST['offset'],
        'orderby'        => 'post_date',
        'order'          => 'DESC',
        'post_type'      => 'article',
        'post_status'    => 'publish',
        'meta_query'     => array(
            array(
                'key'    => 'related-publication',
                'value'  => $_POST['parent'],
                'meta_compare' => 'IN'
            )
        )
    );

} else if(isset($_POST['post_type']) && $_POST['post_type'] == 'category') {

    $args = array(
         'cat'       => $_POST['parent'],
         'offset'    => $_POST['offset'],
        'post_type' => array('post','article','publication')
     );

} else {

    // print_r($args);

}

$Query = new WP_Query( $args );
//print_r($Query);
if ( $Query->have_posts() ) {

    while ( $Query->have_posts() ) {
        $Query->the_post();
        get_template_part('loop', 'xxxry');
    }

} else {
    // print_r($args);
}

exit;
}

I had an idea to create a session holding the value for offset, although that didn't seem to work. In addition, am not sure how I would delete it in case someone returns to that category page.

The code I used was this:

if (isset($_SESSION['posts_start'])){
    $_POST['offset']=$_SESSION['posts_start']+15;
    $_SESSION['posts_start']=$_POST['offset'];
} else {
    $_POST['offset']=15;
    $_SESSION['posts_start']=$_POST['offset'];
}

I put that at the beginning of the php function. It didn't seem to register the addition of 15 if there was already a session.

Answer 1

Instead of using offset, you could use posts_per_page and paged parameters of WP_Query args.

function load_more_posts() {

//...

    $args = array(
        'posts_per_page' => $_POST['offset'],
        'paged'          => $_POST['page'],
        'orderby'        => 'post_date',
        'order'          => 'DESC',
        'post_type'      => 'article',
        'post_status'    => 'publish',
        'meta_query'     => array(
            array(
                'key'    => 'related-publication',
                'value'  => $_POST['parent'],
                'meta_compare' => 'IN'
            )
        )
    );

//...
}

And in your JS:

//EDIT2: (global page variable
$(document).ready(function(){
//...
var page = 1; //don't redefine this variable each time you click.
$('#do-show-more-posts').live('click', function(){
    //...
    $.post( ajaxurl, { action: 'load_more_posts', post_type : post_type, parent : parent, offset : $offset, page : page++ }, function(data){
    //EDIT:  --------------------------------------------------------------------------------------------------- ^
        $load_more = $('.load-more-posts-wrapper');
        $load_more.find('.loader').removeClass('show');
        $load_more.find('.link').removeAttr('style');
        var load_more_button = '<div class="load-more-posts-wrapper">' + $load_more.html() + '</div>';
        $load_more.remove();

    if( data == '' || data == 'udefined' || data == 'No More Posts' || data == 'No $args array created' ){
        data = '';
        load_more_button = '<div class="load-more-posts-wrapper">There are no more posts.</div>';
        setTimeout("$('.load-more-posts-wrapper').fadeTo(1800,0)", 8000 );
    }

    $('#content').append( data );
    $('#content').append( load_more_button );
    $(this).data("o-set",$offset);
    });
}
//...
}