Why can't I call these jquery / javascript functions in an external script file?

Question

I write a lot of jQuery code on the page and decided to transfer some of the functions to a separate file. So, file No. 1 has only function definitions:

function doSomething() { ... } function doSomethingElse() { ... } 

On the main page, I placed my jQuery at the end of the file - following the optimization methods found in Zakas book "High Performance Javascript".

So, at the very end of the file (but before the closing body tag) I have:

 <script type="text/javascript" src="/scripts/MyFunctions.js"></script> <script type="text/javascript"> doSomething(); doSomethingElse(); .... </script> 

Note that the final Javascript scripts are loaded - and run - after the page loads and the DOM declaration. However, I get an error every time it says "doSomething" undefined.

This works without problems if functions are included in the main script. Only when I pull them out do I get this error. Now I believe that the first file was not fully downloaded / compiled when the second makes its calls. But it seems to me that the last script (essentially acting in the "Ready" role) should be compiled last. When I look at jQuery and other JS files, they start with anonymous functions, and not just start right into the functional definitions, so it’s clear that something else is happening.

Please note that I do not think that this is a file upload / search problem: I tried different paths to make sure the path is correct, and this did not fix the problem.

Does anyone know why my features are not found?

Update. If I take the contents of the file exactly as they are found and put it in the first script tag, rather than loading it from the file, this works fine. But I have repeatedly checked the script file name, and that is correct. So this is the process of loading it from an external file.

UPDATE: Resolved. I pulled it through FireBug, as suggested by Keegan and dskrepps, and it hit me right away. I had an ASP.NET variable that I placed in scripts, but of course ASP.NET does not parse the file or replace the variables. When Javascript saw these pluggable values, it was dying from a parsing error that was not reported. So - the file did NOT load, and there is no problem with calling the Javascript function at all. Instead, it was a mistake between the keyboard and the seat .; -)

Thanks to everyone who helped!

Answer 1

this is probably not a problem that can be solved with the DOM-Ready block, i.e.

 // Do something when the DOM is ready jQuery(function() { }); 

because loading JavaScript through plain ol <script tags guarantees execution order execution (provided that the defer and async attributes defer not set), so placing the files in order should be sufficient. in short, assuming the files are actually loading, placing one file after another should allow the second to use the functionality in the first.

Have you checked in the firebug / web inspector to make sure you are not getting 404s for these files?

in your myFunctions file, do you exchange code in an anonymous function? this will make confidential definitions (unless you explicitly disclose them), which will prevent you from accessing them in another block.

for example, if myFunctions.js looks like this:

 // Anonymous closure (function() { function doSomething() {} function doSomethingElse() {} })(); 

you cannot call these functions from the page, you will need to add them as properties of a window or some global namespace.

hope this helps. Hooray!

Answer 2

Are your files doSomething() and doSomethingElse() in a call to $(document).ready() ? This can probably lead to them starting after you really try to call these functions.

And although jQuery starts with an anonymous function call, it closes, so that an anonymous function is called immediately, i.e. functions are immediately created inside it.

Answer 3

Since onReady does not work, a very simple way to check if a file is uploaded is to place an alert('Running'); in the file, at the very bottom. If this is not a warning, there might be a syntax error in your file. Check your error console, firebug, or some developer tools to debug it. If this is a warning, you might spell function names incorrectly.

Also note the difference between absolute and relative path names. If I remember correctly, "/ script.js" will load from "example.com/script.js" and "script.js" will load from "example.com/WhereEverYouAre/script.js

If your functions may not be defined globally, define them like this:

 window.doSomething = function() { ... } 

Answer 4

A completely different reason, but the same symptom - one of the functions in my included .js file was missing the end bracket.