Calling functions that aren't in _main.js?

1

I added a new _blog-live.js file with some functions in assets/js/.

They were getting compiled into the scripts.js file but I couldn’t call them from _main.js. Is there any particular way i need to call them? Or does the new file need to be wrapped in anything?

ie _blog-live.js =

(function($) {
get_wonkhe_load_live_postsXXX = function(){
    
    console.log(3);
  };
})(jQuery);

called from _main.js =

var Roots = {
  // All pages
  common: {
    init: function() {
      // JavaScript to be fired on all pages
      get_wonkhe_load_live_postsXXX();
...

error
Can’t find variable: get_wonkhe_load_live_postsXXX

2

You need to ensure that if one file depends on functions or variables in another that the dependencies are enqueued or concatenated first. But this isn’t just Roots, it’s Javascript 101.

3

ok - but i have as far as i can tell?

Its get picked up by the grunt file with var jsFileList here (at bottom) -

    'assets/vendor/bootstrap/js/transition.js',
'assets/vendor/bootstrap/js/alert.js',
'assets/vendor/bootstrap/js/button.js',
'assets/vendor/bootstrap/js/carousel.js',
'assets/vendor/bootstrap/js/collapse.js',
'assets/vendor/bootstrap/js/dropdown.js',
'assets/vendor/bootstrap/js/modal.js',
'assets/vendor/bootstrap/js/tooltip.js',
'assets/vendor/bootstrap/js/popover.js',
'assets/vendor/bootstrap/js/scrollspy.js',
'assets/vendor/bootstrap/js/tab.js',
'assets/vendor/bootstrap/js/affix.js',
'assets/js/plugins/*.js',
**'assets/js/_*.js'**

And the function is in the compiled script above the call. (mmm - can’t upload screenshots to post?)

4

Unless the code is missing something the first thing I see is that

doesn’t have var. While in some cases the lack of keyword var passes, you should not omit it at all IMO because it can easily blow up in your face.

Other then that you will need to post a more complete example if possible.

5

thank ewafford. I’ve tried it with a var without success. The scripts.js is here - http://www.wonkhe.com/wp-content/themes/wonkhe-roots-master/assets/js/scripts.js?deaac889636eaaaeb0889cdbf33322d2

If you do a search for ‘get_wonkhe_load_live_postsXXX’ you’ll see where it is and just below where i’m trying to call it from.

6

You have a scoping problem because of the use of the self-executing anonymous function that it is wrapped in. You may want to look at this for a more detailed explanation. I would also suggest you look at module design pattern/object literal patterns here and here for better understanding of advanced javascript organization.

1 Like
7

I believe ewafford is correct. The only reason to place something in an anonymous self-invoking function is to run that code. If you’re setting up a function to called in another location, then that should not be wrapped in anything.

8

ie _blog-live.js =

var get_wonkhe_load_live_postsXXX = (function($) {
  return function(){
    console.log(3);
  };
}(jQuery));

called from _main.js =

var Roots = {
  // All pages
  common: {
    init: function() {
      // JavaScript to be fired on all pages
      get_wonkhe_load_live_postsXXX();
...

For all you copy/paste fans out there.

3 Likes