Question

I have a stand-alone svg file that displays without problems. It includes some inline script, and references to 2 other scripts. The inline script calls an initialisation function in one of the other scripts, and this works on all the big browsers:

<svg ...>
<script type="application/ecmascript"><![CDATA[
...
do_init_in_foo1();
...
]]></script>
<script type="application/ecmascript" xlink:href="foo1.js"></script>
<script type="application/ecmascript" xlink:href="foo2.js"></script>
</svg>

Ok, here’s the problem: when I instead load this script dynamically via Ajax, ‘do_init_in_foo1’ is no longer visible. It still works in Opera if the ‘foo1.js’ reference appears above the init call, and works in older versions of F/F, but otherwise doesn’t work at all in the other browsers, irrespective of how I arrange the 3 script sections. The error message I get is ReferenceError: do_init_in_foo1 is not defined.

What is it about dynamic Ajax loading that changes the visibility? Is there some way around this?

One option is to move this line:

<script type="application/ecmascript" xlink:href="foo1.js"></script>

into the parent document, since it doesn’t change on different Ajax calls. However, if I do this, the browser complains about the moved script tag (Namespace prefix xlink for href on script is not defined). I think I would need to wrap the script tag in an svg tag to fix this, with an xmlns:xlink attribute, but this would then give me two top-level svgs, which would be (I think) a problem.

Thanks.

Answer 1

You can’t rely on dynamically loaded javascript code, because you don’t know whether it’s loaded or not at the point you try to access it in your code. The best approach here is to call some function in your loaded script. For example, if you load foo1.js via AJAX call, you may add the following function at the end of this file:

function foo1Loaded(){
 do_init_in_foo1();
 //and here do whatever you need to do else with variables/functions from loaded file
}
foo1Loaded();

If you want to know when all the external scripts are loaded via AJAX calls, you may count them once they loaded (via callback functions, similar to described above).