WordPress Ajax 后载

Question

I've been trying (and failing annoyingly) to get an Ajax post loader to work.

This is the jQuery i'm using (its from this previous StackOverflow post: "Load More Posts" with Ajax in wordpress ), but its just not working.. I'm just trying to get an isotope list to ajax load more but everything i'm trying is failing.

jQuery(document).ready(function($){
    $('.pagination a').click(function(e)  {
    e.preventDefault();
    $('.filtered-posts').append("<div class=\"loader\">&nbsp;</div>");

    var link = jQuery(this).attr('href');

    var $content = '.filtered-posts';
    var $nav_wrap = '.pagination';
    var $anchor = '.pagination a';
    var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts

    $.get(''+link+' .item', function(data){
    var $timestamp = new Date().getTime();
    var $new_content = $($content, data).wrapInner('').html(); // Grab just the content
    $('.filtered-posts .loader').remove();
    $next_href = $($anchor, data).attr('href'); // Get the new href
    $($nav_wrap).before($new_content); // Append the new content
    $('#rtz-' + $timestamp).hide().fadeIn('slow'); // Animate load
    $('.pagination a').attr('href', $next_href); // Change the next URL
    $('.pagination:last').remove(); // Remove the original navigation
    });

    });});

This is what I'm using for my js but its just not loading anything when I click on the standard previous_posts_link/next_posts_link.

I've put a div container around them to force the.pagination above.. It briefly worked but was only calling the same 9 posts once and then didn't work.

Any help would be great. Or if someone has a different Ajax Pagination guide that they know works..

Thanks in advance:)

Answer 1

 /* We will edit our javascript snippet with a variable to keep track of the current page, and we add the $ajax call to our ajax function that we will write in the next chapter. */ let currentPage = 1; jQuery('#load-more').on('click', function() { currentPage++; // Do currentPage + 1, because we want to load the next page jQuery.ajax({ type: 'POST', url: '<?php echo admin_url('admin-ajax.php'); ?>', dataType: 'html', data: { action: 'weichie_load_more', paged: currentPage, }, success: function (res) { jQuery('.publication-list').append(res); } }); });

 /* The WordPress query to load posts from a (custom) post type */ <?php $publications = new WP_Query([ 'post_type' => 'publications', 'posts_per_page' => 6, 'orderby' => 'date', 'order' => 'DESC', 'paged' => 1, ]); ?> <?php if($publications->have_posts()): ?> <ul class="publication-list"> <?php while ($publications->have_posts()): $publications->the_post(); get_template_part('parts/card', 'publication'); endwhile; ?> </ul> <?php endif; ?> <?php wp_reset_postdata(); ?> <div class="btn__wrapper"> <a href="#." class="btn btn__primary" id="load-more">Load more</a> </div> functions:php, function weichie_load_more() { $ajaxposts = new WP_Query([ 'post_type' => 'publications', 'posts_per_page' => 6, 'orderby' => 'date', 'order' => 'DESC', 'paged' => $_POST['paged']; ]); $response = '': if($ajaxposts->have_posts()) { while($ajaxposts->have_posts()); $ajaxposts->the_post(). $response,= get_template_part('parts/card'; 'publication'); endwhile; } else { $response = ''; } echo $response; exit, } add_action('wp_ajax_weichie_load_more'; 'weichie_load_more'), add_action('wp_ajax_nopriv_weichie_load_more'; 'weichie_load_more');