Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Loading javascripts to another.

    What is the best way to load javascript to load another without errors. I loaded with dynamic loading and gives undefined error for running the loaded function after the files loaded.

    I put
    Code:
      var head= document.getElementsByTagName('head')[0];
       var script= document.createElement('script');
       script.type= 'text/javascript';
       script.src= 'helper.js';
       head.appendChild(script);
    then, run the loaded function and gives the function undefined error. The files are loaded and added to head section in chrome console. The reference said dynamic loading functions are relied on the browser. I tried $.getScript() and DOM to add elements but it does not work.

    Please tell me how to fix the errors. Or how to call function properly, for misplacement.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    You might need to wait for the script to finish loading before you can use a function from the loaded script
    Code:
       var head= document.getElementsByTagName('head')[0];
       var script= document.createElement('script');
       script.onload = function() {
          // here you can execute a function from the new script
       };
       script.type= 'text/javascript';
       script.src= 'helper.js';
       head.appendChild(script);
       // if you try to execute the function here, it might fail if loading is still in progress

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    I have a default template for when I include jQuery in my projects but I guess it’s universally applicable:
    Code:
    function include(file, callback) {
    	var head = document.getElementsByTagName('head')[0];
    	var script = document.createElement('script');
    	script.type = 'text/javascript';
    	script.src = file;
    	script.onload = script.onreadystatechange = function() {
    		if (callback) {callback();}
    		// prevent memory leak in IE
    		head.removeChild(script);
    		script.onload = null;
    	};
    	head.appendChild(script);
    }
    if(typeof jQuery==="undefined"){
    	include('js/jquery.min.js', runScript);
    }
    else {
    	runScript();
    }
    function runScript() {
      …
    }
    It looks if a script (in this case jQuery) is already present (e. g. because it has been referenced in the HTML via <script>), and if not, attaches it to the document, and then runs all other JS that might be dependent on it (defined in the runScript() function).

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,188
    Thanks
    10
    Thanked 569 Times in 550 Posts
    [QUOTE=VIPStephan;1358131]

    Code:
    	script.onload = script.onreadystatechange = function() {
    		if (callback) {callback();}
    		// prevent memory leak in IE
    		head.removeChild(script);
    		script.onload = null;
    	};
    what is the browser footprint of that pattern, does it work in IE8 and all real browsers?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,472
    Thanks
    0
    Thanked 634 Times in 624 Posts
    If you place the scripts just before the </body> tag then you should not need to wait for everything in the page to load in most cases - 99.999% of scripts placed there can run immediately without problems.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •