Support

Account

Home Forums Add-ons Repeater Field "Load More" Repeater Fields via AJAX

Solved

"Load More" Repeater Fields via AJAX

  • Hi All,

    I have a page with 45 rows in a repeater field called issues

    I have managed to get the rows to only display 6 at a time, and following this tutorial I have managed to get the pagination to work

    Now, my question is, how would I go about changing the pagination to a ‘Load More’ button, that loads the next 6 rows via an AJAX call?

    Current Code:

    <?php
    if( get_query_var('page') ) {
    	$page = get_query_var( 'page' );
    } else {
    	$page = 1;
    }						
    $row = 0;
    $issues_per_page = 6; // How many images to display on each page
    $issues = get_field('issues');
    $total = count( $issues );
    $pages = ceil( $total / $issues_per_page );
    $min = ( ( $page * $issues_per_page ) - $issues_per_page ) + 1;
    $max = ( $min + $issues_per_page ) - 1;
    
    if(have_rows('issues')) : ?>
    <h4>The Latest Issues</h4>
    <div class="magazine">
            <?php while(have_rows('issues')): the_row();
    	$row++;
    	if($row < $min) {
    		continue;
    	} if($row > $max) {
    		break;
    	} ?>
    	<div class="issue">
    		<span><i class="fa fa-file" aria-hidden="true"></i></span>
    		<span><strong><?php the_sub_field('issue_name'); ?></strong><br/><a href="<?php the_sub_field('pdf'); ?>" download="<?php the_sub_field('issue_name'); ?>" title="<?php the_sub_field('issue_name'); ?>">Download</a></span>
    	</div>
    	<?php endwhile; ?>
    </div>
    <div class="pagi">
    <?php
    echo paginate_links( array(
    	'base' => get_permalink() . '%#%' . '/',
    	'format' => '?page=%#%',
    	'current' => $page,
    	'total' => $pages
    ) ); ?>
    </div>
    <?php endif; ?>
  • FYI: The Page in question can be found here

  • I have added an example of front end load more functionality for a repeater on the front end of a site. It’s just the basics, but it’s a working example including a field group to test it with. The included field group will only work with ACF 5, but the rest of it should work with ACF4 as well.https://github.com/Hube2/acf-dynamic-ajax-select-example/tree/master/repeater-ajax-load-more

  • Hi John,

    I’ve tried your solution, but it doesn’t seem to want to append any more to the container.

    Here is the page in question: link

    Full page template code: pastebin link

    I can’t see what’s wrong…

    Thanks

  • The AJAX function from the file repeater-ajax-load-more.php needs to go in your functions.php file so that is is available during AJAX requests. I’ve updated the comments in the example to indicate this.

  • Ta-Dah! Perfect, thanks @hube2 all working now

  • @hube2 I am using your code and it is working but is a bit slow to load the rest of the data.
    Do you have an idea on how I can debug it to find the bottle neck?

  • I guess it would depend on what’s in your repeater. If there is a lot of rows and a lot of data it could take a while. The more data you have the longer subsequent calls will take. Also, the amount of HTML that your generating could also effect the load speed. My example is only a very basic one that takes the html returned and stuffs it into another element and html is not a compact, quick loading format. For something with a lot of data and a lot of html generated it would probably be better to return the data as a JSON object and then build the HTML on the client side using JavaScript instead of generating it with PHP.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.