ajax – Problems implementing Load More functionality

Question

I’m trying to create my own Load More functionality (on click) in my child theme using the latest standards in WordPress. I’m not comfortable working with the php parts of things and I’m getting very confused with what is actually needed. Now I am aware there are lots and lots of similar questions in here but it is really hard to pick bits and pieces of information from random posts, all with similar but not equal problems/answers. With that said I’m sorry if I upset someone by asking.
Spoiler alert – English is not my native language, so please be thorough and… patient with me.

The content I want to fetch through AJAX is a custom post type. I don’t know if it’s at all important but I’m placing my custom post type content above the_content because the design demands this solution.

It’s my understanding that a Load More function requires the usage of REST, am I right? Otherwise there’s no way to combine the power of php and javascript.
To do this I’m using the wp_localize_script() method. I started out using ’ajaxurl’ => admin_url(’admin-ajax.php’). However, I have since then been informed that this is the old way of doing things and I don’t want no oldies. Instead I’m trying to use rest_url().

All in all, this is what I have produced this far (or mostly copied and pasted to be honest 😄):

Functions.php:

function itc_included_files() {
    wp_register_script('itc-load-more-js', get_stylesheet_directory_uri() . '/build/assets/js/load-more.js', array('jquery'), false, true);

    // Give our js script access to the REST
    wp_localize_script( 'itc-load-more-js', 'load_ajax_data', array(
        'restURL' => rest_url(),
        'restNonce' => wp_create_nonce('wp_rest')
        )
    );

    wp_enqueue_script('itc-load-more-js');
}

Included in the absolute top of functions.php like so:

require_once(get_stylesheet_directory() . '/inc/itc-load-more-ajax.php');

is this code snippet down below:

<?php
function itc_load_more() {
  
    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 1;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
  
    header("Content-Type: text/html");
  
    $args = array(
        'suppress_filters' => true,
        'post_type' => 'radgivare',
        'posts_per_page' => $ppp,
        'paged' => $page,
    );
  
    $loop = new WP_Query($args);
  
    $out="";
  
    if ($loop->have_posts()) : while ($loop->have_posts()) : $loop->the_post();
            $out .= get_template_part('template-parts/content', 'page');
        endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}
  
add_action('wp_ajax_nopriv_itc_load_more', 'itc_load_more');
add_action('wp_ajax_itc_load_more', 'itc_load_more');
?>

Template file

<section class="advisor__wrapper">
    <h2 class="title-lg is-outlined">Large heading</h2>

    <?php
    $agent_posts = new WP_Query([
        'post_type' => 'radgivare',
        'post_status' => 'publish',
        'posts_per_page' => 4,
        'orderby' => 'post_date',
        'order' => 'DESC'
    ]);

    if ($agent_posts->have_posts()) : ?>
        <div id="load-more-posts-container" class="itc-row gutter">
            <?php
            while ($agent_posts->have_posts()) : $agent_posts->the_post();
                get_template_part('template-parts/content', 'radgivare');
            endwhile;
            ?>
        </div>
    <?php endif; ?>
    <?php wp_reset_postdata(); ?>
    <input type="hidden" id="totalpages" value="<?= $loop->max_num_pages ?>">
    <div class="advisor__wrapper__btn-wrapper">
        <a href="" class="btn rounded btn-margin-lg btn--violet" id="btn-load-more">Visa fler rådgivare</a>
    </div>
</section>

And finally my js file:

var ppp = 1; // Post per page
var pageNumber = 2;
var total = jQuery('#totalpages').val();

jQuery("#btn-load-more").on("click", function ($) { // When btn is pressed.
    jQuery("#btn-load-more").attr("disabled", true); // Disable the button, temp.
    pageNumber++;
    var str="&pageNumber=" + pageNumber + '&ppp=' + ppp + '&action=itc_load_more';
    jQuery.ajax({
        type: "GET",
        dataType: "json",
        url: load_ajax_data.restURL,
        data: str,
        success: function (data) {
            var $data = jQuery(data);
            if ($data.length) {
                jQuery("#load-more-posts-container").append($data);
                jQuery("#btn-load-more").attr("disabled", false);
            } else {
                jQuery("#btn-load-more").attr("disabled", true);
            }                
            if (total < pageNumber) {
                jQuery("#btn-load-more").hide();
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        }

    });
    return false;
});

Originally the type was set to "POST" and the dataType to "html". Neither works.

My code is clearly missing some fundamental part because it simply will not work.
Educative and constructive help on this matter is greatly appreciated because I don’t know what I’m doing wrong. Thank you!

0
Seblito 1 month 2022-08-15T07:56:34-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse