Support

Account

Home Forums Add-ons Options Page Uncaught ReferenceError: acf is not defined

Solving

Uncaught ReferenceError: acf is not defined

    • redocs

    • January 9, 2014 at 10:51 am

    Hi,

    i have WordPress 3.8 and ACF 4.3.4, i have purchase the option add on but when i create image field for the option in option page i can’t upload image and the console give me this error:

    Uncaught ReferenceError: acf is not defined admin.php?page=acf-options:60

    where in the line 60 is:
    acf.post_id = 0;

    where is the error ?

    thanks

    Leo

    • Elliot

    • January 10, 2014 at 9:53 am

    Hi @redocs

    Thanks for the bug report.
    This same issue is effective a select few installs. Any chance you can provide login details and I can take a look myself?

    Thanks
    E

    • redocs

    • January 10, 2014 at 10:31 am
    This reply has been marked as private.
    • Elliot

    • January 11, 2014 at 12:21 pm

    Hi @redocs

    Thanks for the follow up. I’ll take a look soon and figure out what is going wrong.

    Thanks
    E

    • Elliot

    • January 15, 2014 at 12:59 pm

    Hi @redocs

    I have just logged in and can confirm the issue is not specific to the options page, but throughout your website!

    You can see from the attached screenshot that the JS error occurs on all edit pages.

    I have looked through the source code and can confirm that the correct JS files are being loaded, and that the acf object does exist.

    The issue must be that the inline script tag (which sets data such as acf.post_id) is running before the acf JS file (input.min.js) is loaded.

    I can’t explain why this is the case, but perhaps your install has some custom code / plugin code which is modifying the jQuery that is used? This could explain why the inline script is running early because it is wrapped in jQuery, so that it fires once jQuery has loaded.

    I hope this helps you track down the issue.

    Thanks
    E

  • I’m experiencing this error too. For me it occurs when loading a front facing profile page.

    It seems like the problem is definitely the load order. I have a developed a theme that moves jquery into the footer (more specifically into the wp_footer action) and being that the script executes inline, it causes the error.

    Maybe a dynamically generated script included in the bottom of the pages would solve this problem.

  • hope this answer helps some poor lost souls.

    jquery must load before the acf stuff. for us, the problem was having async set on the script tag in an add_filter function:
    <script type='text/javascript' async src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>

    note that this is output by in in <head> by <?php wp_head(); ?>

    we wrapped it with an is_admin() check thusly:

    if(!is_admin()) {
      add_filter( 'script_loader_tag', function ( $tag, $handle ) {
        return str_replace( ' src', ' async src', $tag );
      }, 10, 2 );
    }
    
  • I just fixed the issue on ACF 4.4.1 version

    acf not defined…

    The problem was in loading the scripts in the correct order.

    What I’ve done is:

    open “wp-content/plugins/advanced-custom-fields/acf.php” and go and comment the lines from 524 to 528 the init of the input.min.js then open “wp-admin/admin-header.php” and right after the <title></title> include these 2 scripts:

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type='text/javascript' src='http://yourdomain.com/wp-content/plugins/advanced-custom-fields/js/js/input.min.js'></script>

    *move the input.min.js into new js folder into js to not get conflicts:)

    save all the changes and you will see you wouldn’t encounter this issue just reload the CPT add new/edit page and there you go.

    Hope this will solve everybody’s issue, it’s only temporary once we get an update from @elliot 🙂 hope the 4.4.2 will fix this issue.

    Cheers mates.

    • wesjan

    • April 15, 2015 at 10:50 pm

    As mentioned above, the problem seems to be the load order.

    To ensure that jquery is loaded before various inline scripts get executed, we did the following:

    Replace
    (function($) { ... })(jQuery);
    with
    jQuery(document).ready(function() { ... });
    in
    …/wp-content/plugins/advanced-custom-fields/core/controllers/input.php line 102
    …/wp-content/plugins/advanced-custom-fields/core/fields/_functions.php line 560

    This solved our issues both regarding non-reponsive “Add image” buttons, as well as some conditional logic used to toggle field visibility.

    Hope this may be of help to someone, and a big thanks to Elliot for a great plugin.

  • Wesjan,
    I followed your instructions, and it seems to work for me. Thanks for this…so far.
    Happy new year,
    Chris.

  • Just wanted to say that this is still an issue and it seems like it is for a lot of people if you search for it on Google.

    Wesjans proposed solution didn’t work for me at all. Instead it appears to have moved the issue from the front end form to the back end; when I tried this solution I could no longer edit or add images in the back end and in the front end the problem was still there. This issue only affects the image field.

    As for the suggestion to comment out the lines in acf.php and including the scripts directly in the header, I’m just not comfortable editing the header directly.

    I hope this is being worked on.

    • mattf10

    • March 24, 2017 at 11:18 pm

    Anything being done to fix this? I have the latest version of the plugin, latest WP core and have the same Jquery error.

    For now, I have changed the plugin code to wrap the inline jquery calls with jQuery(document).ready. I also needed to change it in the api.php file, line 1243.

    I hope this helps to provide a fix. Clearly, we shouldn’t need to hack the plugin code to make it work.

  • This error is more than likely cause by a conflict with some other javascript that running on the site.

    Have you tried disabling other plugins to see if you can narrow down the problem? If that does not work then it could be something to do with the theme.

    A javascript error in one script can cause other scripts not to load an run properly. It could be that another script needs to be corrected.

    If you can’t work out what’s causing the error on your particular site you can open a support ticket https://support.advancedcustomfields.com/new-ticket/

    • mattf10

    • March 24, 2017 at 11:46 pm

    Ok – using a different theme, the problem goes away. I will raise the issue with the theme author.

    Thanks for the quick response.

  • Look in your console and see what other JS errors there are, that information is probably going to help the other developer. Also, if you let us know what it is there may be something that can be done on the ACF side of things, maybe.

    • mattf10

    • March 25, 2017 at 12:01 am

    There are no other errors in the console, which is why I thought it was an ACF issue. I can only assume that something in the theme is blocking the ACF code from running. I will report back once I hear back from the theme author.

  • Does your theme, or any plugin you’re using, defer loading of scripts to the footer? If the answer to that is yes, can you turn it off for specific scripts?

    • mattf10

    • March 25, 2017 at 12:53 am

    Here is the page with the errors: http://new.berkshirefilm.com/add-new-person/

    There are loads of scripts that load at the end of the page including some from the theme.

    Since wrapping the ACF jQuery in a document.ready function gets rid of the errors, is there any reason not to change your code to do this?

  • Sorry, it’s not my code. You’d need to open a support ticket to see if the developer is willing to make that change. In the mean time, your theme, or something else on your site, is deferring the running of the acf script until the page is completely loaded by adding “defer” to every script that is added to the page. The fastest solution would be if there is a way to turn this off for the acf scripts.

    • mattf10

    • March 25, 2017 at 1:21 am

    Ok – That makes sense. I’ll see if I can override that in the child theme.

    Many thanks for pointing me in the right direction.

    I’ve raised a ticket asking the developer to change the code:
    https://support.advancedcustomfields.com/forums/topic/move-in-line-javascript-to-document-ready/

    • Marzo

    • December 23, 2017 at 11:30 am

    I have the same problem with a website that I inherited. The issue is theme-specific and I cannot get in touch with the previous developer. I narrowed it down to this defer parsing of js filter:

    function defer_parsing_of_js ( $url ) {
    	if ( FALSE === strpos( $url, '.js' ) ) return $url;
    	if ( strpos( $url, 'jquery.js' ) ) return $url;
    	return "$url' defer ";
    }
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

    When I remove the filter the ACF issue goes away. What is this “defer parsing” anyway and how does it have any impact on the website if it’s removed? I don’t see any issues in the admin or front-end when it’s removed. I tried wrapping it with if( ! is_admin() ) { but that didn’t work and broke most of the menus and links in the admin.

  • It means that processing of the JS is defers processing of the script until after the rest of the page is processed. Why it’s causing the error is because other scripts the require the presence of the ACF scripts are running before the ACF script is processed. ACF scripts cannot be deferred, and this also applies to any scripts that ACF depends on, like jQuery.

    It really depends on what other scripts are being loaded. You could attempt to be more specific about what scripts are being deferred, but I can’t say if that will help. The problem really is that because they are deferred the scripts may not run in the correct order.

  • This fix works for me and I hope you can pass it along to the developer as it’s very reliable.

    There are 2 places I found where this needs to be implemented:
    core/controllers/input.php Line 102
    core/controllers/field_group.php Line 375

    Change jQuery wrapper from:

    (function($) {
    ...
    })(jQuery);

    To (note the $ moved):

    var $ = jQuery.noConflict();
    $(function() {
    ...
    });
  • Hello Omega,

    This very detailed instruction is very helpful for my and work 100%, all errors are fixed now.

    Thank You for this post.
    Ydesigners.

  • Please help, I still have this issue!
    I have followed instructions set by OmegaPhase

    please help?

Viewing 25 posts - 1 through 25 (of 26 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.