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 to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Loading Multiple JavaScripts on the same page

    Basically, I have a total of three different JavaScripts that need to be loaded when the user opens the page; let's call them script_a.js, script_b.js, and script_c.js

    script_a.js and script_b.js each need to be loaded on every page; however, they do very different things (one displays text, the other creates buttons), and in the interest of readability and ease of editing later, I want to keep them separate.

    script_c.js only needs to be loaded on one page; there will be a few variants (script_c2, script_c3, etc), but again, each of them only needs to be loaded on a single page.

    The scripts are also too large and unwieldy for me to put them directly into the HTML (basically because I have to do a lot of different switches, and conditionals, and output formatting).

    At present, the only way I know how to load a JavaScript is to use window.onload, so obviously I'm getting into the issue of competing onLoads.

    Any help would be appreciated!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    This topic has been covered many times in this forum.

    http://www.javascriptkit.com/javatut...iplejava.shtml
    http://www.dyn-web.com/tutorials/combine.php
    Or you can simply fire a set of functions when the page loads.
    Code:
    <script type="text/javascript">
    window.onload = function() {
    functionOne();
    functionTwo();
    }
    </script>
    "When I was a kid I used to pray every night for a new bike. Then I realised that The Lord doesn't work that way, so I stole one and asked him to forgive me."

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm sorry, I need a little bit more guidance on how to use this...

    Code:
    <script type="text/javascript">
    I get this; this is what I'm currently using for the single javascript I have implemented and working.

    Code:
    window.onload =  function(){
    So this here is saying "When the window loads, do the following:", yes?

    Code:
    functionOne();
    functionTwo();
    Here's what I don't understand - how do I call up to three different JavaScripts here?

    Code:
    script_a.js;
    script_b.js;
    script_c.js;
    Is that how that would work? And within the code, how do I make sure that the right function loads when the script is called? There are multiple functions feeding into the main output function in each script - how do I get that one function to load when the script is called?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,495 Times in 4,459 Posts
    You don't call the actual *files*. You do, indeed, need to know the name of the function to be invoked *from* each file.

    If each of those files is currently doing its own window.onload=xxxx, then you simply can find those lines and combine the xxxx's as Philip showed you.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I've got that code in the header now, but I'm unclear on how to specify two different external sources for each function.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,495 Times in 4,459 Posts
    Quote Originally Posted by Grammaticus View Post
    Okay, I've got that code in the header now, but I'm unclear on how to specify two different external sources for each function.
    Sorry. You've lost me. Are you asking how to tell that "universal" onload:
    Code:
    <script type="text/javascript">
    window.onload = function() {
        functionOne();
        functionTwo();
    }
    </script>
    where functionOne and functionTwo are?? You don't need to. The names must be unique, so JS will find them, whichever file they are in.

    If your names aren't unique, then you've got problems. Not insurmountable ones, but problems.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, now I'm lost... well, even more lost than I was before . Let me see if I can try to explain myself a little better.

    In this block of code:
    Code:
    <script type="text/javascript">
    window.onload = function() {
        functionOne();
        functionTwo();
    }
    </script>
    FunctionOne resides in a file called "script_a.js".

    FunctionTwo resides in a file called "script_b.js".

    I don't understand how I use this to say "look for FunctionOne in script_a.js".

    Assumption: Based on the "<script type=...>" syntax, I'm assuming that this code goes in the HTML header. If that's incorrect, I would appreciate the clarification.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,495 Times in 4,459 Posts
    Maybe I'm lost, too.

    I have *assumed* that you have gotten this far:
    Code:
    <html>
    <head>
    <script type="text/javascript" src="script_a.js"></script>
    <script type="text/javascript" src="script_b.js"></script>
    <script type="text/javascript">
    window.onload = function() {
        functionOne();
        functionTwo();
    }
    </script>
    </head>
    <body>
    ...
    </body>
    </html>
    And that indeed the two functions are in the two ".js" files, as you described.

    And you say that still does nothing?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OH! Yes, this works beautifully!

    I figured out what was wrong, I accidentally used one of the JavaScript reserved words in one of my function names. But now this is working PERFECTLY, thank you so much!


  •  

    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
    •