about load more ajax

Question

I've made load-more-ajax. It works good. But if there's no next page's lists, I want that the load-more-button to be disappeared. can you help me?

this is html.

<div class="race_posts">

<!-- the room for ajax result: post list -->

</div>

<div class="loadmore">load-more</div>

and this is ajax-call js. when clicked the button of "load-more".

$('.loadmore').on('click', function(){

    var data = {
        'action': 'rnm_load_more_ajax',
        'page': page,
        'date_filter': date_filter,
        'sports_name': 'marathon-tax',
        'compare': compare,
        'area_pass': area_input,
        'feature_pass': feature_input_arr,
        'security': rnmLoadmore.nonce
    };

    $.post(rnmLoadmore.ajaxurl, data, function(response){

        $('.race_posts').append(response);
        page++;


    });
});

and this is the part of disposure of ajax-call.

$paged = $_POST['page'];

$args = array(
    'post_type' => 'book',
    'posts_per_page' => 3,
    'paged' => $paged,     
);

$query = new WP_Query($args);

while($query->have_posts() ) :
    $query->the_post(); ?> 
       <div class="ajax"> <?php the_title(); ?> </div>        

<?php endwhile; wp_reset_query(); ?>

    <?php wp_die();

This is some parts of my ajax-call coding. and works normally. but. When there's no next page or no response content, I want load-more-button to be disappeared. can you give me some help. Thank you.

Answer 1

I made some simple changes to your ajax function call and your ajax-js call.I hope this helps out

ajax function call:

$return = array();
$paged = $_POST['page'];
ob_start();
$args = array(
    'post_type' => 'book',
    'posts_per_page' => 3,
    'paged' => $paged,     
);
$query = new WP_Query($args);
 while($query->have_posts() ):
    $query->the_post(); ?>
    <div class="ajax"> <?php the_title(); ?> </div>
<?php 
 endwhile;
wp_reset_query();
$return['load_post'] = ob_get_clean();
$return['max_page'] = $query->max_num_pages;
wp_send_json( $return );
wp_die();

Your ajax-call js:

('.loadmore').on('click', function(){
  var data = {
    'action': 'rnm_load_more_ajax',
    'page': page,
    'date_filter': date_filter,
    'sports_name': 'marathon-tax',
    'compare': compare,
    'area_pass': area_input,
    'feature_pass': feature_input_arr,
    'security': rnmLoadmore.nonce
  };
  $.post(rnmLoadmore.ajaxurl, data, function(response){
    if( response.load_post != ""){
        $('.race_posts').append(response);
        page++;
        if( page > response.max_page) {
            $('.loadmore').hide();
        }
    }
  });
});