Home/ Questions/Q 6800885
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T19:01:33+00:00

Ok, I feel a bit dumb having to ask this. There are any number

  • 0

Ok, I feel a bit dumb having to ask this. There are any number of hits on similar questions, but I can’t seem to get it right. If I modify the DOM via jQuery/Ajax, when is a loaded script actually parsed/executed?

The code below works on F/F, but not on Chrome or Opera. ‘Working’ means that it executes ‘do_init()’ without error. The loaded script (actually an svg file; ‘file.svg’) defines a number of vars which are required by ‘do_init()’ (which is in the ‘static’ script). These vars are visible to F/F, but not to Chrome or Opera (“variable xxx is undefined”). The file/script is correctly loaded into the DOM in all 3 cases, and contains an <svg>, with a <script> inside it.

I can get this to work (the svg displays) in Opera (or break in F/F) by re-arranging code, but not in Chrome. Using .success and .complete makes no difference.

Thanks.

<head>
...
<script type="text/javascript" src="do_init.js"></script>          
<script type="text/javascript"><![CDATA[
jQuery(document).ready(function() {
   ...
   $("#submit").click(function(e){
      e.preventDefault();
      var jqxhr =
         $("#svg").html(ajax_load).load("file.svg", function(response, status, xhr) {
            if(status == "error") {
               var msg = "Error: ";
               $("#error").html(msg + xhr.status + " " + xhr.statusText);
            } else {
               do_init(); // Ok in F/F, not in Chrome/Opera
            }
      });
   });
});
]]></script>
</head>
<body>
<button id="submit" type="button">Click Me!</button>
<div id="svg"></div>
</body>

EDIT 1

It turns out that they’re never executed – at least in IE9, FF8, Chrome, Opera, and Safari. They are executed in FF7. I’ve just written a minimal test page which does an Ajax load of a script which is just an alert. This only shows an alert in FF7. I’ve also tried the script wrapped in an <svg>, which makes no difference.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is part of the reason why it is recommended that you locate javascript at the end of the document, at the end of the body.

    Generally, javascript is executed as it is encountered; if you put it at the top of the document, it will run early in the load process, late if located at the end. However, when using a library’s “onLoad” or “domReady” functionality, you’re deferring execution until a later time.

    See the jQuery docs for more information: http://api.jquery.com/ready/

    While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it’s important to reference external stylesheets or embed style elements before referencing the scripts.

    EDIT
    I misread the details of your question. A dynamically loaded script is parsed immediately, but the onLoad event may (or may not!) be fired in accordance with the HTTP transport aspect of the loaded script rather than upon the interpretation of the loaded script. Usually, this is fine (though some browsers don’t reliably fire the event – IE, looking at you), but the timing you’re after is not when the script has been fetched, but when it is actually parsed and active. These should be within milliseconds, usually rendering the difference meaningless.

    There are some varying takes on solving issues with this technique, some of which are discussed here and here – none seem to specifically mention Chrome as a source of troubles though. That said, the suggested approach of polling for the included script (via a timeout) seems to be the least failure-prone of the suggestions, though it is also the solution I like least.

    • 0