Incrementing PHP variable onclick to display posts by month

Question

I'm trying to display all of the posts from the current month with a 'Previous month' button. Clicking the 'Previous month' button will change the displayed posts to those from the previous month without refreshing the page (i.e. if the page is currently showing September's posts, clicking the button will replace them with August's).

I've been trying to use AJAX to achieve this but i've not been able to get it to work thus far.

posts.php

<div class="post-body">
<?php 
    $year = date('Y', current_time('timestamp'));
    $month = date('m', current_time('timestamp'));

get_posts($month, $year);?>
</div>

ajax-pagination.js

(function($) {
        $(document.body).on('click', '#previous', function(e) {
        e.preventDefault();
        $.ajax({
        url: ajaxpagination.ajaxurl,
        type: 'post',
        data: {
              action: 'ajax_pagination'
              },
        success:function( result) {
        alert( result);
      }
  })
       });
  })(jQuery);

functions.php

function get_posts($month,$year) {                
            query_posts("year=$year&monthnum=$month");
            $dateObj   = DateTime::createFromFormat('!m', $month);
            $monthName = $dateObj->format('F');
                echo "<h1>"$monthName" ",$year,"</h1>\n\n";
                if(have_posts()) : while(have_posts()) : the_post();
                ?>
                <div class="post-excerpt">
                <p class="date"><?php echo get_the_date(); ?></p>
                <div class="title"><h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></div>
                <div class="excerpt"><?php the_excerpt(__('(more…)')); ?></div>
                </div>

                <?php endwhile; else : ?>
                     <div class="title"><h3><?php esc_html_e( 'There are no posts.' ); ?></h3></div>
                <?php endif; wp_reset_query();}

function my_ajax_pagination() {
        die(); 
    }

Effectively, I want the $month and $year variables to reduce by 1 each time the button is clicked and for the new variables to be passed to the get_posts function. Is it possible to have Javascript and PHP to communicate in this way or should I try a different approach?

Answer 1

Try registering a function handling ajax calls first.

// For logged out users
add_action( 'wp_ajax_nopriv_wp280265_pagination', 'wp280265_pagination' );
// For logged in users
add_action( 'wp_ajax_wp280265_pagination', 'wp280265_pagination' );

Define the function.

function wp280265_pagination() {
    $month = $_POST['month'];
    $year = $_POST['year'];

    if ($month != '' && $year != '')
        get_posts($month, $year);
}

Define JavaScript.

(function($) {
    $(document.body).on('click', '#previous', function(e) {
        e.preventDefault();
        var month = $(this).data('month');
        var year = $(this).data('year');
        $.ajax({
            url: ajaxpagination.ajaxurl,
            type: 'post',
            data: {
                action: 'wp280265_pagination',
                month: month,
                year: year
            },
            success: function(result) {
                $(this).data('month', month + 1);
                $(this).data('year', year + 1);
            }
        })
    });
})(jQuery);

Enqueue and register.

add_action( 'wp_enqueue_scripts', 'ajax_wp280265_enqueue_scripts' );
function ajax_wp280265_enqueue_scripts() {
    wp_enqueue_script( 'wp280265', plugins_url( '/ajaxpagination.js', __FILE__ ), array('jquery'), '1.0', true );
    wp_localize_script( 'wp280265', 'ajaxpagination', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' )
    ));
}

Didn't test the code but the process should be correct.