ajax load next/prev post

Hi, I tried to follow the ajax load next/prev post in your tutorial, but I have got lost. First, click works fine. When I’m on the Older posts, the new posts are displayed, but the link at the bottom has remained same (not changed for newer posts). And vice versa if I start at page two. It’s a custom theme, I can send it to you. However, I assume that it will be some small mistake.

My ajax actions:

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' ) );
}
}

kbnt_pagination();

die();
}

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

My ajax-pagination.js

(function($) {
$(document).on( 'click', '#pagination a', function( event ) {
event.preventDefault();

var pageurl = $(this).attr('href');
var myRe = /d+/g;
var page = parseInt(myRe.exec(pageurl));

$.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 );
}
})

})
})(jQuery);

  • Predrag Dubajic
    • Support

    Hey Karolina,

    Hope you’re doing well today :slight_smile:

    I had a look at your code but I can’t say that I can see what’s missing here.

    Could you send me your theme so we can check it out?

    You can upload it to any file sharing service and if you don’t want to share it here you can send it to me by using our contact form https://premium.wpmudev.org/contact/ and the template below:

    IMPORTANT: Make sure you select “I have a different question” for your topic so it doesn’t go back to forums – this and the subject line ensure that it gets assigned to me.

    Subject: “Attn: Predrag Dubajic

    – Download link

    – Link back to this thread for reference

    – Any other relevant urls

    Best regards,

    Predrag

  • Karolina
    • The Bug Hunter

    Hi Predrag,

    I have finally fixed that myself and written completely different code:

    functions.php

    function ajaxNewsroom(){
    if ( isset($_REQUEST) ) {
    $offset = $_REQUEST['offset'];
    kbnt_cpt_loop( 'newsroom', '', '', '', $offset );
    }
    die();
    };

    add_action('wp_ajax_nopriv_ajaxNewsroom', 'ajaxNewsroom');
    add_action('wp_ajax_ajaxNewsroom', 'ajaxNewsroom');

    function kybernaut_scripts() {
    global $wp_query;
    $count_newsroom = wp_count_posts( 'newsroom' );

    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' ),
    'postsperpage' => get_option( 'posts_per_page' ),
    'count_newsroom' => $count_newsroom->publish,
    ));
    }
    add_action( 'wp_enqueue_scripts', 'kybernaut_scripts' );

    ajax-pagination.js

    (function($) {
    var offset = parseInt(ajaxpagination.postsperpage);
    var maxnews = parseInt(ajaxpagination.count_newsroom);
    var offset_news_value = 0;

    //newsroom
    $('.pagination-newsroom a').click(function() {
    event.preventDefault();
    offset_news_value += offset;

    $.ajax({
    url: ajaxpagination.ajaxurl,
    data: {
    action: "ajaxNewsroom",
    'offset' : offset_news_value
    },
    beforeSend: function() {
    $('#news').append( '<article class="page-content" id="loader"><h2>Na?ítám...</h2></article>' );
    },
    success: function ( data ) {
    if ( offset_news_value+offset >= maxnews ) {
    $('.pagination-newsroom').remove();
    }
    $('#news #loader').remove();
    $('#news').append(data);

    },
    error: function(errorThrown){
    alert(errorThrown);
    }
    });

    return false;
    });

    })( jQuery );

    You can tell them that their help is not needed anymore.

  • Predrag Dubajic
    • Support

    Hi Karolina,

    Sure thing, I’ll write the info I got from SLS below and I’ll send you the modified them via email.

    In functions.php ha included new localized vars $paged and max_num_pages which he used in the ajax-pagination.js file.

    Also in functions.php ha added some filters for adding custom classes to the next and prev links`

    add_filter('next_posts_link_attributes', 'posts_link_attributes_next');
    add_filter('previous_posts_link_attributes', 'posts_link_attributes_prev');

    function posts_link_attributes_next() {
    return 'class="prev-posts"';
    }
    function posts_link_attributes_prev() {
    return 'class="next-posts"';
    }

    In ajax-pagination.js he set a global var page (it should be renamed to something more unique…:wink:. He then used the button’s class to add and remove pages from the page var so the correct page is loaded.

    Best regards,

    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.