Home › Forums › Add-ons › Options Page › Dynamic select values not saving
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?
-
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.
-
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.
The topic ‘Dynamic select values not saving’ is closed to new replies.
Welcome
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Forums
Helping Others
Helping others is a great way to earn karma, gain badges and help ACF development!