How to delay execution of inline javascript

Question

Main.php

<script>
$.ajax({
    type: 'GET',
    url: 'ajax.php', 
    context: document.body,
    success: function(data) {
        $("#content").html(data);
    }
});
</script>

<div id="content"></div>

ajax.php

<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script>
$(function(){
    tinymce.init({selector:'textarea'});
    alert("script executed");
});
</script>
<textarea>Your content here.</textarea>

The main page loads the ajax page into the "content" container. The ajax page contain textarea field which will be filled by tinyMCE plugin.

When tested on modern browser, everything seems fine. But when on older browser like IE 8, 9, 10 and Firefox 19, I get the error saying 'tinymce' is undefined. But if the tinymce.min.js is loaded from the same server, everything seems fine again.

It seems like the old browser doesn't load cross-domain script. But when I go further testing, I found that it is caused by the browser is executing inline script before the tinymce.min.js is loaded.

So, how can I have the inline script to execute last after all the scripts has been loaded? Or, is there any other way I can get it works?

Thank you.

Answer 1

The problem is that the jQuery.ajax call strips the incoming script tags and asynchronously loads the referenced scripts and immediately executes the inline scripts so they are in the wrong order. To get around this you could use jQuery to load your dependencies and put your init code in the success callback.

Change your ajax.php to be like the following:

<script>
    $.getScript("http://tinymce.cachefly.net/4.0/tinymce.min.js", function() {
        tinymce.init({selector:'textarea'});
        alert("script executed");
    });
</script>
<textarea>Your content here.</textarea>

See jQuery documentation for more info.

Note if you are doing this more than once then you will be loading the tinymce library more than once and this is bad. Perhaps it is better just to load tinymce once in your main.php.

Answer 2

If you aren't dynamically loading scripts or marking them as defer or async, then scripts are loaded in the order encountered in the page. It doesn't matter whether it's an external script or an inline script - they are executed in the order they are encountered in the page. Inline scripts that come after external scripts have are held until all external scripts that came before them have loaded and run.

Async scripts (regardless of how they are specified as async) load and run in an unpredictable order. The browser loads them in parallel and it is free to run them in whatever order it wants.

There is no predictable order among multiple async things. If one needed a predictable order, then it would have to be coded in by registering for load notifications from the async scripts and manually sequencing javascript calls when the appropriate things are loaded.

When a script tag is inserted dynamically, how the execution order behaves will depend upon the browser. In a nutshell, the newer versions of Firefox default a dynamically added script tag to async unless the script tag has been set otherwise.

script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4.0 Firefox.

Thus you might want to download the js file include it externally