get specific values from repeater fields with ajax

• mhkey

• January 13, 2023 at 1:57 pm

Hey there,

unfortunately I am not a programmer at all. I know there are a lot of examples how to get content with ajax in wordpress. My case seems a bit complicated. Before I go through “try and error” I wanted to ask if this is even possible:

I have a repeater field with sections. Each section has nested groups with text, images and extra contents. Now I want to create a “read more” to receive the extra content for each section with ajax to reduce the page load since there will be a lot of contents with images, videos..etc.

I also looked at the “repeater-ajax-load-more” – but Im not sure if I can modify this for my needs.

Could you please tell me if this is possible? If its to complicated I need to find a other solution.

• John Huebner

• January 15, 2023 at 11:04 am

There are a lot of examples of doing this available, but it can be complicated with a lot of moving parts. The only thing I can really do here is point you to examples.

A simpler options might be to hide rows of the repeater and add a simple button with associated JavaScript to alter the CSS to show rows when the button is clicked.

• mhkey

• January 15, 2023 at 6:19 pm

Hey John,

the “try and error” method actually works. My idea was to create json array for all my extra contents and get the specific values out of it. Im surprised it works 🙂

Can you please tell me if this is the proper way doing this or if there could be performance issues with this method?

function in functions.php:

function get_extra_content() { 
$content = array();
$args = array(
	'post_type' => array('page')
);
$result = new WP_Query($args);
if ($result->have_posts()): while ($result->have_posts()) : $result->the_post();
	if (have_rows('sections')) : while ( have_rows('sections') ) : the_row();
		if( have_rows('textbild')) : while ( have_rows('textbild') ) : the_row();
			if( have_rows('inhalte') ) : while ( have_rows('inhalte') ) : the_row();					
				if( have_rows('inhalt') ) : while ( have_rows('inhalt') ) : the_row();
					$more = get_sub_field('weitere_inhalte');
					$content[] = array(
						'content' => $more,
					);									
				endwhile; endif;			
			endwhile; endif;
		endwhile; endif;	
	endwhile; endif;
endwhile; endif;
echo json_encode($content);
wp_die();
}

the ajax stuff:

$('.morebtn').click(function() {
		sectionID = $(this).data('id');
		if ($(this).hasClass('open')) {
			$('#section'+sectionID+' .content .more .inner').empty();
			$(this).stop().toggleClass('open');
		}
		else {
        	show_read_more(sectionID);
        	$(this).stop().toggleClass('open');
        }
	});

	function show_read_more(sectionID) {

		$.ajax({
			url: ajax_actions.ajaxurl, 
			dataType: 'json',  
			data: {
				action: "get_extra_content"
			},
			beforeSend: function(){
				$('.spinner').show();	
			},
			complete: function(){
				$('.spinner').hide();		
			},
			success: function (data) {
				//console.log(data[sectionID].content);
				$('#section'+sectionID+' .content .more .inner').append(data[sectionID].content);
            },
            error: function (errorThrown) {
                $('#section'+sectionID+' .content .more .inner').append("error");
            }
		});
	}