function defined in one js file is undefined in another js file

Question

According to this answer my function call should be working but it isnt: Calling a javascript function in another js file

My code (simplified):
file1.js:

$(document).ready(function(){
  function loadFYfResults(sizes){
      alert('hello');
  }
});

file2.js

$(document).ready(function(){
  $('.size-button').click(loadFYfResults(sizes));
});

theme.liquid
in the head:
{{ 'file1.js' | asset_url | script_tag }}
{{ 'file2.js' | asset_url | script_tag }}

When the function is called, the console throws this error:
"Uncaught ReferenceError: loadFyfResults is not defined"
My site is built using Shopify's liquid theme platform but I'm not sure if that has anything to do with it. Can anyone spot what I am doing wrong?

score 6 · Accepted Answer · answered Oct 12 '15 at 00:25

6

The functions are out of scope of one another. You can see this by looking at this block:

$(document).ready(function(){
    function loadFYfResults(sizes){
        alert('hello');
    }
});

console.log(loadFYfResults);

In this case, loadFYFResults will be undefined as it is no longer in the scope where loadFYfResults was defined.

For you to use that function in another file, there will have to be another reference in the outer scope to your loadFYfResults function, or just take it out of the $(document).ready wrapper since you know that it will only be called when the document is ready by the second function.

answered Oct 12 '15 at 00:25

David Li

1,250
8
18

Thanks! Once I move loadFyfResults outside of document.ready, is there any way to call functions within document.ready from loadFyfResults in the same file? I tried but it didn't work. – Tatiana Frank Oct 12 '15 at 00:42
Nope, things outside the document.ready cannot access things inside the document.ready. If `loadFyfResults` depends heavily on the other `document.ready` code, I would integrate that function into the other file than having it as a separate file. – David Li Oct 12 '15 at 00:45
I'll have to do that. I was trying to modularize a bit as the code was getting lengthy but I guess that's what frameworks are for. – Tatiana Frank Oct 12 '15 at 01:04
Yea. You don't even need a heavyweight framework for that, something like requireJS that compiles all your scripts and performs dependency-injection would be enough. – David Li Oct 12 '15 at 01:08
Thank you Thank You Thank You. I was under the mistaken idea that document ready just made sure that the document was loaded before loading the functions. So I thought everything within was available to the view calling the function. Never occurred to me that context applied in this case as well. – user1161391 Feb 16 '18 at 14:30

score 2 · Answer 2 · answered Oct 12 '15 at 00:23

2

Your loadFYfResults function is unknown outside of the scope of the function inside of which it is defined ( ready(function(){ ).

This will work:

function loadFYfResults(sizes){
    alert('hello');
}

$(document).ready(loadFYfResults);

answered Oct 12 '15 at 00:23

Alexander Bondar

524
4
21

score 0 · Answer 3 · answered Oct 12 '15 at 00:23

The problem is that you are defining the function loadFYfResults inside the callback of the document.ready function, so it means that loadFYfResults is local only to that document.ready callback. If you want it to be globally defined you should define it outside of the document.ready callback.

function defined in one js file is undefined in another js file

3 Answers3