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);
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)
Hi. Did anybody find a way to do this with the new JavaScript API? For some reason I cannot find the element that is sortable. I tried all of the below methods. I tried other things too, but can’t get working
jQuery( document ).ready( function( $ ) {
if ( typeof acf !== 'undefined' ) {
const field = acf.getField('field_62fb6d4aa3dce');
// field.sortable('disable');
// field.$el.sortable('disable');
// field.$el[0].sortable('disable');
}
});
Any ideas? 🙂
Screen-Shot-....png
