#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    31
    Rep Power
    2

    Access a .js file in a different folder


    I am using Javascript/jquery to load html in to a div on a page. I can only seem to get it to work if both the .js file and the .htrml file being loaded into the div are in the same folder as the page. I tried using ../ to indicate the .js file is up one directory but it doesn't work. Same with storing the .js file in the same directory as the page but the html content to be loaded in a different directory with ../ in the .js file.

    Here is the code I'm using:
    Code:
       <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
       <script src="footer.js"></script>
    and in the .js file:
    Code:
    $("#footer").load("footer.html");
    I am testing this locally, I know that since jquery is using Ajax it only works locally in some browsers (like Firefox which is what I'm using) so that might be part of the issue. Anyone know if 1) that should work to have all pages refer to one .js file and one .html file and if so, 2) would the local testing be the reason it doesn't seem to be?
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    184
    If your JS file is in your root/parent folder and your html file(s) are in a sub-folder; this is how you would get this code to work (at least in FireFox):
    Code:
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    
    <div id="footer"></div>
    
    <script src="../footer.js"></script>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    31
    Rep Power
    2
    Originally Posted by web_loone08
    If your JS file is in your root/parent folder and your html file(s) are in a sub-folder; this is how you would get this code to work (at least in FireFox):
    Code:
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    
    <div id="footer"></div>
    
    <script src="../footer.js"></script>
    That's what I thought it would be, but it's not working (on the server either).
    http://tiger.towson.edu/~tbaldw2/paper/abstract.html does not have the footer, http://tiger.towson.edu/~tbaldw2/toc.html does

    http://tiger.towson.edu/~tbaldw2/footer.js and http://tiger.towson.edu/~tbaldw2/footer.html are the files
  6. #4
  7. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    Hi,

    you need to get familiar with the JavaScript console of your browser: F12 -> Console. In Firefox, you need to install Firebug first.

    Check the error messages in the console:
    Code:
    GET http://tiger.towson.edu/~tbaldw2/paper/footer.html 404 (Not Found)
    So this is not a problem with the JavaScript file. The scripts works perfectly, it just doesn't find the "footer.html" file. And that's no wonder, because you always assume it's in the same directory as the HTML file. Relative paths are relative to where the HTML file is. If you always want to use the same path regardless of the current location, it has to be absolute.

    However, the whole approach of including HTML parts with HTML is rather odd. You should be using Server Side Includes or a server-side scripting language.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".

IMN logo majestic logo threadwatch logo seochat tools logo