Disable Remove "Saved" Repeater Rows

• Dave Navarro, Jr.

• January 24, 2019 at 5:26 am

Trying to figure out how I prevent a user from removing any repeater rows that have been saved to the database.

I want them to be able to remove rows that have not been saved.

I can’t find any kind of indicator in the $field[] array that indicates if the field has been saved to the database.

Only thing I can think of is maybe catching the “remove” action in the acf() JavaScript API and using an AJAX query to see if the element being removed is in the database, but that seems cumbersome.

Can new elements be added to the $field[] array? For example, if I catch the “load_field” action and then adding $field['loaded_from_db'] = true;

And for that matter, is there any way to tell in “load_field” if the value is from the DB?

• feyfey

• January 24, 2019 at 7:29 am

Hi Dave,

You can add setting to field by using the ‘acf/render_field_settings’ filter but I don’t know how to change the setting value on post save. I don’t think it’s the best solution but, according to the function I already used, this may works :

1. Use the ‘prepare_field’ filter on one (or all) subfield to add a class (for example ‘saved_in_database‘) if the field[‘value’] is not empty.
2. Add some JQuery with the ‘admin_footer‘ action to remove the “remove button” on the same row.

To explain a bit more my proposal : The ‘prepare_field’ filter works when the value is already loaded from database, so if the field[‘value’] is not empty that’s means the row was already saved. By adding a class on your repeater subfields which are already saved in database you create some JQuery target. By using the ‘.closest()‘ and ‘.child()‘ Jquery method you can finaly target the ‘‘ of the rows which contain at least one saved subfield and ‘.remove()‘ it.

Hope it’s help. Tell me if you need some code example.

• John Huebner

• January 25, 2019 at 12:55 am

I have done this is the past, but I did it using only JS.
This is the code I used. Basically, I have a list of fields that I want the client to be able to add values to and I want the to be able to reorder those values, but I do not want them to be able to delete a value. My reason is that these are used for values in a search and removing an existing value could cause a “product” to not appear anywhere on the site because it has a value that cannot be searched for, the search fields and the ACF fields on the “product” post page are both populated with these values as choices. I’ve added a few notes about what’s going on

// readonly existing values and remove the remove row link
// on several repeaters on product options page
// list of the repeaters I want to disable and prevent deletion
var repeaters = [
  'field_59dd19d721413',
  'field_59de2a200f0a3',
  'field_59de3024dff85',
  'field_59de3fc95cf01',
  'field_59de4773cb4ee',
  'field_59de4e4784bac',
  'field_59e0dec7330d9',
  'field_59e0d5657109a',
  'field_59e0e934032c3',
  'field_59e4d54db8896',
  'field_59e4d7f348352',
  'field_59e4ea9adfa00',
  'field_59e60f342dae3',
  'field_59e61cce68a09'
];
// build the selector to get all of the repeater rows
var selectors = [];
for (i=0; i<repeaters.length; i++) {
  selectors[selectors.length] = '[data-key="'+repeaters[i]+'"] .acf-row';
}
var selector = selectors.join(', ');
// loop over all rows of all repeaters
$(selector).each(function(index, element) {
  if ($(element).hasClass('acf-clone')) {
    // clone field, we don't do the clone field
    // this allows a new row that is added to be deleted before save
    return;
  }
  // find the input field and set it to readonly
  $(element).find('.acf-input input').attr('readonly', true);
  // in my case I have another field that is populated with the number of "products"
  // associated with this value. If this is 0 then the client can delete it
  if ($(element).find('[data-name="product_count"] .acf-input input').val() == '0') {
    return;
  }
  // remove the ACF remove row element so it cannot be triggered
  $(element).find('a[data-event="remove-row"]').remove();
});