Support

Account

Home Forums Add-ons Options Page Dynamic select values not saving

Solving

Dynamic select values not saving

  • I am building an options page to build a stylesheet using ACF Repeaters and Groups. Everything so far is working fine but when I try and save a select menu populated dynamically it doesn’t seem to work.

    Adding colours saves ok, but when trying to apply those colours to a font it won’t save:

    <?php
    
    if( function_exists('acf_add_options_page') ) {
    
        acf_add_options_page('branding');
    
    }
    
    function acf_load_color_field_choices( $field ) {
        $field['choices'] = array();
    
        if( have_rows('colors', 'option') ) {
            while( have_rows('colors', 'option') ) {
                the_row();
                $i = get_row_index();
                $color = get_sub_field('color');
                $value = 'color_' . $i; // should be the id (or other non-editbale
                $label = $color['color_name'] . ' (#'.$color['hex_value'].')' . trim($value);
                $field['choices'][trim($value) ] = $label;
            }
        }
        acf_update_field($field);
        return $field;
    }
    
    add_filter('acf/load_field/key=field_5a26f80a9084c', 'acf_load_color_field_choices');
    
    if( function_exists('acf_add_local_field_group') ):
    
        acf_add_local_field_group(array (
            'key' => 'group_5a26f61e384d7',
            'title' => 'Base Styles',
            'fields' => array (
                array (
                    'key' => 'field_5a26f926cacb1',
                    'label' => 'Colors',
                    'name' => 'colors',
                    'type' => 'repeater',
                    'instructions' => '',
                    'required' => 1,
                    'conditional_logic' => 0,
                    'wrapper' => array (
                        'width' => '',
                        'class' => '',
                        'id' => '',
                    ),
                    'collapsed' => 'field_5a26f926cacb2',
                    'min' => 0,
                    'max' => 0,
                    'layout' => 'block',
                    'button_label' => 'Add Color',
                    'sub_fields' => array (
                        array (
                            'key' => 'field_5a26f926cacb2',
                            'label' => 'Color',
                            'name' => 'color',
                            'type' => 'group',
                            'instructions' => '',
                            'required' => 0,
                            'conditional_logic' => 0,
                            'wrapper' => array (
                                'width' => '',
                                'class' => '',
                                'id' => '',
                            ),
                            'layout' => 'block',
                            'sub_fields' => array (
                                array (
                                    'ID' => 12616,
                                    'key' => 'field_5a26f926cacb3',
                                    'label' => 'Color name',
                                    'name' => 'color_name',
                                    'prefix' => 'acf',
                                    'type' => 'text',
                                    'value' => NULL,
                                    'menu_order' => 0,
                                    'instructions' => 'e.g. primary, secondary tertiary',
                                    'required' => 0,
                                    'id' => '',
                                    'class' => '',
                                    'conditional_logic' => 0,
                                    'parent' => 12615,
                                    'wrapper' => array (
                                        'width' => '',
                                        'class' => '',
                                        'id' => '',
                                    ),
                                    '_name' => 'color_name',
                                    '_prepare' => 0,
                                    '_valid' => 1,
                                    'default_value' => '',
                                    'placeholder' => '',
                                    'prepend' => '',
                                    'append' => '',
                                    'maxlength' => '',
                                ),
                                array (
                                    'ID' => 12617,
                                    'key' => 'field_5a26f926cacb4',
                                    'label' => 'Hex value',
                                    'name' => 'hex_value',
                                    'prefix' => 'acf',
                                    'type' => 'text',
                                    'value' => NULL,
                                    'menu_order' => 1,
                                    'instructions' => '',
                                    'required' => 1,
                                    'id' => '',
                                    'class' => '',
                                    'conditional_logic' => 0,
                                    'parent' => 12615,
                                    'wrapper' => array (
                                        'width' => '',
                                        'class' => '',
                                        'id' => '',
                                    ),
                                    '_name' => 'hex_value',
                                    '_prepare' => 0,
                                    '_valid' => 1,
                                    'default_value' => '0000',
                                    'placeholder' => '',
                                    'prepend' => '#',
                                    'append' => '',
                                    'maxlength' => 6,
                                ),
                                array (
                                    'ID' => 12618,
                                    'key' => 'field_5a26f926cacb5',
                                    'label' => 'RGB value',
                                    'name' => 'rgb_value',
                                    'prefix' => 'acf',
                                    'type' => 'text',
                                    'value' => NULL,
                                    'menu_order' => 2,
                                    'instructions' => '',
                                    'required' => 1,
                                    'id' => '',
                                    'class' => '',
                                    'conditional_logic' => 0,
                                    'parent' => 12615,
                                    'wrapper' => array (
                                        'width' => '',
                                        'class' => '',
                                        'id' => '',
                                    ),
                                    '_name' => 'rgb_value',
                                    '_prepare' => 0,
                                    '_valid' => 1,
                                    'default_value' => '',
                                    'placeholder' => '',
                                    'prepend' => '',
                                    'append' => '',
                                    'maxlength' => 11,
                                ),
                            ),
                        ),
                    ),
                ),
                array (
                    'key' => 'field_5a26f637f9ccb',
                    'label' => 'Fonts',
                    'name' => 'fonts',
                    'type' => 'repeater',
                    'instructions' => '',
                    'required' => 1,
                    'conditional_logic' => 0,
                    'wrapper' => array (
                        'width' => '',
                        'class' => '',
                        'id' => '',
                    ),
                    'collapsed' => '',
                    'min' => 0,
                    'max' => 0,
                    'layout' => 'table',
                    'button_label' => 'Add Font',
                    'sub_fields' => array (
                        array (
                            'key' => 'field_5a26f77990848',
                            'label' => 'Font',
                            'name' => 'font',
                            'type' => 'group',
                            'instructions' => '',
                            'required' => 0,
                            'conditional_logic' => 0,
                            'wrapper' => array (
                                'width' => '',
                                'class' => '',
                                'id' => '',
                            ),
                            'layout' => '',
                            'sub_fields' => array (
                                array (
                                    'ID' => 12610,
                                    'key' => 'field_5a26f7c49084a',
                                    'label' => 'Font name',
                                    'name' => 'font_name',
                                    'prefix' => 'acf',
                                    'type' => 'text',
                                    'value' => NULL,
                                    'menu_order' => 0,
                                    'instructions' => 'e.g. primary, secondary tertiary',
                                    'required' => 0,
                                    'id' => '',
                                    'class' => '',
                                    'conditional_logic' => 0,
                                    'parent' => 12609,
                                    'wrapper' => array (
                                        'width' => '',
                                        'class' => '',
                                        'id' => '',
                                    ),
                                    '_name' => 'font_name',
                                    '_prepare' => 0,
                                    '_valid' => 1,
                                    'default_value' => '',
                                    'placeholder' => '',
                                    'prepend' => '',
                                    'append' => '',
                                    'maxlength' => '',
                                ),
                                array (
                                    'ID' => 12611,
                                    'key' => 'field_5a26f7a090849',
                                    'label' => 'Font family',
                                    'name' => 'font_family',
                                    'prefix' => 'acf',
                                    'type' => 'select',
                                    'value' => NULL,
                                    'menu_order' => 1,
                                    'instructions' => '',
                                    'required' => 1,
                                    'id' => '',
                                    'class' => '',
                                    'conditional_logic' => 0,
                                    'parent' => 12609,
                                    'wrapper' => array (
                                        'width' => '',
                                        'class' => '',
                                        'id' => '',
                                    ),
                                    '_name' => 'font_family',
                                    '_prepare' => 0,
                                    '_valid' => 1,
                                    'choices' => array (
                                        'one' => 'One Potato',
                                        'two' => 'Two Potato',
                                    ),
                                    'default_value' => array (
                                    ),
                                    'allow_null' => 1,
                                    'multiple' => 0,
                                    'ui' => 1,
                                    'ajax' => 1,
                                    'return_format' => 'value',
                                    'placeholder' => '',
                                ),
                                array (
                                    'ID' => 12612,
                                    'key' => 'field_5a26f7fa9084b',
                                    'label' => 'Font size',
                                    'name' => 'font_size',
                                    'prefix' => 'acf',
                                    'type' => 'text',
                                    'value' => NULL,
                                    'menu_order' => 2,
                                    'instructions' => '',
                                    'required' => 1,
                                    'id' => '',
                                    'class' => '',
                                    'conditional_logic' => 0,
                                    'parent' => 12609,
                                    'wrapper' => array (
                                        'width' => '',
                                        'class' => '',
                                        'id' => '',
                                    ),
                                    '_name' => 'font_size',
                                    '_prepare' => 0,
                                    '_valid' => 1,
                                    'default_value' => '',
                                    'placeholder' => '',
                                    'prepend' => '',
                                    'append' => '',
                                    'maxlength' => '',
                                ),
                                array (
                                    'ID' => 12613,
                                    'key' => 'field_5a26f80a9084c',
                                    'label' => 'Font color',
                                    'name' => 'font_color',
                                    'prefix' => 'acf',
                                    'type' => 'select',
                                    'value' => NULL,
                                    'menu_order' => 3,
                                    'instructions' => '',
                                    'required' => 0,
                                    'id' => '',
                                    'class' => '',
                                    'conditional_logic' => 0,
                                    'parent' => 12609,
                                    'wrapper' => array (
                                        'width' => '',
                                        'class' => '',
                                        'id' => '',
                                    ),
                                    '_name' => 'font_color',
                                    '_prepare' => 0,
                                    '_valid' => 1,
                                    'choices' => array (
                                    ),
                                    'default_value' => array (
                                    ),
                                    'allow_null' => 0,
                                    'multiple' => 0,
                                    'ui' => 1,
                                    'ajax' => 1,
                                    'return_format' => 'value',
                                    'placeholder' => '',
                                ),
                            ),
                        ),
                    ),
                ),
            ),
            'location' => array (
                array (
                    array (
                        'param' => 'options_page',
                        'operator' => '==',
                        'value' => 'acf-options-branding',
                    ),
                ),
            ),
            'menu_order' => 0,
            'position' => 'normal',
            'style' => 'default',
            'label_placement' => 'top',
            'instruction_placement' => 'label',
            'hide_on_screen' => '',
            'active' => 1,
            'description' => '',
        ));
    
    endif;
    

    Any ideas why this is happening?

    • mxttsco

    • October 16, 2018 at 9:39 pm

    Did you manage to find an answer to saving items that are populated? I currently have a dynamically populated popup box containing checkboxes that I’d like to save to the post.

  • Going back to the original code.

    The field being loaded with dynamic choices is being loaded from a field in the same group. The choices of this field will not load anything until after the page is saved the first time and the other field has values in it. The “choices” of the dynamic field will always lag behind the field you are populating from. This will not work dynamically to pull choices entered in the same page.

    To dynamically populate the choices in this way you would need to do this with JavaScript

  • @mxttsco Hey, have you solve your issue regarding saving items that are populated? Am having the same issue.

    • mxttsco

    • October 29, 2018 at 10:34 pm

    Hi @bluerhinomiami, yes I did.

    I used the following code in my plugin .php file (or it can go in the functions.php file if you’re not creating a plugin):

    
    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
    
    	$rows = 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'] ) . '"><input type="text" name="" value="' . $row['colour_name'] . '"><a class="remove-checkbox dashicons dashicons-trash"></a></li>';
    		}
    	}
    
    	wp_send_json($array); //Use WP send json function - send data back to the page I'm displaying the div on
    }
    

    The $row['unique_id'] section for the data-id is making use of the Unique ID addon for ACF.

    The following js function is what I’m calling when the select box changes:

    
    function reload_colours($el) {
        $el.closest('.acf-row').find('.all-colours span').empty();
        var post_id = $el.closest('.acf-row').find('select').val(); // value of select dropdown = page id where repeater is located
        var data = {
            action: 'data_fetch',
            'post_id': post_id
        }
        var $customList = $el.closest('.acf-row').find('#modal:eq(0) .acf-checkbox-list'); // element I'm displaying data in (i have multiple divs I want to populate with values)
        var dataid = $el.closest('.acf-row').data('id');
        $.post(ajaxurl, data).done(function (result) {
            $customList.find('li').not(':first').remove(); // emptying the div of any previous data
            $customList.append(result); // appending results to div
            $el.closest('.acf-row').find('#modal:eq(0) .acf-checkbox-list input[type="text"]').attr({ 'readonly': true, 'name': 'acf[field_5b55d0491f741][' + dataid + '][field_5bbb6a62912a9][]'});
        });
    }
    

    Basically what’s happening is I’m populating the .acf-checkbox-list div, that is being generated by ACF, with text boxes that contain the values from selected custom post. This is essentially replicating what happens when you click the button to add a new custom checkbox value, and then when you click save it appears that ACF does the work for you in saving the data to the post.

    Hopefully that points you in the right direction.

    If you need my acf json file just let me know.

    EDIT: Forgot to mention that the field keys being used in my ajax call will obviously be different to yours. I just copied the field keys being used by the default “add a custom value” button if I remember correctly.

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.