ACF repeater and AJAX

• robertsay

• February 21, 2017 at 4:53 am

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 😉

• robertsay

• February 21, 2017 at 5:40 am

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"}