Support

Account

Home Forums ACF PRO How to disable drag&drop ordering function on a specific Repeaters field?

Solved

How to disable drag&drop ordering function on a specific Repeaters field?

  • I’m trying to disable ordering function on a specific Repeaters field (which is nested).
    jQuery’S removeClass(‘order’) does the job, but it breaks order numbering function on a sortable handle at once.

    Is there any way to achieve this without touching ACF PRO itself?

    I’ll appreciate any kind of hint or advise.

    Thanks in advance!

  • Just for reference,
    this solution is working, but I don’t wanna modify ACF PRO.

    1. apply class ‘disable-sorting’ to a Repeaters field by a normal ACF PRO field group UI.
    2. add codes below inside of ‘_mouseenter :function( e ){}’ in ‘acf-pro-input.min.js’.

    if( $( this.$tbody.closest('.acf-field-repeater') ).hasClass('disable-sorting') ){
    	return;
    }
  • My co-worker gave me solution!
    I put these lines in my JS file, and worked without modifying ACF itself.

    $.extend( acf.fields.repeater, {
    	_mouseenter: function( e ){
    		// original codes + mine
    	}
    }
  • Hey, great tip on disabling this. I’d like to implement it, but would you mind a little more explanation on how you added the JS file? I’m not a Java guy and want to get this into my child theme. Thanks!

  • Hi @golewis

    > how you added the JS file?

    Here is an instruction from ACF guys.
    https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/

    Also U better wrap javascript above with this code below avoiding JS error.
    if (typeof acf !== 'undefined') {}

    PS
    These codes below colorize the handle + replace title attribute.

    setTimeout(function(){
    	var target = $('.disable-sorting > .acf-input > .acf-repeater > .acf-table > tbody > .acf-row > .acf-row-handle.order');
    	target.css( {'cursor':'default', 'background-color':'#feffe5'} ).attr('title', 'Ordering disabled');
    }, 200);
    
  • I can’t get it to work 🙁

  • While searching for a solution I came to this topic again and this time I did fix it.

    Here’s the code that did it for me. Maybe it can help someone else as well.

    function disable_drag_drop_repeater() {
        ?>
        <script type="text/javascript">
            (function($) {
                if (typeof acf !== 'undefined') {
                    $.extend( acf.fields.repeater, {
                        _mouseenter: function( e ){
                            if( $( this.$tbody.closest('.acf-field-repeater') ).hasClass('disable-sorting') ){
                                return;
                            }
                        }
                    });
                }
            })(jQuery);
        </script>
        <?php
    }
    add_action('acf/input/admin_footer', 'disable_drag_drop_repeater');
  • My editor (phpstorm) does give a warning.
    If I change it to return false the error goes away.
    I’m not a js expert, so can’t tell which is the best.

  • Has someone else experienced their code not working anymore ??

    This is the part which is not working anymore (for me):

    $.extend(acf.fields.repeater, {
        _mouseenter: function (e) {
            if ($(this.$tbody.closest('.acf-field-repeater')).hasClass('disable-sorting')) {
                console.log('HIT');
                return false;
            }
        }
    });
  • The JS in ACF was completely rebuilt and given a new API. I have not been able to update some sites yet because I need to rewrite the JS in some cases. In your case acf.fields.repeater probably no longer exists, or it has been altered. https://www.advancedcustomfields.com/resources/javascript-api/

  • Thanks I will look into it….

  • I’m not very skilled in JS, so I tried several solutions, but I can’t get it to work anymore…

    If anyone knows howto, please post it. Really need this.

  • I finally have the solution (which works for me, but I think most people can use this)… and it was so easy (in hindsight).

    The only thing you need to do is remove the class order from the field.
    Since I add an extra class to the repeaters I don’t want users to move, it was fairly simple to limit it to these repeaters.

    jQuery(document).ready(function() {
        jQuery(".disable-sorting table.acf-table td.order").removeClass("order");
    });
    

    If you want it done on all your repeaters, just remove the class .disable-sorting.

  • Does anyone know if my solution can cause any issues ?

    If you happen to read this, do you know @hube2 ?

  • I don’t think it will cause any issues, no.

    I have done something similar in the past to prevent the removal and adding of rows to a repeater. In my case I completely removed the elements. Removing the class should work just as well since removing the class should prevent the JS action from firing. It’s actually a good, simple solution.

  • Thanks for confirming the “no issue”…

  • Hello, I know that this thread is from 2 years ago, but for those who may be interested, I’ve found a very simple solution just using CSS:

    .acf-field-repeater .acf-table tr.acf-row .acf-row-handle {
       pointer-events: none;
    }
  • doesn’t that just disable the hover status ??? but afaik it leaves the ‘click’ intact… (didn’t test though)

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

You must be logged in to reply to this topic.