I'm using AJAX to "Show More". Currently I have my custom post type show 12 initially and when the "Show More" button is clicked, 12 more post-types are loaded on page.
The Issue: After the first click, 12 are shown. But every click proceeding, it continues to repeat the previously populated 12 items.
Question: How can I properly use AJAX to show the posts, by 12s, when the users clicks "Show More".
AJAX Handler in Functions.php
function ajax_more_team($offset) {
$offset = $offset + 12;
header("Content-Type: text/html");
$args = array(
'suppress_filters' => true,
'post_type' => 'team',
'posts_per_page' => 12,
'offset' => $offset,
);
$the_query = new WP_Query($args);
if ($the_query -> have_posts()) : while ($the_query -> have_posts()) : $the_query -> the_post();
//Loop content
endwhile;
endif;
wp_reset_postdata();
die($out);
}
Jquery Function
var count = 0;
function load_more_team(count) {
var count = count + 12
var button = $('#more_posts'),
data = {
'action': 'ajax_more_team',
'offset': count
}
$.ajax({
url: team_ajax.ajaxurl,
data: data,
type: 'POST',
dataType: 'html',
success: function(data){
if(data.length){
$("#ajax_posts").append(data);
button.attr("disabled",false);
} else{
button.attr("disabled",true);
}
}
});
return false;
}
$('#more_posts').click(function() {
$("#more_posts").attr("disabled",true); // Disable the button, temp.
load_more_team();
});
page.php
<div id="ajax_posts" class="row">
<?php
$args = array(
'post_type' => 'team',
'posts_per_page' => 12
);
$the_query = new WP_Query($args);
?>
<?php if($the_query->have_posts()) : while($the_query->have_posts()) : $the_query->the_post(); ?>
<?php $id = get_the_id(); ?>
<div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-4">
<div class="team-member">
<a href="#" data-toggle="modal" data-target="#<?php echo $id ?>">
<img class="img-fluid" src="<?php the_field('employee_headshot'); ?>" alt="<?php the_field('employee_name'); ?>">
</a>
<div class="team-info">
<h6><?php the_field('employee_name'); ?></h6>
</div>
<a href="" data-toggle="modal" data-target="#myModal">
<div class="modal-icon">
<img class="img-fluid" src="<?php bloginfo('template_directory');?>/imgs/modal-icon.svg">
</div>
</a>
</div>
<!-- Modal -->
<div class="modal fade" id="<?php echo $id ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="team-close-btn">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img class="img-fluid" src="<?php the_field('employee_headshot'); ?>" alt="Alice George">
<div class="team-info">
<h6><?php the_field('employee_name'); ?></h6>
<p><strong>Title:<br></strong> <?php the_field('employee_title'); ?></p>
<p><strong>Company:<br></strong> <?php the_field('employee_company'); ?></p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; endif; ?>
</div>
<?php
if( $the_query->max_num_pages > 1)
echo '<div id="more_posts" class="btn-primary mt-4">View More</div>'
?>
<?php wp_reset_postdata(); ?>
</div>
Updated to your code, this should work for you. I think count was a bit confusing, cause for me, it wasn't immediatly clear if it was a total amount or the current page.
Not sure how you're recieving the $offset value in your PHP function but $offset here should be just the POST value 'offset', no + 12 or anything. That way at first call you have a offset of 0 and get first 12 records starting at row 1, next time you have offset of 12 and get next 12 records (starting at the 13th row). Your post_per_page remain 12, while offset multiplies. Offset indicates from what records it should begin taking the "post_per_page" amount.
function ajax_more_team($offset) {
$offset = $_POST['offset'];
header("Content-Type: text/html");
$args = array(
'suppress_filters' => true,
'post_type' => 'team',
'posts_per_page' => 12,
'offset' => $offset,
);
$the_query = new WP_Query($args);
if ($the_query -> have_posts()) : while ($the_query -> have_posts()) : $the_query -> the_post();
//Loop content
endwhile;
endif;
wp_reset_postdata();
die($out);
}
-
var page = 1; // first page
function load_more_team() {
var button = $('#more_posts'),
data = {
'action': 'ajax_more_team',
'offset': page * 12 // first time 0 * 12 = offset 0
}
$.ajax({
url: team_ajax.ajaxurl,
data: data,
type: 'POST',
dataType: 'html',
success: function(data){
if(data.length){
$("#ajax_posts").append(data);
button.attr("disabled",false);
} else{
button.attr("disabled",true);
}
page++; // increment page after first request
}
});
return false;
}
var page = 2; // first page already loaded
function load_more_team() {
var button = $('#more_posts'),
data = {
'action': 'ajax_more_team',
'paged': page
}
$.ajax({
url: team_ajax.ajaxurl,
data: data,
type: 'POST',
dataType: 'html',
success: function(data){
if(data.length){
$("#ajax_posts").append(data);
button.attr("disabled",false);
} else{
button.attr("disabled",true);
}
page++; // increment page after request
}
});
return false;
}
function ajax_more_team() {
$paged = $_POST['paged'];
header("Content-Type: text/html");
$args = array(
'suppress_filters' => true,
'post_type' => 'team',
'post_status' => 'publish',
'posts_per_page' => 12,
'paged' => $paged,
);
$the_query = new WP_Query($args);
if ($the_query -> have_posts()) : while ($the_query -> have_posts()) : $the_query -> the_post();
//Loop content
endwhile;
endif;
wp_reset_postdata();
die($out);
}