Support

Account

Home Forums Backend Issues (wp-admin) Issue with acf/fields/flexible_content/layout_title & repeater fields

Solved

Issue with acf/fields/flexible_content/layout_title & repeater fields

  • Hello,

    I’m trying to get the acf/fields/flexible_content/layout_title filter working with repeater fields but there seems to be an issue with updating the title/s via ajax.

    Here’s what I’ve got so far:

    function my_acf_flexible_content_layout_title( $title, $field, $layout, $i ) {
    	
    	$title = '';
    		
    	if( have_rows('module_list_items') ):
    
    		while( have_rows('module_list_items') ) : the_row();
            
    			$title .= '<h3>' . $boldText = get_sub_field('module_text_title') . '</h3>';
    			$title .= '<p>' . $smallText = get_sub_field('module_smaller_text') . '</p>';
    
    		endwhile;
    
    	endif;
    	
    	return $title;
    
    }
    add_filter('acf/fields/flexible_content/layout_title/name=page_modules', 'my_acf_flexible_content_layout_title', 10, 4);

    This displays the repeater fields on the initial page load but if you remove a repeater field it removes all from the layout title. Also, if you add a repeater field it doesn’t update.

    Any help greatly appreciated.

    Thanks

  • Hi @newjenk

    Could you please share the JSON export file of your field group so I can check your setup? Could you also share some screenshots of the issue

    Also, please keep in mind that the title will be updated only when the layout is toggled open or closed, and it will only work with the flexible content subfields, not the other fields outside of the flexible content. This page should give you more idea about it: https://www.advancedcustomfields.com/resources/acf-fields-flexible_content-layout_title/.

    If you add a repeater row which is located outside of the flexible content, the data won’t be saved until you click the Update button. This means that you won’t be able to get the new row data as it’s not saved in the database yet. In this case, you need to use JavaScript code instead.

    I hope this makes sense 🙂

  • Hi @james,

    Thanks for your message.

    I’ve added the json as a private message below.

    I’ve attached a GIF which will hopefully make it a little clearer what the problem is.

    Thanks,

    Shaun

  • This reply has been marked as private.
  • Hi @newjenk

    It seems you need to handle the AJAX with a special code. The AJAX posts the data using the field key, so you need to do use it in the code. Here’s an example how to do that:

    function my_acf_flexible_content_layout_title_ajax( $title, $field, $layout, $i ) {
    	
        if( $layout['name'] != 'module_list' ) return $title;
        
    	$title = '';
        
        // code to handle the AJAX
        if( is_admin() && defined( 'DOING_AJAX' ) && DOING_AJAX ){
            
            // get the posted (new) repeater data
            // field_583ae9699490e: the flexible content field key
            // field_583de95713b2d: the repeater field key
            $new_repeater_data = $_POST['acf']['field_583ae9699490e'][$i]['field_583de95713b2d'];
            
            // loop through the repeater data
            foreach( $new_repeater_data as $row ){
                
                // field_583dea8513b2f: bold_text_title field key
                $title .= '<h3>' . $row['field_583dea8513b2f'] . '</h3>';
                
                // field_583deab013b30: smaller_text field key
    			$title .= '<p>' . $row['field_583deab013b30'] . '</p>';
                
            }
            
        } elseif ( have_rows('module_list_items') ){
    
    		while( have_rows('module_list_items') ) : the_row();
            
    			$title .= '<h3>' . $boldText = get_sub_field('bold_text_title') . '</h3>';
    			$title .= '<p>' . $smallText = get_sub_field('smaller_text') . '</p>';
    
    		endwhile;
    
        }
    	
    	return $title;
    
    }
    add_filter('acf/fields/flexible_content/layout_title/name=page_modules', 'my_acf_flexible_content_layout_title_ajax', 10, 4);

    I hope this helps 🙂

  • Hi @james,

    Thanks for your help, really appreciate it.

    The code you kindly provided is working when there’s repeater content already present on page load but if a repeater field is added then unfortunately the page title does not update.

    I’ve attched a gif showing the issue.

    Do you have any ideas about what the problem could be?

    Thanks again for your help.

    Shaun

  • Hi @newjenk

    I’m sorry I missed that. It seems the new layout has a different data structure. You can check it by using the network tab of your developer tools (Google Chrome).

    Here’s an example how to handle the new layout too:

    function my_acf_flexible_content_layout_title_ajax( $title, $field, $layout, $i ) {
    	
        if( $layout['name'] != 'module_list' ) return $title;
        
    	$title = '';
        
        // code to handle the AJAX
        if( is_admin() && defined( 'DOING_AJAX' ) && DOING_AJAX ){
            
            // set the keys for repeated usage
            // field_583ae9699490e: the flexible content field key
            // field_583de95713b2d: the repeater field key
            $flexible_key = 'field_583ae9699490e';
            $repeater_key = 'field_583de95713b2d';
            
            // get the flexible content data
            $flexible_data = $_POST['acf'][$flexible_key];
            
            // loop through the flexible content data
            foreach( $flexible_data as $flexible_row ){
                
                // check if the repeater is set
                if( isset($flexible_row[$repeater_key]) && !empty($flexible_row[$repeater_key]) ){
                    $repeater_data = $flexible_row[$repeater_key];
                    
                    // loop through the repeater data
                    foreach( $repeater_data as $row ){
                        
                        // field_583dea8513b2f: bold_text_title field key
                        $title .= '<h3>' . $row['field_583dea8513b2f'] . '</h3>';
                        
                        // field_583deab013b30: smaller_text field key
                        $title .= '<p>' . $row['field_583deab013b30'] . '</p>';
                        
                    }
                    
                }
            }
            
            
        } elseif ( have_rows('module_list_items') ){
    
    		while( have_rows('module_list_items') ) : the_row();
            
    			$title .= '<h3>' . $boldText = get_sub_field('bold_text_title') . '</h3>';
    			$title .= '<p>' . $smallText = get_sub_field('smaller_text') . '</p>';
    
    		endwhile;
    
        }
    	
    	return $title;
    
    }
    add_filter('acf/fields/flexible_content/layout_title/name=page_modules', 'my_acf_flexible_content_layout_title_ajax', 10, 4);

    I hope this helps 🙂

  • Thanks @james,

    The only issue I’ve got now is how to use an image array in a repeater field. So I’ve got the field key for the repeater field (which is an image array), but I’m not sure how to adapt your example to get the URL of the image?

    Any help you can provide is greatly appreciated.

    Thanks,

    Shaun

  • Hi @newjenk

    The image field will send the image ID in the AJAX request, so you need to get the image URL from this ID. I think you can use the wp_get_attachment_image_src() function to do that. So, it should be like this:

    $image_id = $row['field_1234567890abc'];
    $image_data = wp_get_attachment_image_src($image_id, 'full');
    
    if( $image_data ){
        $image_url = $image_data[0];
        echo $image_url;
    }

    Where “field_1234567890abc” is the image field key.

    Hope this helps 🙂

  • Thanks for your help @james, really appreciate it.

    Have a great weekend.

  • Hi @james,

    I updated to version 5.5.14 last night and unfortunately the above solution no longer seems to work :-(.

    Do you have any idea on what may of changed in the latest build?

    Thanks,

    Shaun

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

You must be logged in to reply to this topic.