Reply To: Disable reordering of the repeater field items

• John Huebner

• November 17, 2023 at 10:49 am

I can’t give you all of the details, I can just give you some ideas. You will need to add custom JS and you will need to add an action for both the ready and append. The first is used when the page is loaded and the second will be used when a new row is added to the repeater because ACF will automatically add the class to the new row and since the row did not exist during the ready action it will not be removed.

The following is just an untested example and may need to be corrected.

In your ready action you will need to find all of the repeater rows and remove the “order” class from the handle, something like this

// the key is for the repeater
// find all rows of the repeater
// not that the selector will need to be more specific if you have nested repeater
// where you don't want to affect the nested repeter
$('[data-key="field_63597ed1ce1cb"] tr.acf-row').each(function(index, element) {
  // this loops over each repeater row
  // convert the element to a jQuery object
  var target = $(element);
  // remove the "order" class
  target.removeClass('order');
}

You can do the same thing as above on the append actions, in fact you could set both the ready and append actions to the same function. However, the append action probably passes the element, but I don’t know if this is the repeater element or the row element or something else. I would likely just use the same function.

Here is an example from a project I worked on a while ago that auto generates unique ID for flexible content so that you can see what you need to do to add the JS to ACF

(function($){
  if (typeof acf == 'undefined') {
    return;
  }
  acf.add_action('ready append', function($el) {
    var panel_ids = [];
    $('[data-key="field_63597ed1ce1cb"] input').each(function(index, element) {
      if (element.value == '' || panel_ids.indexOf(element.value) != -1) {
        var new_id = acf.get_uniqid('pnl-');
        element.value = new_id;
        panel_ids.push(new_id);
      } else {
        panel_ids.push(element.value);
      }
    });
  });
})(jQuery);