Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

in order to access jquery with a $, I am wrapping my Javascript file in

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

This works fine, but I would like to add another javascript file which contains functions which I want to call from the original javascript file, but the functions are not available.

How can I call these functions? Do I need to prefix with a namespace or something?

Edits for clarification below. js file 1.

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

js file 2

(function($){
    function JS2_SayHi()
    {
        alert("Hi");        
    }
})(jQuery);

The JS2_SayHi function cannot be found. If I remove the (function($){..})(jQuery); wrapper from JS2, it does work, but I don't have access to jquery.

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

in order to access jquery with a $, I am wrapping my Javascript file in

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

This works fine, but I would like to add another javascript file which contains functions which I want to call from the original javascript file, but the functions are not available.

How can I call these functions? Do I need to prefix with a namespace or something?

Edits for clarification below. js file 1.

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

js file 2

(function($){
    function JS2_SayHi()
    {
        alert("Hi");        
    }
})(jQuery);

The JS2_SayHi function cannot be found. If I remove the (function($){..})(jQuery); wrapper from JS2, it does work, but I don't have access to jquery.

• jquery
• javascript

• This won't work. JS2_SayHi is visible only inside closure (function($){ /* ..... */ })(jQuery);. Even in the second file, below })(jQuery) you will not call this function. Question about javascript (not related to Wordpress) are off-topic here. You should try on Stack Overflow. – nmr Commented Apr 11, 2019 at 9:05
• Look at this question – nmr Commented Apr 11, 2019 at 9:21
• Thank you - I thought is was WP related, and to do with the enqueuing, Will check the links you gave. – StripyTiger Commented Apr 11, 2019 at 9:45

2 Answers 2

You have to create a dependency with

wp_register_script($handle, $src, $dependency, $version, true/false);

See WP codex: wp_register_script and then make sure that the second file is loaded correctly and right after the initial script.

The third parameter is an array for dependencies/other "handles".

So..in your case:

<?php
    // Functions.php or somewhere else
    wp_register_script('my_first_script',get_template_directory_uri().'/js/my-first-script.js', array('jQuery'), '1.0', true);
    wp_register_script('my_second_script',get_template_directory_uri().'/js/my-second-script.js', array('jQuery','my-first-script'), '1.0', true);

Where

...,array('jQuery','my-first-script'),...

is the dependency of your script which wordpress will handle for you (placement head/footer).

Last parameter bool true means, that is loaded in the footer. Also make sure, that your functions in jQuery have correct scoping.

That will register the scripts to wordpress, then enqueue them:

<?php
    ...
    wp_enqueue_script('my_first_script');
    wp_enquque_script('my-second-script');

?>

The answer above takes care of your script loading, but your scope problem remains.

Start by declaring your function as a generic variable, outside the braces. Then, inside the braces, assign your function to that variable. Declaring the function name outside your jQuery wrapper makes it globally available.

   var say_hi;

    (function($){
        say_hi = function(){
            echo “Hi!”;
        }
    })(jQuery)