title: building script tags that load in order and accept variables
body: <p>In the code below instead of using </p>
  
  <pre><code>&lt;script src="" &gt;&lt;/script
  </code></pre>
  
  <p>I am building the script up. This will enable me to insert client and calc names - i.e. add variables into the src that i am calling. This leads to js errors as scripts are not loaded in at the right time/ order.</p>
  
  <p>here is the code</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  
  var client = 'test';
  var calc = 'loanCalculator';
  
  var insertScript = function(src){
     var element= document.getElementsByTagName('head')[0];
     var script= document.createElement('script');
     script.type= 'text/javascript';
     script.src= src;
     element.appendChild(script);
  }
  
  var insertScriptContent = function(code){
    var element= document.getElementsByTagName('body')[0];
    var script= document.createElement('script');
    script.type= 'text/javascript';
    script.innerHTML  = code;
     element.appendChild(script);
  }
  
      insertScript('http://test.com.au/clients/' + client +'/web/'+calc+'/calculator-lib.js');
      insertScript('http://test.com.au/api/configeditor/213?callback=setupConfig');
      insertScript('http://test.com.au/clients/' + client +'/web/javascripts/c-app.js');
  
          insertScriptContent('var __loancalculator = null; var calculator = null; var loadTool = function(){ __loancalculator = abcd("abcd.loancalculator"); var container = $(".loan-calculator-app"); container.empty(); calculator = new __loancalculator.LoanCalculatorApp(container); calculator.init(); };');
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function(){
      loadTool();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>is there a way to load the top libraries and then the document .ready actually runs when these are loaded? or is there a better way to add these variables in?</p>
  
  <p>thanks</p>