I'm trying not to be a lazy dev. Thus I want to only include my js files where they are needed.

As the js is needed everywhere where my shortcode is used I tried to do what was answered here.

i.e.:

js

function do_cool_stuff(){
    //do the most awesomest of stuff
    //..ok mostly changes textvalues dynamically
}

php

function enqueueAllMyStuff(){
    \wp_enqueue_script('my_stuff',path_to_my_stuff);
    \wp_localize_script('my_stuff','jabba_the_slug',['url'=>\admin_url('admin-ajax.php')];
//...
}
\add_shortcode('goodName',__NAMESPACE__.'\\my_shortcode')
function my_shortcode(){
    enqueueAllMyStuff();
    return '<script>do_cool_stuff()</script>';
}

But that did not work. As "do_cool_stuff is not defined". Tried to do

return '<img src="'.admin_url().'/images/loading.gif" onload="do_cool_stuff()"/>';

Which works nicely from time to time. Implying its a race condition.

function my_shortcode(){
    \add_action('wp_enqueue_scripts',__NAMESPACE__.'\\enqueueAllMYStuff');
    return '<script>do_cool_stuff()</script>';
}

also does not work, as the headers are already send.

so... There ought to be a better way to do this.

I'm trying not to be a lazy dev. Thus I want to only include my js files where they are needed.

As the js is needed everywhere where my shortcode is used I tried to do what was answered here.

i.e.:

js

function do_cool_stuff(){
    //do the most awesomest of stuff
    //..ok mostly changes textvalues dynamically
}

php

function enqueueAllMyStuff(){
    \wp_enqueue_script('my_stuff',path_to_my_stuff);
    \wp_localize_script('my_stuff','jabba_the_slug',['url'=>\admin_url('admin-ajax.php')];
//...
}
\add_shortcode('goodName',__NAMESPACE__.'\\my_shortcode')
function my_shortcode(){
    enqueueAllMyStuff();
    return '<script>do_cool_stuff()</script>';
}

But that did not work. As "do_cool_stuff is not defined". Tried to do

return '<img src="'.admin_url().'/images/loading.gif" onload="do_cool_stuff()"/>';

Which works nicely from time to time. Implying its a race condition.

function my_shortcode(){
    \add_action('wp_enqueue_scripts',__NAMESPACE__.'\\enqueueAllMYStuff');
    return '<script>do_cool_stuff()</script>';
}

also does not work, as the headers are already send.

so... There ought to be a better way to do this.

• plugin-development
• ajax
• wp-enqueue-script

Share Improve this question asked Aug 8, 2019 at 15:45 TheoMTheoM 322 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

If you run wp_enqueue_script() inside a shortcode, which is essentially what you're doing by calling enqueueAllMyStuff(), the script is going to be queued up to be loaded in the footer. So if your shortcode runs a script as soon as it's printed, the JavaScript file that it depends on won't be available yet, and will cause this error.

The simplest solution is to update your script to wait for the document to have loaded. With jQuery you'd use jQuery( document ).ready(), but in vanilla JS you can use:

<script>
    window.addEventListener( 'DOMContentLoaded', function() {
        do_cool_stuff();
    } );
</script>