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 10 of 10
  1. #1
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Post Guarantee external file fully loads before more actions?

    Is there a way to guarantee that an external JS file will fully load
    before the calling program continues?

    If I put the <script src="file.js"> tag into the head and use the information in the rest of the program, all works well.

    However, I am trying to load the external file dynamically using the logic
    from: http://www.javascriptkit.com/javatut...criptcss.shtml
    but I get errors that the vital variable in the external file is "not available"
    to the "main" program.

    I have also tried to place a manual delay of 1-2 seconds using the
    setTimeout and setInterval functions. Same results.

    The purpose for the request is that I want to pass the external filename
    as a parameter of a querystring so that the same program can be used
    to display the contents of different files with a single program.

    I am also open to other methods to use a single program to load
    individual external JS files that are required by the "main" program
    if the above is not a viable request.

    Any thoughts are appreciated.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,036
    Thanks
    23
    Thanked 589 Times in 588 Posts
    Any thoughts are appreciated.
    Yes, one:
    If this is true,
    If I put the <script src="file.js"> tag into the head and use the information in the rest of the program, all works well.
    Why are you messing around?
    Evolution - The non-random survival of random variants.

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Arrow

    Quote Originally Posted by sunfighter View Post
    Yes, one:
    If this is true,


    Why are you messing around?
    Because:

    Quote Originally Posted by jmrker View Post
    ...
    The purpose for the request is that I want to pass the external filename
    as a parameter of a querystring so that the same program can be used
    to display the contents of different files with a single program.
    ...
    If I hard code the external file name into the calling script,
    I would need to create multiple versions of the calling script.
    Future modifications to the "main" script would be a nightmare to maintain.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,274
    Thanks
    10
    Thanked 581 Times in 562 Posts
    since you are changing the queryString, you page will reload i assume.
    during page loading, you can add scripts in a sync fashion using document.write():

    Code:
    function Import(url){
       document.write("<sc"+"ript src='"+url+"'><\/script>");
    }
    use this only while the page is load, not in a ready() or onload().

    document.write is the only way to add scripts that will load before other scripts in a predictable fashion. you can also re-code your external files into modules, like AMD for example. you can also use sync ajax to fetch scripts that live on your server to create a require() system like node.js's.

    look into require.js, it has a good overview of the challenges you face in you task.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    jmrker (11-01-2013)

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Thumbs up

    Thanks.

    I'll give that suggestion a try and the link a read.



    :Background Information:

    The project is a single main script that utilizes different versions of external JS files.

    It involves only a single load (not a reload) with the command line like, for example:
    pmp.html?case=case24.js&user=JMR
    pmp.html?case=case25.js&user=KER

    where the external files (case24.js or case25.js) have a single "array in array" variable.

    Since the single variable in the external files is required by the "main" script,
    I needed to make sure the external file is completely loaded which I seem
    to be able to do when it is hard coded into the "main" script.

    With the number of case files growing, I didn't want increasing numbers of "main" script to maintain.

  • #6
    New Coder
    Join Date
    Sep 2013
    Posts
    25
    Thanks
    8
    Thanked 1 Time in 1 Post
    Quote Originally Posted by jmrker View Post
    Is there a way to guarantee that an external JS file will fully load
    before the calling program continues?

    If I put the <script src="file.js"> tag into the head and use the information in the rest of the program, all works well.

    However, I am trying to load the external file dynamically using the logic
    from: http://www.javascriptkit.com/javatut...criptcss.shtml
    but I get errors that the vital variable in the external file is "not available"
    to the "main" program.

    I have also tried to place a manual delay of 1-2 seconds using the
    setTimeout and setInterval functions. Same results.

    The purpose for the request is that I want to pass the external filename
    as a parameter of a querystring so that the same program can be used
    to display the contents of different files with a single program.

    I am also open to other methods to use a single program to load
    individual external JS files that are required by the "main" program
    if the above is not a viable request.

    Any thoughts are appreciated.

    If I am getting what you are saying correctly, why not insert the file using JQuery just do something like:

    Code:
    url = "blah blah blah";
    url = "<script type=text/javascript src = " + url + "></script>
    $(head).append(url);
    I guess the thing I wouldn't be so sure at is whether you would need to refresh the page for the <script> tag. I'm not sure but it might be worth trying out.
    Last edited by and0rsk; 11-01-2013 at 05:11 AM.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,274
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by jmrker View Post
    It involves only a single load (not a reload) with the command line like, for example:
    pmp.html?case=case24.js&user=JMR
    pmp.html?case=case25.js&user=KER

    where the external files (case24.js or case25.js) have a single "array in array" variable.
    in that case, src/inline this from your html anywhere before your main code:
    Code:
    // turn URL'QS into an object using a parser. takes full urls...
    function parseQS(str) {
    	var ob = {}, float = "",
    		key = "",
    		dc = decodeURIComponent;
    
    	for (var i = 0, mx = str.length; i < mx; i++) {
    		var it = str[i];
    		if (it === "=") {
    			key = float;
    			float = "";
    			continue;
    		}
    		if (!it.search(/^[?&]/)) {
    			if (it === "&" && str.slice(i + 1, i + 5) === "amp;") {
    				i = (i + 4);
    				float += "&";
    				continue;
    			}
    			if (key) {
    				ob[key] = dc(float);
    			}
    			key = "";
    			float = "";
    			continue;
    		}
    		float += it;
    	}
    	ob[key] = dc(float);
    	return ob;
    }
    
    
    function Import(url){
       document.write("<sc"+"ript src='"+url+"'><\/script>");
    }
    
    $GET=parseQS(location.href);
    
    Import($GET.case);
    if you have it in an external script, don't use the defer or async attrib on the script tag that loads this code.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Thumbs up

    Thanks again 'rnd me'. Your post #7 appears to do what I want.



    Because of my inquisitive nature only and to test my understanding, I tried the following script
    placed in the <head> section of my "main" program.

    My thinking is that the new Object() treats the additionally defined functions (QStr.collect() and QStr.fetch())
    and QStr.Data as local to the new object and not global to the "main" program. Am I thinking correctly?

    I have two additional questions comparing your script to that below.
    1. Is there an additional advantage to your script that I am overlooking?
    2. What is the purpose of adding the decodeURIComponent in your script?

    Code:
    <!--
      showcase0.html?case=case24.js&user=JMR
      currently available: case24.js and case25.js 
    -->
    
    <script type="text/javascript">
    function Import(url) { document.write("<sc"+"ript src='"+url+"'><\/script>"); }
    
    var QStr = new Object();
        QStr.Data = {};
        QStr.collect = function() {
          if (location.search.length > 1) {
            var ls = location.search.substring(1);
            var namevalue = ls.split("&");
            for (var i=0; i<namevalue.length; i++) {
              var data = namevalue[i].split("=");
              QStr.Data[data[0]] = data[1];
            }
          }
        }
        QStr.fetch = function(v) {
          var info = QStr.Data[v];
          if ((info == undefined) || (info == null)) { info = ''; }
          return info;
        }
    
    // dynamically loads case25.js, for example:  showcase0.html?case=case25.js?user=KER
      QStr.collect();
      var casefile = QStr.fetch('case');
      if (casefile == '') { casefile = 'case24.js'; } // default
      var username = QStr.fetch('user');
      if (username == '') { username = 'user is not defined'; }
      var url = 'http://www.nova.edu/hpd/otm/pmp/tablet/'+casefile;
      alert(url+'\n'+username);  // for testing purposes only
    
      Import(url);
    </script>

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,274
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by jmrker View Post
    Thanks again 'rnd me'. Your post #7 appears to do what I want.

    I have two additional questions comparing your script to that below.
    1. Is there an additional advantage to your script that I am overlooking?
    2. What is the purpose of adding the decodeURIComponent in your script?
    i don't know what all that qstr stuff is, but it looks like a naive attempt to get queryString info that has no resiliency for valid encoded char, nor for automatic browser decoding that can return extra "="s from "%3D", or regognize that "&amp;" is not the start of the "amp;" key, and whatnot...

    1. mine is a true parser that's not fooled by malformed data, extra encoding, not enough encoding, or other common gotchas resulting from string pattern matching. if it encounters an error, it keeps going to the next key/value pair. bulletproof. some of these problems are likely diminished/inapplicable in/to newer browsers, but why gamble when we have something works perfectly?

    2. see above, and just consider that you might want to cache-bust an embed using a url like "script45.js?123456789".


    will you encounter any of the gotchas in your code? maybe not, i'm just explaining why i wrote it how i did back in the day...
    Last edited by rnd me; 11-01-2013 at 05:57 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #10
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts
    Fair enough ... Thanks again.


  •  

    Posting Permissions

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