Enqueueing additional ajax javascript file in Sage 9?

sage
1

Hi all,

I’m getting really confused and a bit frustrated by Sage 9, nothing I’m used to in my long experience working with WordPress seems to work any more!

I am simply trying to enqueue a new .js file - ajax.js and localise admin_ajax. I’ve followed the docs here to the letter - https://roots.io/sage/docs/theme-development-and-building/.

In setup.php I have the following:

add_action('wp_enqueue_scripts', function () {
    $ajax_params = array(
      'ajax_url' => admin_url('admin-ajax.php'),
      'ajax_nonce' => wp_create_nonce('my_nonce'),
    );
    wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), false, null);
    wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);
    wp_enqueue_script('sage/ajax.js', asset_path('scripts/ajax.js'), ['jquery'], null, true);
    wp_localize_script( 'sage/ajax.js', 'the_ajax_script', $ajax_params );
}, 100);

Then the contents of my ajax.js file are:

// eslint-disable-next-line no-unused-vars
function some_function(){
// eslint-disable-next-line no-undef
    console.log(ajax_object);
}

Added my file to config.json:

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ],
    "ajax" : [
      "./scripts/ajax.js"
    ]

The I ran yarn run buld. But when I try to call my function on a page, I’m getting ReferenceError: some_function is not defined - what am I doing wrong? Is this a scopping issue?

Also if anyone can tell me how the heck you format code on these posts, that would also be great!!

Many thanks
Kevin

2

You can add code formatting using backticks. I’ve edited your post to demonstrate their use.

re: Your problem

When you say

But when I try to call my function on a page,

How are you attempting to call it? Inside a script tag in your body (i.e. <script>some_function()</script>)? Or are you trying to call it in main.js or somewhere else?

If you’re using a script tag in the body, then you’re attempting to execute the function before it’s been defined: Your wp_enqueue_script() call that enqueues ajax.js is enqueuing it in the footer. Changing the last argument of that call to false (or simply removing it) would enqueue ajax.js in the <head>.

If you’re calling some_function() in main.js, then you would need to add sage/ajax.js to the array of dependencies when you enqueue sage/main.js.

You may also want to double-check the following:

  • Does ajax.js appear in dist/scripts/ after you run yarn build?
  • Do the correct generated links to your scripts, and your embedded localized script, appear in the source of the page when WordPress generates it?
  • You appear to be localizing your ajax parameters to the object the_ajax_script but some_function() attempts to access ajax_object. (This probably isn’t causing your current problem, but it might create future ones.)
3

Hey there, thanks for the response! Yes the call couldn’t be more simple, just this in the template body:

<script>
jQuery(document).ready(function($){
some_function();
});
</script>

So surely that should work?? I checked my source and ajax.js is there, although when I view the file, it’s got a load of webkit stuff in as well as my simple function - is that normal??

It’s still telling me that some_function is not defined though :frowning:

Kevin

4

It doesn’t even work if I put a the function in the main.js file? I don’t get it… it must be me not really understanding it, I’m not particularly up to speed on ES6 and am just used to defining a function in a javascript file using the function keyword… how am I supposed to do that in Sage 9? Sorry if this is an obvious answer!

Kevin