1

I'm trying to load next/prev posts by ajax, but somehow it gets broken - first "next" posts click is working fine - posts are loaded. But navigation get broken - no "prev" link loaded (even if I'm on second page) and "next link" not working anymore. Could anybody help me out of this trouble? Thanks a lot in advance.

I'm passing few variables by localize script to my ajax-pagination.js

function kybernaut_scripts() {
    global $wp_query;

    $paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;

  wp_enqueue_script( 'kbnt-ajax-pagination',  get_stylesheet_directory_uri() . '/js/ajax-pagination.js', array( 'jquery' ), '1.0', true );          
  wp_localize_script( 'kbnt-ajax-pagination', 'ajaxpagination', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
            'query_vars' => json_encode( $wp_query->query ),                    
    ));
}
add_action( 'wp_enqueue_scripts', 'kybernaut_scripts' );

Than I hook it to ajax call:

add_action( 'wp_ajax_nopriv_ajax_pagination', 'kbnt_ajax_pagination' );
add_action( 'wp_ajax_ajax_pagination', 'kbnt_ajax_pagination' );

function kbnt_ajax_pagination() {
  $query_vars = json_decode( stripslashes( $_POST['query_vars'] ), true );
  $query_vars['paged'] = $_POST['page'];

  $posts = new WP_Query( $query_vars );
  $GLOBALS['wp_query'] = $posts;

    $postn = 0;

    if( ! $posts->have_posts() ) { 
        get_template_part( 'content', 'none' );
    }
    else {
        while ( $posts->have_posts() ) { 
            $posts->the_post();
                  include( locate_template( 'content-posts.php' ) );
        }
    }

    echo '<div class="col-xs-24" id="pagination">';
    posts_nav_link();
    echo '</div>';

  die();
}

Adding some attributes to the next/prev links (works fine)

add_filter('next_posts_link_attributes', 'kbnt_next_posts_link_attributes');
add_filter('previous_posts_link_attributes', 'kbnt_prev_posts_link_attributes');

function kbnt_next_posts_link_attributes() {
    global $wpquery;
    $paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;
    return 'data-nextprev="+" data-paged="'.$paged.'"';
}
function kbnt_prev_posts_link_attributes() {
    global $wpquery;
    $paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;
    return 'data-nextprev="-" data-paged="'.$paged.'"';
}

And finaly, my ajax-pagination.js script:

(function($) {

$(document).ready(function($) { 

        $('#pagination a').click(function() {

    // I have tried as well following variations:
        //$('#pagination a').on( 'click', function() {
        //$('document').on( 'click','#pagination a', function() {

            alert('clicked');

            event.preventDefault(); 

            var nextprev = $(this).data('nextprev');
            var paged = $(this).data('paged');

            var pageNum = paged + 1;
            var prevNum = paged - 1;

            if(nextprev == "+") {   
                var page = pageNum;         
            }
            else if (nextprev == "-") {
                var page = prevNum;         
            }

            alert('going to page number ' + page);          

            $.ajax({
                url: ajaxpagination.ajaxurl,
                type: 'post',
                data: {
                    action: 'ajax_pagination',
                    query_vars: ajaxpagination.query_vars,
                    page: page
                },
                success: function( html ) {
                    $('#clanky').find( 'article' ).remove();
                    $('#pagination').remove();
                    $('#clanky').append( html );                    
                }
            })                   

         return false;   
         });

});         
})( jQuery );

Your Answer

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

Browse other questions tagged or ask your own question.