I want to "load more" posts with Ajax in a custom loop. Everything wor WordPress

Cesar Contreras answers:

Do you have a test site that I can see online?

John Cotton answers:

If you change the way you return content on the ajax call, you can pass an additional value to test whether any more pages are left.

So, instead of echoing the title in the loop, assign it to a variable:

$html .= sprintf( '<article>%s</article>', get_the_title() );


Then, get the number of pages found and test that against your current page:

global $wp_query;
$last_page = $wp_query->max_num_pages > $paged;


Next, return both of these values via ajax:

wp_send_json( array( 'html' => $html, 'last_page' => $last_page ) );


Finally, change your js to make use of this new structure:

if(response) {
$('.ajax-posts').append(response.data.html);
if( !response.data.last_page ) $('.loadmore').show();
$('.loading').hide();
page++;
}


Hopefully, those snippets above will solve it for you.

---

---

Andrea P answers:

I just had a quick look but John Cotton suggestions seems good to me too.

the only thing is that I am not sure about the way the $last_page is calculated.
Considering that it is a custom loop, it shouldn't use the global $wp_query but instead be something like this:

$last_page = $my_posts->max_num_pages > $paged;

---

Arnav Joy answers:

Hello,
Here is one simplest solution, you can add following like to functions.php just before wp_die();
if( $my_posts->max_num_pages == $paged )
echo '<style>.loadmore{ display:none !important; }</style>';


so final code for the functions.php file will be this

add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');

function load_posts_by_ajax_callback() {
check_ajax_referer('load_more_posts', 'security');
$date_now = date('Y-m-d H:i:s');
$paged = $_POST['page'];
$args = array(
'posts_per_page' => 2,
'post_type' => 'termin',
'meta_query' => array(
'key' => 'end_date',
'compare' => '>=',
'value' => $date_now,
'type' => 'DATETIME'
),
'orderby' => 'end_date',
'order' => 'ASC',
'meta_type' => 'DATE',
'post_status' => 'publish',
'paged' => $paged,
);
$my_posts = new WP_Query( $args );
if ( $my_posts->have_posts() ) :
?>
<?php while ( $my_posts->have_posts() ) : $my_posts->the_post(); ?>
<article><?php the_title(); ?></article>
<?php endwhile; ?>
<?php
endif;
if( $my_posts->max_num_pages == $paged )
echo '<style>.loadmore{ display:none !important; }</style>';

wp_die();
}



Let me know if that works.

---

---

---

---

---

Mohamed Ahmed answers:

I already did codes like that in web hosting site search by features
So, the load more button will be in a condition (replace your code with this)


<?php
$date_now = date('Y-m-d H:i:s');
$args = array(
'posts_per_page' => 2,
'post_type' => 'termin',
'meta_query' => array(
'key' => 'end_date',
'compare' => '>=',
'value' => $date_now,
'type' => 'DATETIME'
),
'orderby' => 'end_date',
'order' => 'ASC',
'meta_type' => 'DATE',
'post_status' => 'publish',
'paged' => $paged,
);
$my_posts = new WP_Query( $args );
if ( $my_posts->have_posts() ) :
?>
<div class="ajax-posts">
<?php while ( $my_posts->have_posts() ) : $my_posts->the_post(); ?>
<article><?php the_title(); ?></article>
<?php endwhile; ?>
</div>
<?php
if ((isset($_REQUEST['page']))) {
$this_page = $_REQUEST['page'];
} else {
$this_page = $my_posts->get('paged');
}

$max_page = $my_posts->max_num_pages;
if ($paged <= ($max_page - 1)) {
?>
<button class="loadmore" data-url='" . admin_url('admin-ajax.php') . '?action=load_posts_by_ajax_callback&page=' . ($this_page + 1) . "'>Mehr laden</button>
<span class="loading">lade ...</span>
<?php } ?>
<?php endif; ?>


After your ajax function


jQuery('body').on('click', '.loadmore', function(e) {
e.preventDefault();
var Url = jQuery(this).attr('data-url');
jQuery('.loading').last().load(Url);
jQuery('.loading').last().html('<button class="loadmore">Mehr laden</button>');
jQuery('.loadmore').last().remove();

return false
})


I can send you my live example also
Regards

---

---

---

---

Mohammed Remeez answers:

Hello brother,
Can you try this simple logical solutions.
In your script.
1. Get total no. of pages for your query.
2. If (response),
check if total no. of pages === current page.
If yes, $('.loadmore').hide
Else, $('.loadmore').show
To get total no. of pages try this:
Var total_pages = <?php echo $my_posts->max_num_pages; ?>

Thus your final script will be like this,

<script type="text/javascript">
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var total_pages = "<?php echo $my_posts->max_num_pages; ?>" //modified part.
var page = 2;
$('.loading').hide();
jQuery(function($) {
$('body').on('click', '.loadmore', function(e) {

$('.loadmore').hide();
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
};

$.post(ajaxurl, data, function(response) {
if(response) {
$('.ajax-posts').append(response);
$('.loading').hide();
/* modified part */
if( page == total_pages ){
$('.loadmore').hide();
$(".ajax-posts").append("No More Records Found");
}else{
$('.loadmore').show();
}
page++;
}
});
});
});
</script>
Thanks.

---