Sunday, 11 April 2021

AJAX pagination not loading in new posts (admin-ajax not found)

I have a custom post type built in WordPress named Knowledge.

Knowledge currently only has 4 posts in total. By default, 3 posts are shown, then on load more click, I want the last, 4th blog card to show.

However, currently, my AJAX request isn't succeeding, it gives me the /wp-admin/admin-ajax.php 403 (Forbidden) error. Similar questions stated that it might be related to security plugins. However, I have disabled any security related plugins (Jetpack) and the error still exists.

Here is my approach so far:

knowledge-listing.php

<?php
global $post;

$args = array(
    'post_type' => 'knowledge',
    'posts_per_page' => 3,
    'post_status' => 'publish',
    'orderby' => 'publish_date',
    'order' => 'DESC'
);

$query = new WP_Query($args);

if ($query->have_posts()):

    while ($query->have_posts()):
        $query->the_post();
        get_part('templates/snippets/knowledge-card', array(
            'heading' => get_the_title() ,
            'subheading' => get_the_excerpt() ,
            'background' => wp_get_attachment_url(get_post_thumbnail_id($post->ID)) ,
        ));
    endwhile;
    wp_reset_postdata(); ?>

    <div class="knowledgeListing__loadmore">
        <a href="#" id="loadmore" class="button--loadmore" data-type="knowledge" data-max-num-pages="<?php echo $query->max_num_pages; ?>">
            <?php echo _e('Load More', 'theme'); ?>
        </a>
    </div>

<?php
endif; ?>

loadmore.js

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

    $("#loadmore").on('click', function (e) {
      e.preventDefault();
      var btn = $(this);
      showNextItems(btn);
    });

    function showNextItems(btn) {

      var max_num_pages = btn.data('max-num-pages');
      var post_type = btn.data('type');

      var button = btn,
        data = {
          'action':'loadmore',
          'query': loadmore_params.posts,
          'page' : loadmore_params.current_page,
          // 'security' : loadmore_params.security,
          // 'max_num_pages' : max_num_pages,
          // 'post_type' : post_type
      };

      $.ajax({
        url : loadmore_params.ajaxurl,
        data : data,
        type : 'POST',
        beforeSend : function ( xhr ) {
          button.text('Loading...');
        },
        success : function( data ){
          if( data ) {
            button.text( 'Load More' ).prev().before(data);
            loadmore_params.current_page++;

            $('.knowledgeListing__wrapper').find('.knowledgeCard').last().after( data );

            if ( loadmore_params.current_page == max_num_pages ){
              button.remove();
            }

            console.log("success");

          } else {
            button.remove();
          }
        },
        error : function(error){
          button.text( 'Load More' );
          console.table("Data: " + data);
          console.table("loadmore_params: " + loadmore_params);
          // console.log(error);
        }
      });
    }

  });
});

The following two console.log's spit out [object Object]

  • console.table("Data: " + data);
  • console.table("loadmore_params: " + loadmore_params);

Unsure where things are going wrong?

Edit:

console.log("Data:", data) and console.log("loadmore_params:", loadmore_params); results below:

enter image description here

On further inspection, when trying to access the /wp-admin/admin-ajax.php url, I see a 0. When searching for this online, it has been suggested to use die(). However, when I've added die() to the end of knowledge-listing.php, it still shows me a 0.

Here is my localized script for reference:

global $wp_query;

wp_localize_script( 'theme', 'loadmore_params', array(
  'ajaxurl' => admin_url( 'admin-ajax.php' ),
  'posts' => json_encode( $wp_query->query_vars ),
  'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
  'max_page' => $wp_query->max_num_pages,
  'security' => wp_create_nonce("load_more")
) );

And actions:

add_action('wp_ajax_loadmore', 'pagination_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'pagination_ajax_handler'); // wp_ajax_nopriv_{action}


from AJAX pagination not loading in new posts (admin-ajax not found)

No comments:

Post a Comment