Load Repeater Images via AJAX

• mark_pcs

• September 25, 2018 at 9:47 pm

Hey all,

I have a Gallery page on a site I’m working on with multiple galleries (repeater), which have multiple images associated with them (also repeaters). So essentially, I have repeaters within repeaters

What I’m trying to do is display a main gallery thumb which is clickable, which loads the other gallery thumbs via AJAX in to a div, which in turn are clickable to show as fancybox images

Here is the ACF setup in case you don’t understand:

GALLERIES (repeater field)
– Gallery Name (text field)
– Gallery Main Thumb (this is the first displayed image on the page – image field)
– Images (Gallery images – repeater field)

So far, i’ve got the loop done for the galleries themselves displaying the Gallery Name and Gallery Main Thumb like this:

<div id="frame">
   <?php
   if(have_rows('gallery')) : while(have_rows('gallery')) : the_row();
   $image = get_sub_field('gallery_thumb');
   $size = 'thumbnail';
   $thumb = $image['sizes'][ $size ]; ?>
   <div class="gal">
	<a href="#" title="View Gallery"><?php echo wp_get_attachment_image( $image, $size ); ?></a>
	<div class="overlay"><?php the_sub_field('gallery_name'); ?></div>
   </div>
   <?php endwhile; endif; ?>
   <div id="images">
	<!-- gallery images here via AJAX -->
   </div>
</div>

As you can see, I want to click the image in the “gal” div and load the subsequent images in the “images” div…

Any ideas?

Thanks

• Matt

• October 15, 2018 at 7:16 pm

Any progress with this? I’m trying to do something similar, but pulling values from a repeater field in another page to a popup box on another. I’ve managed to get the first result, using ajax, but I’m unsure how to pull in all of the values.

This is my code that’s pulling in a single value from the repeater field:

$field.change(function () { // $field = select dropdown
	var post_id = $(this).val(); // value of select dropdown = page id where repeater is located
	var postData = {
		action : 'data_fetch',
		'post_id' : post_id
	}
	var $customList = $(this).closest('.acf-row').find('#modal .checkbox-list-custom'); // element I'm displaying data in (i have multiple divs I want to populate with values)
	$.post( ajaxurl, postData ).done(function(result) {
		var resultLower = result.toLowerCase();
		var result = $('<li><label><input id="test" type="checkbox" value="'+resultLower+'">'+result+'</label></li>');
		$customList.empty(); // emptying the div of any previous data
		$customList.append(result); // appending results to div
	});
	
	$(this).closest('.acf-row').find('#modal:eq(0)').addClass('visible'); // making relevant div visible after the above has completed
});

add_action('wp_ajax_data_fetch', 'data_fetch'); // logged in users
add_action('wp_ajax_nopriv_data_fetch', 'data_fetch'); // other users
function data_fetch(){
	$post_id = filter_input( INPUT_POST, 'post_id' );
	$array = array();
	if(have_rows('new_colour', $post_id)) :
		while(have_rows('new_colour', $post_id)) : the_row();
			$array = get_sub_field('colour_name', $post_id);
			foreach ($array as $item) {
				$array[$array] = $item;
			}
		endwhile;
	endif;

	wp_send_json($array); //Use WP send json function
	wp_die();
}

I don’t know whether my partial answer will be of any use, but if you manage to adjust any of it to pull in all values I’d be very interested in seeing what you come up with.

• mark_pcs

• October 15, 2018 at 7:51 pm

Hey,

Cheers for the reply. I ended up doing it a completely different way in the end! Couldn’t figure it out.

Your code is very very similar to what I had (before I changed it) except my div to lad the content in was on the same page as the clicked link

I hope someone else knows a way of achieving it, as I’m sure someone else will want to know how to do it some day!

• Matt

• October 15, 2018 at 8:24 pm

No problem! This seems to be one of the few things that isn’t documented all that much anywhere. I feel like I’ve looked through all of Google so far! Haha.

Seems like it’s something a few people are looking to achieve, but yet all I find it people pointing people to the “Dynamically populating a select field” post, which I’m sure you’ve probably seen as well!

Hopefully something relating to this issue appears soon.

• Matt

• October 16, 2018 at 12:57 am

As if by magic, I’ve managed to pull the values in from my repeater field! This is the code I’m using:

add_action('wp_ajax_data_fetch', 'data_fetch'); // logged in users
add_action('wp_ajax_nopriv_data_fetch', 'data_fetch'); // other users
function data_fetch(){
	$post_id = filter_input( INPUT_POST, 'post_id' ); // post id passed from select value via ajax

	$array = array(); // setup empty array
	$rows = get_field('new_colour', $post_id); // repeater field
	if($rows)
	{
		foreach($rows as $row) // foreach for each repeater row
		{
			$array[] = '<li data-id="' . esc_attr( $row['unique_id'] ) . '"><label><input type="checkbox" value="' . get_the_title($post_id) . " - " . $row['colour_name'] . '">' . $row['colour_name'] . '</label></li>'; // stuff I want to display on the div I'm appending the repeater values to
		}
	}

	wp_send_json($array); //Use WP send json function - send data back to the page I'm displaying the div on
}

$field.change(function () { // $field = select dropdown

	var post_id = $(this).val(); // value of select dropdown = page id where repeater is located

	var data = {
		action : 'data_fetch',
		'post_id' : post_id
	}
	var $customList = $(this).closest('.acf-row').find('#modal .checkbox-list-custom'); // element I'm displaying data in (i have multiple divs I want to populate with values)

	$.post( ajaxurl, data ).done(function(result) {
		$customList.empty(); // emptying the div of any previous data
		$customList.append(result); // appending results to div
	});					
	
	$modal.removeClass('visible'); // hide other open divs for additional select relationship field drop downs
	$(this).closest('.acf-row').find('#modal:eq(0)').addClass('visible'); // making relevant div visible after the above has completed

});

Ended up swapping the while loop for a foreach loop, which for some reason made all of my code start working. Not really sure why, but my headache has disappeared!

The only thing I’ve not yet done is add in the relevant code to save the metadata to the post, but I’ll try and get that working correctly tomorrow probably.