In the realm of a fixed small snippet of code that cannot be altered after deployment (in an RIA), all elements are required to be loaded through a bootstrapper.js file:
<div id="someDivID"></div>
<script type="text/javascript" src="bootstrapper.js"></script>
What is the most efficient approach to loading js, css, and markup? Can we enhance the process with a more elegant, quicker, and sharper method than this one?:
function createDivs() {
var jsDiv = document.createElement('div');
jsDiv.id = 'allJavascriptHere';
var contentDiv = document.createElement('div');
contentDiv.id = 'allContentHere';
document.getElementById("someDivID").appendChild(jsDiv);
document.getElementById("someDivID").appendChild(contentDiv);
function importScript(url){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementById("jsDiv").appendChild(script);
}
importScript("http://example.com/jquery-1.4.2.min.js");
importScript("http://example.com/anotherScript.js");
}
window.onload = function(){
$.get("http://example.com/someHTML.html", function(data) {
$('#contentDiv').html(data);
setTimeout("javaScript.init()", 200);
});
}
including stylesheets in the someHTML.html file as demonstrated below:
<style type="text/css">
@import url("example.com/styleSheet.css");
</style>
(please note: The necessity of the setTimeout function is unexplained but seems indispensable. Your potential solution might eliminate this requirement.)