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 9 of 9
  1. #1
    New Coder
    Join Date
    Apr 2005
    Location
    Massachusetts, US
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Cannot access functions in external JavaScript

    Hi again

    I'm having a new problem this time...

    Basically, I found a way to load an external JavaScript hosted on my server into a webpage. The problem is, when I try and call testFunction() in the test web page, it gives me an error that states:
    Code:
    testFunction is not defined
    The code I use for this is:
    Code:
    <html>
    
    <head>
      <title> Test Page </title>
    </head>
    
    <body>
      <script language="javascript">
      var head = document.getElementsByTagName('head')[0];
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'http://foreverzero.org/test.js';
      head.appendChild(script);
      script.onreadystatechange = function () {
         if (this.readyState == 'complete') testFunction();
      }
      script.onload = testFunction();
      </script>
      <p> Woooooooooo </p>
    </body>
    
    </html>
    Here is test.js (the external script that I am trying to load):
    Code:
    addEventListener(
       "load",
       function(event) {
          alert("load event listener");
       },
       false
    ); 
    
    function testFunction() {
       alert("It worked!");
    }
    
    testFunction();
    I know it is loading the script for two reasons. The first is that when I load the test page above, the status bar says "transfering data from foreverzero.org" (the test page is not located on that domain name). The second is that the load event listener goes off, and so does the "it works!" alert when I call testFunction() on the very last line.

    I cannot figure out why calling testFunction() from the test HTML page will not work. Any advice or ideas is greatly appreciated, I have been struggling with this nearly all week now
    Last edited by Forever Zero; 06-18-2008 at 04:42 PM.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    here is your problem: you are assigning testFunction() to the onload, BEFORE the script has loaded, and thus testFunction has loaded as well.

    the onload must be firing before the code is ready.

    not sure how to fix this, but there you go...

    subsequent calls to testFunction() from the page are fine.
    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:

    Forever Zero (06-18-2008)

  • #3
    New Coder
    Join Date
    Apr 2005
    Location
    Massachusetts, US
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hmm, thanks for pointing that out.

    My only idea to to create a recursive function that sets a timer to check if the script has loaded.

    EDIT: I did something dumb....1 second heheh
    Last edited by Forever Zero; 06-18-2008 at 06:28 PM.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    you could do something like that, but assign a global variable as the last line in your external script, and monitor that variable. that will be more consistent across browsers.

    eg: loadedExternal = true;
    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%

  • #5
    New Coder
    Join Date
    Apr 2005
    Location
    Massachusetts, US
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts
    For anyone wondering, what I did here seemed to work fine:

    Code:
      <script language="javascript">
      var head = document.getElementsByTagName('head')[0];
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'http://foreverzero.org/test.js';
      head.appendChild(script);
      function waitForLoad() {
        if(typeof testFunction != 'function') {
          var t=setTimeout("waitForLoad()",500);
        } else {
          testFunction();
        }
      }
      waitForLoad();
      </script>
    What do you mean exactly by a global variable to monitor? Do you mean for example, in my code above, instead of calling testFunction() in the else{}, that I could set a variable named something like"isLoaded" to true instead, and just use that to check if the script is loaded whenever I need to?
    Last edited by Forever Zero; 06-18-2008 at 06:47 PM.

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    kinda. i mean actually place a var declaration at the last of your script.
    when the external script finishes, that variable is the last thing it changes.

    your timeout then tests for the var.

    something like:
    Code:
    if(window.loadedExternal){ testFunction(); } else { setTimeout("waitForLoad()",500); }
    this speeds up the check, ensures compatibility in any browser, and simplifies coding.

    you might even be able to get away with killing the timeout check,
    by simply putting "testFunction()" as the last line of the external script. (depends on your usage).
    Last edited by rnd me; 06-19-2008 at 03:30 AM.
    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%

  • #7
    New Coder
    Join Date
    Apr 2005
    Location
    Massachusetts, US
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Ahhh that makes sense now.

    Thanks a lot, really helped me out :P

  • #8
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    I would avoid loadedExternal and simply test from the existence of testFunction.
    Code:
    (function() {
      if(testFunction)
        testFunction();
      else
        setTimeout(arguments.callee, 500);
    })();
    you might even be able to get away with killing the timeout check,
    by simply putting "testFunction()" as the last line of the external script. (depends on your usage).
    I think this is probably the best route if you can use it.
    Trinithis

  • #9
    New Coder
    Join Date
    Apr 2005
    Location
    Massachusetts, US
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for the extra info.

    Unfortunately, I can't use that method (man would that have made my life easier...)

    I made a new thread just now explaining my new issue with this (it was a different topic even though it is for the same script). Basically, I need to use this method to load multiple scripts.


  •  

    Posting Permissions

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