I am attempting to dynamically load JavaScript (and CSS) files into a webpage in the following order: index.html -> loader_a.js -> a_foo.js, a_bar.js, a_foo.css, and so on. While this process works seamlessly in Firefox using appendChild, I am encountering issues making it work in IE6.
Despite trying various suggested solutions such as adding to DOM node, AJAX call and eval from sources like here, there, and other forums like post #2013676, the scripts are not executing as expected.
DebugBar shows that the include files (e.g., a_foo.js) are being loaded but their content is empty - direct/included files at one level display the content correctly, suggesting there may be an issue with the hierarchy of loading.
The error message I consistently encounter is 'undefined object,' indicating that the function I am calling is not properly loaded, offering little help in resolving the problem. There are no errors reported during the includes process, and JS validation confirms the scripts are correct.
If anyone has a foolproof solution to this issue, it would be greatly appreciated. I can provide additional code snippets if necessary.
Thank you, Best regards, Thomas
Sample HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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 refers to multiload from answer 1
JS2 is a test include:
function mmf(param) { return "Called with" + param; }