I am trying to add a button to load more ACF repeted fields via AJAX. The code seems fine but the button is not working. I have added the limit of posts to show on page load to 3 which is working but upon clicking on the button there is an error in the console. Can’t figure out how to fix that. Can anyone help me fix that. Thanks
Here is the PHP and the JS:
<?php
<?php if (have_rows('news_events')) :
$total = count(get_field('news_events'));
?>
<section class="back-to-previous">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="page-back">
<button class="goback" onclick="history.back()"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Go Back</button>
</div>
</div>
</div>
</div>
</section>
<section class="news-events">
<div class="container">
<div class="row" id="news_events_posts">
<?php
$number = 3; // the number of rows to show
$count = 0; // a counter
while (have_rows('news_events')) : the_row();
?>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="blog-box">
<a target="_blank" href="<?php the_sub_field('uplod_pdf_'); ?>">
<?php $image = get_sub_field('image');
if (!empty($image)) : ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</a>
<div class="event-details">
<div class="event-title"><a target="_blank" href="<?php the_sub_field('uplod_pdf_'); ?>"> <?php the_sub_field('title'); ?> </a></div>
</div>
</div>
</div>
<?php
$count++;
if ($count == $number) {
// we've shown the number, break out of loop
break;
}
endwhile; ?>
</div>
<a id="my-repeater-show-more-link" href="javascript: my_repeater_show_more();" <?php if ($total < $count) { ?> style="display: none;" <?php } ?>>Show More</a>
<script type="text/javascript">
var my_repeater_field_post_id = <?php echo $post->ID; ?>;
var my_repeater_field_offset = <?php echo $number; ?>;
var my_repeater_field_nonce = '<?php echo wp_create_nonce('my_repeater_field_nonce'); ?>';
var my_repeater_ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>';
var my_repeater_more = true;
function my_repeater_show_more() {
// make ajax request
jQuery.post(
my_repeater_ajax_url, {
// this is the AJAX action we set up in PHP
'action': 'my_repeater_show_more',
'post_id': my_repeater_field_post_id,
'offset': my_repeater_field_offset,
'nonce': my_repeater_field_nonce
},
function(json) {
// add content to container
// this ID must match the containter
// you want to append content to
jQuery('#news_events_posts').append(json['content']);
// update offset
my_repeater_field_offset = json['offset'];
// see if there is more, if not then hide the more link
if (!json['more']) {
// this ID must match the id of the show more link
jQuery('#my-repeater-show-more-link').css('display', 'none');
}
},
'json'
);
};
</script>
</div>
</section>
<?php endif; ?>
2
Answers
So let’s check the possible errors:
There is duplicate <?php tag: Remove the duplicate <?php tag at the beginning of the code.
I can see also PHP error in the while loop: The PHP while loop is missing the closing } bracket. Add the closing bracket } after the endwhile; statement.
Incorrect placement of the "Show More" link: Move the closing tag of the "Show More" link outside the tag of the container with the id="news_events_posts". Currently, it is placed within the container div, which is causing invalid HTML structure.
After changes you should get:
It is recommended to use a
<button>rather than an<a>for this type of functionality (better for accessibility). That means that thehrefattribute will not be valid, so we use theonClickattribute instead.You could also move the event listener (remove the
onClickattribute) into the<script>block like this: