ansaurus

Question

How to dynamically load Javascript files and use them right away ?

Answer 1

+1 A:

Notice your addJS function is appending to the end of the body element.

Since browsers will run scripts as they appear in the HTML source,

c = new core()

will run before your lib.js script is loaded (at the end of the body element).

I would recommend moving c = new core(); into the $(document).ready(function() {...}); or into a script element AFTER the body tag.

Jeff Meatball Yang 2009-05-25 06:56:59

Ok, I am going to edit the question because you got a point but this does not appy here. I simplified my example but I realize it changes quite a lot of things. In fact the test.html already loaded because I inject init.js with a bookmarklet.

e-satis 2009-05-25 07:01:18

Answer 2

+5 A:

jQuery has this functionality built in with getScript.

Paolo Bergantino 2009-05-25 06:59:57

Geez, it's going to be SO useful. Thks ! I don't clic on "solved" because I'd like to understand why my way to do it is wrong.

e-satis 2009-05-25 07:07:21

Answer 3

+1 A:

IMO, appending the script tag to the end of the document to load a script is rather unsightly. Reason:

you are trusting the browser to automatically fetch the script and load it.
You have no way of finding out whether the script is loading, has loaded, or if it encountered an error (maybe 404?)

The appropriate way would be to either use $.getScript(), or for a finer-grained control, fetch the script file with $.ajax() and use eval().

However, the second method has some issues: if you invoked eval() inside a function, then the script won't be available outside it! This mandates workarounds...

but why bother! use $.getScript() and get over with it :)

cheers, jrh.

Here Be Wolves 2009-05-25 07:13:48

See the comment for Paolo Bergantino.

e-satis 2009-05-25 07:17:55

But actually I have a way to no when the script is loaded with firebugf and console.log (and it is). Anyway the js files are in fact PHP files generating the js on the fly, and they have a logging system too so I know I'am not hitting a 404. But you are right to mention it.

e-satis 2009-05-25 07:20:26

Yes, firebug can do that for you, but only at development time. Not at runtime.

Here Be Wolves 2009-05-25 08:53:39

Answer 4

+1 A:

In response to why your code is failing: Adding a script tag to the body does not block further script execution. Your code adds it, which starts the browser download process. Meanwhile, your script tries to call core(), which doesn't exist because lib.js hasn't finished downloading. jQuery works because it waits till the script finishes downloading before executing your callback function.

Karl Guertin 2009-05-25 07:56:39

Answer 5

+1 A:

You get the "core is not defined" error because the scripts are loaded asynchronous. Which means that your browser will start loading lib.js in the background, and continue executing init.js, and then encounter "new core()" before the lib.js has finished loading.

The getScript function has a callback that will be triggered after the script is finished loading:

$.getScript('lib.js', function() {
    var c = new core();
});

gregers 2009-05-25 08:26:07

ansaurus

tags:

views:

answers:

How to dynamically load Javascript files and use them right away ?

related questions