How to enqueue one script after another in WordPress `functions.php`, and have them both work together?

Question

I have 2 .js files, the first is plugins.js and, the second, ui.js, and both are visible on the 'debug' of the inspector, so both are being included.

I have a jquery function in plugins.js that I need to call on in ui.js, so I enqueue plugins.js first, and immediately beneath that I enqueue ui.js.

However, the console in the web-browser tells me that the function isn't defined, and it doesn't work.

It works if I cut and paste the function from plugins.js into ui.js. It worked when I tried it in JSfiddle too.

functions.php

function add_scripts() { 

wp_enqueue_script( 'plugins', get_template_directory_uri() . '/javascript/plugins.js', array( 'jquery', 'jquery-ui-core' )           , '1.0.0', true );
wp_enqueue_script( 'ui'     , get_template_directory_uri() . '/javascript/ui.js'     , array(), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'add_scripts');

plugins.js:

jQuery(document).ready(function($) {
    function PNGPreloader(e,t,i,r,n,a){...}
});

ui.js:

jQuery(document).ready(function($) {
    $(...).each(function(){
        mobileIcons[ID] = new PNGPreloader($object,frames,size[0],size[1],20,false);
    });

It works if I put the function from plugins.js in ui.js, :

jQuery(document).ready(function($) {
    function PNGPreloader(e,t,i,r,n,a){...}
    $(...).each(function(){
        ... = new PNGPreloader(...);
});

score 2 · Answer 1 · answered Jan 26 '19 at 11:51

Was supposed to add jquery-ui-widget to the dependencies parameter of wp_enqueue_script.

function stripesinteriors_theme_resources() { 
    wp_enqueue_script( 'plugins', get_template_directory_uri() . '/javascript/plugins.js', array( 'jquery', 'jquery-ui-core', 'jquery-ui-widget' ), '1.0.0', true );
    wp_enqueue_script( 'ui'     , get_template_directory_uri() . '/javascript/ui.js'     , array()                                                , '1.0.0', true );
}

Sean Murphy · Answer 2 · 2019-01-26T10:37:11.470

1

Can you move your function PNGPreloader(e,t,i,r,n,a){...} outside of the jQuery(document).ready(function($) { ... }); block?

This is a scoping issue as the code in ui.js has no visibility to anything inside of the function that's invoked on document-ready in plugins.js.

Or you could also do something like:

plugins.js:

var fnPNGPreloader;  // globally accessible

jQuery(document).ready(function($) {
    fnPNGPreloader = function (e,t,i,r,n,a) {
        /*.. assuming you do stuff with "$" in here ..*/
    };
    //...
});

ui.js:

jQuery(document).ready(function($) {
    $(...).each(function(){
        mobileIcons[ID] = new fnPNGPreloader($object,frames,size[0],size[1],20,false);
    });
});

edited Jan 26 '19 at 10:37

answered Jan 26 '19 at 10:25

Sean Murphy

516
4
7

I moved it in the `plugins.js`, I get a `$ is not a function` in the browser inspector's console. I put the function in `ui.js` and moved it out, and I got again `$ is not a function`. I put all of them inside the `jQuery(document).ready(function($) {});` because wordpress doesn't otherwise work with the `$`. – sai Jan 26 '19 at 10:31
Are you referencing jQuery via the `$` operator inside the definition of function PNGPreloader? If so - see my edit above where the function definition is created inside a document ready (with a passed `$` reference to jQuery), but the handle to the function is left globally accessible. – Sean Murphy Jan 26 '19 at 10:34
I get a `fnPNGPreloader is not defined`, but I do use `$` inside the function. Here's the code for it: pastebin.com/hzt5XbM8 I think it has to do with the dependencies parameter in the functions.php file, but I included everything necessary in the array. – sai Jan 26 '19 at 11:02
Where do you get the `is not defined`? You named the global variable `fnPNGPreloader` like my example above in **plugins.js**? – Sean Murphy Jan 26 '19 at 11:13
Thank you, I've solved it: had to include a dependency. After 2 days... sigh – sai Jan 29 '19 at 13:44
So simply by including the dependency reference to `jquery-ui-widget` you were able to call functions defined in `plugins.js` from `ui.js`? I'm not sure how the jquery-ui-widget dependency helped solve this, but I'm glad you have it working! – Sean Murphy Jan 29 '19 at 16:40
The console was displaying a 'c.widget' not defined, so I searched through the plugins.js for that until I found it, looked it up on duckduckgo, and found mentions of a library that I later learned was built into the WP core, so I included it. – sai Jan 30 '19 at 08:48

How to enqueue one script after another in WordPress `functions.php`, and have them both work together?

2 Answers2