Support

Account

Solved

Javascript error when reordering in Post Object Repeater

- Eric Etheridge I
- June 19, 2020 at 8:17 am
We’re seeing a repeated javascript error when we have multiple posts in a Post Object repeater field and a user tries to reposition them by drag and drop. This has been true since at least 5.8.8, but switching to 5.8.12 did not fix it.

Scenario:
* ACF Pro Post Object field – https://www.advancedcustomfields.com/resources/post-object/
* Select Multiple Values: Yes
* Create an article, add posts to that field, “Update” to save changes
* Click and drag one post in that field to a different place in the list
* Javascript error written to console, Update doesn’t save the change

Mitigations tried and failed:
* Upgrading to ACF Pro 5.8.12 from 5.8.8
* Trying with a completely new post
* Trying in multiple browsers

Possibly helpful additions:
* It’s working fine for one of our developers on their local machine, but we can’t figure out why.

This prevents us from rearranging posts in fields of that type. We can only successfully rearrange by deleting the posts from the field and adding them again in a new order.

Error in Chrome console (error also confirmed in Firefox):
acf-input.min.js?ver=5.8.12:4 Uncaught TypeError: Cannot read property ‘element’ of undefined
at HTMLLIElement.<anonymous> (acf-input.min.js?ver=5.8.12:4)
at Function.each (load-scripts.php?c=0&load[chunk_0]=jquery-core,jquery-migrate,utils&ver=5.3.2:2)
at a.fn.init.each (load-scripts.php?c=0&load[chunk_0]=jquery-core,jquery-migrate,utils&ver=5.3.2:2)
at HTMLUListElement.stop (acf-input.min.js?ver=5.8.12:4)
at h.<computed>.<computed>._trigger (widget.min.js?ver=1.11.4:11)
at h.<computed>.<computed>._trigger (sortable.min.js?ver=1.11.4:11)
at h.<computed>.<computed>.h.isFunction.a.<computed> [as _trigger] (widget.min.js?ver=1.11.4:11)
at h.<computed>.<computed>._clear (sortable.min.js?ver=1.11.4:11)
at h.<computed>.<computed>.h.isFunction.a.<computed> [as _clear] (widget.min.js?ver=1.11.4:11)
at h.<computed>.<computed>._mouseStop (sortable.min.js?ver=1.11.4:11)

This links to the “.element” part of the following unminified code:
// multiple
if( options.multiple ) {

// vars
var $ul = $container.find(‘ul’);

// sortable
$ul.sortable({
stop: function( e ) {

// loop
$ul.find(‘.select2-selection__choice’).each(function() {

// vars
var $option = $( $(this).data(‘data’).element );

// detach and re-append to end
$option.detach().appendTo( $select );
});

// trigger change on input (JS error if trigger on select)
$select.trigger(‘change’);
}
});

// on select, move to end
$select.on(‘select2:select’, this.proxy(function( e ){
this.getOption( e.params.data.id ).detach().appendTo( this.$el );
}));
}
- John Huebner
- June 19, 2020 at 10:44 pm
I just did a test and did not see any issues.

I don’t know why you would see this except for one person.

Possible problems

1) Plugin/Theme/JavaScript conflict

2) Corrupt JS file. I mention this because you indicate that the person that can get it to work might be on a different server/installation. I have had issues with large minified JS files being corrupted during FTP, basically the long lines get truncated if transferred in “text” mode. You can do a quick test to see if this might be an issue by turning on SCRIPT_DEBUG https://wordpress.org/support/article/debugging-in-wordpress/#script_debug, this forces loading of unminified scripts in most cases.
- thepaperplant
- February 27, 2021 at 5:10 am
I’m experiencing this exact same issue. I have a Post Object ACF group on a page and when I drag and drop to rearrange the chosen posts this error (below) is thrown.

I do not “believe” its an issue with my theme — just using Underscores base theme.

I’m running the latest version of ACF Pro (5.9.5) and latest WordPress version (5.6.2)

Error msg:

acf-input.min.js?ver=5.9.5:3 Uncaught TypeError: Cannot read property ‘element’ of undefined
at HTMLLIElement.<anonymous> (acf-input.min.js?ver=5.9.5:3)
at Function.each (load-scripts.php?c=1&load[chunk_0]=jquery-core,jquery-migrate,utils&ver=5.6.2:2)
at s.fn.init.each (load-scripts.php?c=1&load[chunk_0]=jquery-core,jquery-migrate,utils&ver=5.6.2:2)
at HTMLUListElement.stop (acf-input.min.js?ver=5.9.5:3)
at x.<computed>.<computed>._trigger (core.min.js?ver=1.12.1:116)
at x.<computed>.<computed>._trigger (sortable.min.js?ver=1.12.1:9)
at x.<computed>.<computed>.x.isFunction.r.<computed> [as _trigger] (core.min.js?ver=1.12.1:116)
at x.<computed>.<computed>._clear (sortable.min.js?ver=1.12.1:9)
at x.<computed>.<computed>.x.isFunction.r.<computed> [as _clear] (core.min.js?ver=1.12.1:116)
at x.<computed>.<computed>._mouseStop (sortable.min.js?ver=1.12.1:9)
- John Huebner
- February 27, 2021 at 5:59 am
I am still not seeing this issue. As I said above, it is either a conflict or a corrupt JS file. See my previous comment. You could also try reinstalling WP and pluiins.
- mariuszm
- March 2, 2021 at 10:35 pm
Hi, we have updated the plug and we also have a problem in our projects.

app.min.js:70 Uncaught TypeError: Cannot read property ‘fn’ of undefined
at Object.<anonymous> (app.min.js:70)
at o (app.min.js:1)
at Object.<anonymous> (app.min.js:39)
at o (app.min.js:1)
at Object.<anonymous> (app.min.js:39)
at o (app.min.js:1)
at app.min.js:1
at app.min.js:1
- Siosm
- June 8, 2021 at 6:39 pm
Hi,

I had the same issue and it appears that there is a conflict between ACF and Yoast SEO (weird).

When activating Yoast, it throws a warning in the console:

"wp.data.select( 'core/editor' ).getBlocks" is deprecated. Please use "wp.data.select( 'core/block-editor' ).getBlocks" instead.

Everything works fine again when the plugin is disabled.

Here my core / plugins versions:

ACF Pro : 5.9.6
Yoast SEO : 16.4
WP Core : 5.7.2

I guess we’ll have to wait for Yoast to update their plugin…
- connectaryal
- June 18, 2021 at 5:20 pm
I had the same issue and Yoast SEO caused it. Revert back to previous back help me to fix the issue.

Thank you so much.
- John Huebner
- June 18, 2021 at 10:45 pm
I just tested this again and I am still not able to reproduce the issue, but I am using classic editor……

I do get the error when using gutenberg
- assistant
- July 21, 2021 at 2:39 am
Getting the same problem and also using Yoast and the Block editor. Most recent ACF Pro update and WP 5.8.

Disabling Yoast resolves the error but that’s not really a solution given this has been ongoing for some time now by the looks of it.

Multiple folks who use the site are experiencing the same problem as well so it’s not limited to just one user etc.
- John Huebner
- July 21, 2021 at 9:16 am
For bugs you need to contact the developers advancedcustomfields.com/contact/
- zitrusblau
- July 27, 2021 at 11:31 am
fyi: We’re seeing the same issue here w/ Yoast SEO enabled and using a post object field in a custom ACF block.

I’ve been reported with same issue. We are also using Yoast SEO, but disabling did not help.
So I decided to update acf-input.js code… I replaced this original code:

// sortable
                $ul.sortable({
                    stop: function( e ) {

                        // loop
                        $ul.find('.select2-selection__choice').each(function() {

                            // vars
                            var $option = $( $(this).data('data').element );

                            // detach and re-append to end
                            $option.detach().appendTo( $select );
                        });

                        // trigger change on input (JS error if trigger on select)
                        $select.trigger('change');
                    }
                });

with this code:

// sortable
				$ul.sortable({
		            stop: function( e ) {
		            	// get select2 selection
			            let data = $select.select2('data');
			            // loop
			            $ul.find('.select2-selection__choice').each(function() {
			            	// get current element from data
				            let data_element = data.filter(item => item.text === $(this).attr('title'));
				            // vars
							var $option = $( data_element[0].element );

							// detach and re-append to end
							$option.detach().appendTo( $select );
		                });

		                // trigger change on input (JS error if trigger on select)
	                    $select.trigger('change');
		            }
				});

- JohnnyComeLately
- August 19, 2021 at 5:20 am
Thanks for posting this, was driving us crazy, and we disabled Yoast and its fixed.
will bin yoast and use something else.
- lgladdy
- August 25, 2021 at 4:05 pm
Hey Everyone,

This issue (specifically, the conflict with Yoast) was solved in today’s 5.10 release! 🎉

More info in the release post here: https://www.advancedcustomfields.com/blog/acf-5-10-release-html-escaping-blocks-api-v2-block-preloading-and-more/
- miniMAC
- September 7, 2021 at 12:03 pm
Hi! The post object not work, it’s impossibile to reorder whith drag and drop! Please fix

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

The topic ‘Javascript error when reordering in Post Object Repeater’ is closed to new replies.

Advanced Custom Fields

Support

Account

Javascript error when reordering in Post Object Repeater

Eric Etheridge I

John Huebner

thepaperplant

John Huebner

mariuszm

Siosm

connectaryal

John Huebner

assistant

John Huebner

zitrusblau

peterp

JohnnyComeLately

lgladdy

miniMAC

Welcome

Forums

Helping Others

About

Help

Community