views:

52

answers:

1

Hi all,
i am trying to dynamically include js (and css) files into a webpage like this: index.html -> loader_a.js -> a_foo.js, a_bar.js, a_foo.css and so on.
While this works without a problem in FF (using appendChild) i cant get it to run in IE6. I've tried various available solutions (adding to dom node, ajax call and eval and more from (http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html) here and there and others like post #2013676) but it's not doing what its supposed to do.

When i check with DebugBar i see that my include files (eg a_foo.js) is actually loaded, but its content is empty - on other included files (1 Level/directly) this content is show so i assume there is the problem ...

The "error" i get is alway undefined object which is o/c b/c the function i call is not loaded properly so not much of a help. I dont get any errors on the includes.
I've validated the javascripts so those whould be ok.

Does anyone have the ultimate solution for this? I can recreate my tests and post some code if it helps.

Thanks, regards, Thomas

Sample HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd"&gt;
<HTML lang=en><HEAD><TITLE>Test</TITLE>

<script type="text/javascript" src="mmtest_files/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="mmtest_files/multiload.js"></script>
<script type="text/javascript" >

function init2() {
  // using the data from the loaded js files
  var a= mmf("a");
  document.getElementById('status').innerHTML = "Variable set:" + a;

}

// magic...
include(['mmt.js'],init2);

</script>

<BODY >

<H2>Test me!</H2>
<SPAN id=status>status old</SPAN>

</BODY></HTML>

JS 1 is multiload from answer 1

JS2 is a test include:

function mmf(param) { return "Called with" + param; }

A: 

You need to use document.write in ie, in order to load scripts in parallel.

See: Loading Scripts Without Blocking

I have such a script btw: Loading Multiple Javascript Files In Order Asynchronously

(it may need some enchancements in Chrome)


UPDATE

There is a callback function, it is optional. It can be used to couple dependent script to the files. EG:

function myjQueryCode() {
   // ...
}

include(['jquery.js','jquery-ui.js'], myjQueryCode);

So that your jquery dependent code will run after the files has been loaded.

galambalazs
I'll try that - but i have some questions/comments right away:The js url in the sourcecode of your site (http://galambalazs.extra.hu/multiload/multiload.js) does not work any more (needs to be galambalazs.fw.hu). Then you check for "typeof callback === "fucntion" " -- is fucntion intended and why?And finally, is the script dependent on WebKit or will it work without? (WebKit/i.test(navigator.userAgent))
trottig
yeah, the link points to the old version, but you can view the source for the code. The webkit hack is something I'm going to factor out, it is a temporary fix. And yes it works cross-browser. About the callback, I updated my answer.
galambalazs
oh now i see, i mistyped the `typeof callback === "function"` part. it's not intended. I'm going to update it right away.
galambalazs
I've updated the link to a US hosted site. This should also be faster.
galambalazs
Still not working for me - same missing object problem - see sample code in original post
trottig
it is working: http://galambalazs.freeiz.com/multiload/test.html
galambalazs
Weird - its ok for me on your site but i cant get it to run on my local machine -I'll have to take another look there - but thanks a lot for your help :)
trottig
Oh btw, will that solution load css as well ?
trottig
no, not yet, but i'll update it later. :)
galambalazs
I've got it to run on my local machine - not really sure what the root cause was now :(Anyhow, regarding the callback function -does $(document).ready still work if i included components with your script ?If the scripts are loaded asynch then the loader probably does not know about them so .ready might fire b4 the scripts are actually loaded, right?So i'd need to call that stuff in the callback function...?
trottig
`include( ['jquery.js','jquery-ui.js'], function(){ $(document).ready(function() {/*do sth*/}) } );`
galambalazs
Ok, but is .ready not called twice then? Once as callback and once when the doc his done loading?
trottig
No. When the scripts done loading it will call ready to push them to the queue. Once the document is loaded jQuery will execute the queue. So it will be called only once.
galambalazs