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?

    • hiroshi

    • August 23, 2016 at 11:28 am

    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!

    • hiroshi

    • August 23, 2016 at 3:46 pm

    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;
    }
    • hiroshi

    • August 23, 2016 at 4:50 pm

    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
    	}
    }
    • golewis

    • August 30, 2016 at 9:29 am

    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!

    • hiroshi

    • August 30, 2016 at 11:47 am

    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);
    
    • golewis

    • August 31, 2016 at 4:37 am

    Schweet!

    • Beee

    • June 9, 2017 at 10:20 am

    I can’t get it to work 🙁

    • Beee

    • October 29, 2017 at 1:13 pm

    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');
    • Beee

    • October 29, 2017 at 1:17 pm

    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.

    • Beee

    • August 6, 2018 at 5:26 am

    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/

    • Beee

    • August 6, 2018 at 11:18 pm

    Thanks I will look into it….

    • Beee

    • August 26, 2018 at 11:33 pm

    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.

    • Beee

    • December 1, 2018 at 10:55 pm

    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.

    • Beee

    • December 1, 2018 at 11:36 pm

    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.

    • Beee

    • December 3, 2018 at 2:44 am

    Thanks for confirming the “no issue”…

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.