Home › Forums › Backend Issues (wp-admin) › ACF repeater and AJAX
Hi everyone,
I’m a French student and I’ve to do a project about the America Presidential Election.
So, we decided to talk about Trump and Hillary Programms.
We use WordPress and ACF Pro and want to display with a repeater field the program of each candidate.
But we had a problem with the pagination because we want to display only 3 idea per page.
So, we do this (categories_template.php):
<?php
/*
Template Name: Catégories template
*/
?>
<?php get_header(); ?>
<section class="left-nav-categories">
<header class="header-logo">
<a href="#"><img src="" alt=""></a>
</header>
<?php if ( has_nav_menu('menu-trump') ) : ?>
<nav role="navigation" id="topmenu">
<?php wp_nav_menu( array( 'theme_location' => 'menu-trump' ) ); ?>
</nav>
<?php endif; ?>
<footer>
<ul>
<li>TEAM02. © 2017. ALL RIGHTS RESERVED.</li>
<li>
<ul class="social-links">
<li class="social-elements"><a href="#" class="icon icon-facebook"></a></li>
<li class="social-elements"><a href="#" class="icon icon-twitter"></a></li>
</ul>
</li>
</ul>
</footer>
</section>
<section class="right-content-categories">
<h1 class="category-title"><?php the_field('titre_proposition'); ?></h1>
<span class="category-subtitle"><?php the_field('sous-titre_proposition');?></span>
<?php
/*
* Paginate Advanced Custom Field repeater
*/
if( ('page') ) {
$page = get_query_var( 'page', 1);
} else {
$page = 1;
}
if($page < 2) {
$page = 1;
}
// Variables
$row = 0;
$posts_per_page = 3; // How many images to display on each page
$content = get_field( 'propositions' );
$total = count( $content );
$pages = ceil( $total / $posts_per_page );
$min = ( ( $page * $posts_per_page ) - $posts_per_page ) + 1;
$max = ( $min + $posts_per_page ) - 1;
?>
<?php if( have_rows('propositions') ): ?>
<ol class="container-propositions">
<?php while( have_rows('propositions') ): the_row();
$row++;
// Ignore this row if $row is lower than $min
if($row < $min) { continue; }
// Stop loop completely if $row is higher than $max
if($row > $max) { break; }
$sub_field = get_sub_field('texte');
?>
<li class="propositions">
<?php echo $sub_field; ?>
</li>
<?php endwhile; ?>
</ol>
<div class="pagination">
<?php
// Pagination
echo paginate_links( array(
'base' => get_permalink() . '%#%' . '/',
'format' => '?page=%#%',
'current' => $page,
'total' => $pages,
'type' => 'plain'
) );
?>
</div>
<?php endif; ?>
</section>
<script>
$(document).on( 'click', 'div.pagination a.page-numbers', function( event ) {
event.preventDefault();
var ajaxurl = "<?php echo admin_url('admin-ajax.php')?>";
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
'action': 'my_ajax_action',
'post_id': <?php echo get_the_ID(); ?>
},
success : function(data) {
$('html').append(data);
console.log(data);
},
function(data){
// console.log(data);
}
});
});
$('#topmenu ul li.menu-item a').mouseenter(function(){
$('#topmenu ul li.menu-item.current_page_item a').addClass('other-hover');
});
$('#topmenu ul li.menu-item a').mouseleave(function(){
$('#topmenu ul li.menu-item.current_page_item a').removeClass('other-hover');
});
</script>
and in functions.php
$post_id = $_POST['post_id'];
if( have_rows('propositions', $post_id) ):
$data = [];
// loop through the rows of data
while ( have_rows('propositions', $post_id) ) : the_row();
// display a sub field value
$data = get_sub_field('texte');
endwhile;
wp_send_json_success( $data );
else :
wp_send_json_error( 'test' );
endif;
}
Can someone can help us ? Thank you 😉
If i click to the paginate link the AJAX response is :
{"success":true,"data":"<p>Le Lorem Ipsum est simplement du faux texte employ\u00e9 dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les ann\u00e9es 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour r\u00e9aliser un livre sp\u00e9cimen de polices de texte. Il n'a pas fait que survivre cinq si\u00e8cles, mais s'est aussi adapt\u00e9 \u00e0 la bureautique informatique, sans que son contenu n'en soit modifi\u00e9. Il a \u00e9t\u00e9 popularis\u00e9 dans les ann\u00e9es 1960 gr\u00e2ce \u00e0 la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus r\u00e9cemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.<\/p>\n"}
The topic ‘ACF repeater and AJAX’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.