Question

I am writing a lot of JQuery code in a page and have decided to move some of the functions out to a separate file. So, file #1 has nothing but function definitions:

function doSomething() { ... } 

function doSomethingElse() { ... }

In the main page, I have placed my JQuery at the end of the file – following the optimization techniques 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 is loaded and the DOM declared. However, I get an error every time that says ‘doSomething’ is undefined.

This works without problem if the functions are included in the main script. It is only when I pull them outside that I get this error. Now, my guess is that the first file hasn’t being fully loaded/compiled when the second one makes its calls. But it seems to me that the last script (essentially acting in the “Ready” role) should be the one compiled last. When I look at JQuery and other JS files, they start with anonymous functions rather than just launching right in to function definitions so clearly there is something else going on.

Note that I don’t think it is a problem loading/finding the file: I’ve tried various paths to ensure that the path is correct and that hasn’t fixed the issue.

Does anyone have a clue why my functions aren’t being found?

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

UPDATE: Solved. I ran it through FireBug as keegan and dskrepps suggested and it jumped right out at me. I had an ASP.NET variable that I was placing in the scripts but, of course, ASP.NET isn’t parsing the file or replacing variables. When Javascript saw these replaceable values, it was dying on a parse error that wasn’t reported. So – the file was NOT being loaded and it isn’t a Javascript function call issue at all. Instead, it was an error between the keyboard and the seat. 😉

Thanks to everyone who helped!

Answer 1

this is likely not an issue that can be solved via DOM-Ready block, i.e:

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

});

because loading JavaScript via plain ol’ script tags guarantees execution order (assuming the defer and async attributes aren’t set), so placing files in order should be enough. in short, assuming the files are actually being loaded, placing one file after another should allow the second to use functionality in the first.

have you checked in firebug/web inspector to make sure you aren’t getting 404s for those files?

in your myFunctions file, are you wrapping the code in an anonymous function? doing so will keep the definitions private (unless you explicitly expose them) which would prevent you from being able to access them in another block.

for example, if myFunctions.js looks like this:

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

you won’t be able to call those functions from the page, you’ll have to add them as properties of the window or some global namespace.

hope that helps. cheers!