Calling Functions From Multiple Files Within A Single Load Statement Using Jquery

I'm trying to achieve the most basic include with jQuery, that is loading functions from multiple files when the DOM is ready, but apparently it turned out not to be so trivial: in

Solution 1:

$(document).ready() is executed after the dom is complete which can happen before the external javascript files are downloaded so foo and bar may not be defined yet.

Solution 2:

I think it's just a typo. It's alert not altert:

function foo(){
        alert("Hello from foo!");
}

function bar(){
        alert("Hello from bar!");
}

Tools like Firebug can help with things like that.

Solution 3:

First, add a unique number to the url you use to retrieve your javascript, as in:

<script type="text/javascript" src="res/scripts.js?111010101"></script>

to assure the browser retrieves the most current version of scripts.js. Then, every time the page is retrieved, generate a new unique version number. (At least during development)

Next, you need to assure that script.js has been loaded and correctly evaluated before you try to call its functions.

One way to do this would be to trigger a new, custom event at the bottom of script.js, on which you would set a handler to execute (in document.ready()).

Another way would be to load the script within the document.ready() handler before you tried to call any of its functions.

EDIT to add example:

<script type="text/javascript">
  document.ready(function(){
    alert('Hello World!');
    $.getScript('res/scripts.js', function() {
      foo();
      bar();
    });
  });
</script>