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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    External javascript synchronization.

    Dear All,

    I got a problem with order of loading external javascript file.
    I have 2 external javascript files: jsFile1. js and jsFile2.js.
    And file jsFile2 use an object in file jsFile1.js. So file jsFile2.js have to load after file jsFile1.js.
    But sometime I got runtime error, because file jsFile2.js is loaded before jsFile1.js
    I added 2 js files by:
    document.getElementsByTagName('head')[0].appendChild(jsFile1.js);
    document.getElementsByTagName('head')[0].appendChild(jsFile2.js);

    Does anyone know how to solve this problem.
    Please help. Thank you.
    Best Regards.

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,830
    Thanks
    21
    Thanked 157 Times in 148 Posts
    You need to look into "lazy loading" your dynamically inserted scripts.

    This is one way: http://dotnetfollower.com/wordpress/...g-dynamically/

    And some more ways: http://www.google.com/search?client=...w=1355&bih=863

    Basically, use script.onload for all non-IE browsers and script.onreadystatechange for IE to test for cross-browser, script readiness.

    Also, another way to achieve this is to declare a global JS object/variable at the very end of your main script, and then, on a timer, check for when the variable is set, i.e.:

    Code:
    <!-- ..Somewhere near top of file.... -->
    
    <script type="text/javascript">
    				var pgHead = document.getElementsByTagName("head")[0];
    				var pgScript = document.createElement("script");
    				pgScript.type = "text/javascript";
    				pgScript.src = "/js/tooltips.js";
    				pgHead.appendChild(pgScript);
    
    				function checkTooltipsCodeLoaded()
    				{
    					if (typeof CheckTooltipsClassLoaded == "function" && typeof pageIsAllDoneLoading != "undefined")
    					{
    						new Tooltips(document.getElementsByTagName("img"), true);
    					}
    					else
    					{
    						setTimeout("checkTooltipsCodeLoaded()", 250);
    					}
    				}
    				checkTooltipsCodeLoaded();
    </script>
    
    
    <!-- ..... lots of HTML/JS code here....then at the end of the file: -->
    
    
    <script type="text/javascript">var pageIsAllDoneLoading = true;</script>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • Users who have thanked chump2877 for this post:

    nobitavn (10-04-2011)

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Dear,

    Thank you very much for your help.
    I tried 2 ways, but the result is still not good. The error object missing is still happen: "A Runtime Error has occurred: 'OBJ' is undefined"
    This is my code:

    Code:
    function AddScript(url, callback) {
        var script   = document.createElement('script');
        script.src   = url;
        script.type  = 'text/javascript';
        script.defer = false;
     
        if (typeof callback != "undefined" && callback != null) {
            // IE only, connect to event, which fires when JavaScript is loaded 
            script.onreadystatechange = function() {
                if (script.readyState == 'complete' || script.readyState == 'loaded') {
                	script.onreadystatechange = script.onload = null; // prevent duplicate calls
                    callback();
                }
            };
     
            // FireFox and others, connect to event, which fires when JavaScript is loaded
            script.onload = function() {
            	script.onreadystatechange = script.onload = null; // prevent duplicate calls
                callback();
            };
        }
    
        document.getElementsByTagName('head')[0].appendChild(script);
    }
    
    function loadScript() {
    	script = document.createElement('script');
    	script.type = 'text/javascript';
    	script.src = "jsFile2.js"; 
      	document.getElementsByTagName('head')[0].appendChild(script);
    }
    
    $(function() {
    	AddScript("jsFile1.js", loadScript());
    });
    'OBJ' is defined in jsFile1.js and used in jsFile2.js
    Do I miss anything?
    Thank you.
    Last edited by nobitavn; 10-04-2011 at 07:57 AM.

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,830
    Thanks
    21
    Thanked 157 Times in 148 Posts
    It's really hard to say what the problem is without seeing the full code and full error messages. And please enclose your code in code tags! (see hash mark/pound sign button in forum post edit mode)

    I'm off to bed for the night, so maybe someone else can help you now...good luck!
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by nobitavn View Post
    Dear All,

    I got a problem with order of loading external javascript file.
    I have 2 external javascript files: jsFile1. js and jsFile2.js.
    And file jsFile2 use an object in file jsFile1.js. So file jsFile2.js have to load after file jsFile1.js.
    But sometime I got runtime error, because file jsFile2.js is loaded before jsFile1.js
    Techically, this is impossible, unless you use an asynchronous operation, which means you are performing an AJAX request.

    In this case, either you make your request synchronous (by setting the asynchronous argument of the open() method to false:
    Code:
    AJAX.open("GET", url, false);
    or you re-create your codes in such a manner that whichever function triggered in the second JS should be triggered after the request was delivered.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Dear Kor,

    Thank you very much.
    Can you tell me more about this way? How to do that?
    or you re-create your codes in such a manner that whichever function triggered in the second JS should be triggered after the request was delivered.
    Do need any extend library to use this way?
    Code:
    AJAX.open("GET", url, false);
    Hope for your help. Thank you.
    Best Regards,
    Last edited by nobitavn; 10-04-2011 at 09:25 AM.

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I have no idea what is in your JS files, thus I have nothing else to add.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Dear Kor,

    Thank you very much.
    My problem was solved with your method:

    Code:
    	var xmlhttp=new XMLHttpRequest();
    	xmlhttp.open('GET', "jsFile1.js", false);
    	xmlhttp.send();
    	
    	scr = document.createElement('script');
    	scr.type = 'text/javascript';
    	scr.text = xmlhttp.responseText;
    	document.getElementsByTagName('head')[0].appendChild(scr);
    Thank you,
    Best Regards.


  •  

    Posting Permissions

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