Support

Account

Home Forums Bug Reports Javascript error when reordering in Post Object Repeater

Solved

Javascript error when reordering in Post Object Repeater

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

  • 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.

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

  • 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.

  • 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

  • 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…

  • 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.

  • 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

  • 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.

  • For bugs you need to contact the developers advancedcustomfields.com/contact/

  • 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');
    		            }
    				});
  • Thanks for posting this, was driving us crazy, and we disabled Yoast and its fixed.
    will bin yoast and use something else.

  • 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/

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

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.