Support

Account

Register Login

Home › Forums › General Issues › Load JS script after ACF

Solved

Load JS script after ACF

  • Hi,
    I am trying to load a script after ACF has loaded, is there something I am missing? I have anly added this and the script that alerts “Hi!” for now.

    add_action('acf/input/admin_footer', 'my_acf_admin_footer');
function my_acf_admin_footer() {
    wp_enqueue_script( 'custom-acf-js', get_template_directory_uri() . '/library/scripts/script-js.js');
}

  • The action you’re using, 'acf/input/admin_footer' only fires on the admin page where you edit the field groups. (Perhaps this is not what you want)

    To enqueue a script that fires on every admin page and loads after ACF, use this:

    wp_register_script('custom-acf-js', get_template_directory_uri() . '/library/scripts/script-js.js', ['acf-input'], '1.0.0', true);
wp_enqueue_script('custom-acf-js');

    The five parameters in the 'wp_register_script' are: 

    wp_register_script(UNIQUE_NAME, FULL_URL_OR_PATH, DEPENDENCIES_ARRAY, VERSION, LOAD_IN_FOOTER_BOOLEAN);
wp_enqueue_script('custom-acf-js')

    as seen here: https://developer.wordpress.org/reference/functions/wp_register_script

    Putting ['acf-input'] in the dependencies array parameter tells the script it needs to wait until ‘acf-input’ has loaded first, which is ACF’s js script.

    If you want the script to load in other ways, on other pages, ACF also has other actions you can hook into, take a look here for those: https://www.advancedcustomfields.com/resources/#actions

  • Thank you Speakincode, that was a very good answer. I will try to answer better to clear things up a bit. I am trying to get ACF data using JS to post to the DOM (do I need PHP?).
    This seems to work much better now, but I still don’t get the right things from ACF, I am trying this:

    var acfVersion = acf.get('acf_version');
alert(acfVersion);

    Maby it´s wrong.. I get ‘null’.

    And this is the functions.php code:

    add_action('acf/init', 'my_acf_admin_footer');
function my_acf_admin_footer() {
  wp_register_script( 'custom-acf-js', get_template_directory_uri() . '/library/scripts/script-js.js', ['acf-input'], '1.0.0', true);
  wp_enqueue_script('custom-acf-js');
}

  • I just tested out that exact code and it worked just fine. You don’t need PHP to interact with ACF’s javascript API. So accessing it with the global acf object like you are, should work fine.

    The issue must be elsewhere, perhaps in your path to the script?
    Can you log out other things successfully to verify that your script is enqueued properly?
    Try logging out a string like: console.log('testing') does that work alright so we know the enqueue is correct?

  • Yes the enqueue is working fine. So the problem is elsewhere.

  • Well that’s good. But since the new code you posted does work, I’d start checking things like viewing your browsers source code for the page and verify that your custom script is indeed loading after ACF’s acf-input.js. Perhaps there is a problem there, even though your wp_register_script is setup properly.

    Also a theme can cause odd behaviors on plugins depending on what it’s trying to do. I’m just in the middle of developing an add-on plugin to ACF and when I popped that code in, it worked great.

    I’m sorry I can’t be of more help at this point, but it seems like you DO have the file enqueued properly, just a matter of why the acf object isn’t able to be accessed. Which is odd, because ACF attaches that object onto window, so it should be available anywhere.

  • The ACF data I am trying to reach is on an option page, in php I would have done something like this to access it. 

    <?php
 $repeater_data = get_field('acf_repeater', 'option');
?>

    But that does not seem to work in ACF JS. I am searching for a solution. Maby adding the data to the functions file and passing it through in some way.

  • Also a theme can cause odd behaviors on plugins depending on what it’s trying to do. I’m just in the middle of developing an add-on plugin to ACF and when I popped that code in, it worked great.

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

The topic ‘Load JS script after ACF’ is closed to new replies.