Dynamically populate repeater select subfields per row

• scooterlord

• August 22, 2020 at 12:15 am

I have a repeater field that contains 2 select fields: manufacturer and model, which connected with each other and are dynamically populated through json using prepare_field. After the page loads I am using javascript to dynamically populate the model select based on the manufacturer select.

I am also using acf_form to create posts. When editing the posts, I only want to populate the brand field based on the selection manufacturer field of each row.

When using the prepare_field action on the repeater, the $field variable only allows a single list of [choices] for all repeater rows.

So here is the question:

– Is there any way to specifically target individual repeater rows? Ideally I would use the prepare_field on each row individually, get the manufacturer of that row and populate based on the selection the [choices] for the model select field.

– I have seen that if a repeater field has multiple rows it gets a name like: acf[field_5eeb35aec30c1][row-0][field_5eeb35dfc30c3] – which is essentially the repeater field key – row – select field key. How can I target a select field using this name?

Looking forward to your reply, I’ve been stuck for a full day! :/

• John Huebner

• August 22, 2020 at 11:52 pm

This is not possible without using JS/AJAX. As you have found, acf/prepeare_field only runs once for sub fields of a repeater. I have actually looked into doing this with repeater sub fields and found it impossible.

The main issue that this will cause is that after a post is saved, since the field actually has no choices any value that the field has will be removed because it cannot be selected. The only thing that you can do to prevent this is to make sure that any already selected values exist as a choice.

add_filter('acf/prepare_field/name={DYNAMIC SELECT FIELD NAME}', 'populate_selected');
function populate_selected($field) {
  // I don't recall how to get the post ID at the moment
  // you may be able to use global $post
  // or you may need to look at $_GET value
  $post_id = ?? 
  $choices = array();
  if (have_rows('repeater', $post_id)) {
    while (have_rows('repeater', $post_id)) {
      the_row();
      $choices[get_sub_field('select field')] = get_sub_field('select field');
    }
  }
  $field['choices'] = $choices;
  return $field;
}

In your JS you can get the selected value before populating the field and then after your AJAX and the field is populated you can then reset the selected value.

Not sure if any of this will help you.

Let me know if you have questions about targeting each row in your JS to populate the model field based on the manufacturer of that row but basically it looks something like

var other_field = $(field).closest('.acf-row').find('[data-key-"field_XXXXX"] select');

• scooterlord

• August 23, 2020 at 12:48 am

John,
thank you for your help, I’ve been visiting the forums often and your posts have been very helpful to me so far.

I realize that the problem derives from the fact that each repeater subfield can only have a specific set of choices, but I wonder why – hopefully the plugin is extended to support this.. at least target something.

The function you are describing would be great, as long as I can target what you describe as {DYNAMIC SELECT FIELD NAME}. How do you target this?

Other than that, populating the field like this is not causing any issues with non-repeater fields, so it might not be a problem here either.

The way I am using to populate the select field (in non-repeater fields) so it includes the necessary choices, is something like you proposed.. I use a $_GET variable with the post_id and using this I retrieve the manufacturer selection; after that I populate using the prepare_field and the json file – so, when the field is rendered, it already includes the saved model in its choices.

For the repeater field the closest I can get to is to use the post_id and loop all selected manufacturers and create a choice-list that includes the sum of all manufacturers… which is not what I want.

The alternative is simply to run a JS function and populate all select fields individually, but this happens client-side and is somewhat heavy.

So essentially the question is… how can I target individually a select field at a specific repeater row using something like what you proposed – {DYNAMIC SELECT FIELD NAME}?

• John Huebner

• August 30, 2020 at 11:47 pm

You may need to use the field key to target the sub field of a repeater. Names of repeater sub fields may not work

add_filter('acf/prepare_field/key=field_XXXXXXXX', 'populate_selected');