4
votes

I am following a Github code to add load more to ACF repeater field. I have 101 fields but load more not working. I tried to bebug too. Ajax response is 0. May be via ajax its not working. Do I have to add anything on functions.php file. Ajax response is 0.

<?php 

    /*
        The code in this file is an example off the code that you would use in your template to
        show the first X number of rows of a repeater

        I'm sure there are more elegant ways to do the JavaScript, but what's here will work
    */

    if (have_rows('gallery_work', 'option')) {
        // set the id of the element to something unique
        // this id will be needed by JS to append more content
        $total = count(get_field('gallery_work', 'option'));
        ?>
            <ul id="my-repeater-list-id">
                <?php 
                    $number = 2; // the number of rows to show
                    $count = 0; // a counter
                    while( have_rows('gallery_work', 'option') ):the_row();
                        //the_row();
                        $image_se_work = get_sub_field('image_se_work', 'option');
                        ?>
                            <li><img src="<?php echo $image_se_work;?>" alt=""></li>
                        <?php 
                        $count++;
                        if ($count == $number) {
                            // we've shown the number, break out of loop
                            break;
                        }
                    endwhile; // end while have rows
                ?>
            </ul>
            <!-- 
                add a link to call the JS function to show more
                you will need to format this link using
                CSS if you want it to look like a button
                this button needs to be outside the container holding the
                items in the repeater field
            -->
            <a id="my-repeater-show-more-link" href="javascript:void(0);" onclick="my_repeater_show_more();"<?php 
                if ($total < $count) {
                    ?> style="display: none;"<?php 
                }
                ?>>Show More</a>
            <!-- 
                The JS that will do the AJAX request
            -->
            <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
                    $.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
                            $('#my-repeater-list-id').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
                                $('#my-repeater-show-more-link').css('display', 'none');
                            }
                            console.log(json);
                        },
                        'json'
                    );
                }

                console.log(<?php echo $total;?>);

            </script>
        <?php       
    } // end if have_rows

?>
1

1 Answers

2
votes

You only have one file of a 2 file example here. This is the code that goes in the template. The PHP side of the this example is in the other PHP file https://github.com/Hube2/acf-dynamic-ajax-select-example/tree/master/repeater-ajax-load-more and includes the WP AJAX action that you need to add to your functions.php file.