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

    Join Date
    Apr 2013
    Posts
    31
    Rep Power
    2

    Insert HTML in a div


    I am new to Javascript and the very first thing I'm trying to do is to have a footer html file which will load in to the footer div on all pages. I have found several different code examples online but none seem to be working. The one I am using right now is:

    Code:
    <script src="jquery-1.9.1.min.js"></script>
    <script type = "text/javascript" language = "JavaScript">
          $('#footer').load('footer.html');
    </script>
    The footer.html and the jquery files are in the same location as the html file which this code snippet is being entered in to, and the div is <div id="footer">.

    I have tried the above code in both the header and the body to no avail. The footer div remains empty. What am I doing wrong?
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,175
    Rep Power
    184
    You have to put your web page(s) on a server, for this to work; because jQuery is using AJAX to load the external file. So you cannot get this to work locally, because of Access-Control-Allow-Origin policies (browser security measures). When you put your web page(s) on a server; then..., this is how you would go about doing it:
    Code:
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <div id="footer"></div>
    <script>
    $("#footer").load("footer.html");
    </script>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    31
    Rep Power
    2
    Got it thanks! One issue I was having which I figured out was part of my problem was I had the footer.html written up like a regular html file, complete with <html> <body> etc tags. Makes sense now to not have those, since it's just inserting the html content in to the document that already has all that.

    Now, to figure out how to write the code to do this on my own, as the professor will just be saving the file to his computer to test it... I'll look around and see what I can find out, but any tips would be appreciated as well
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,175
    Rep Power
    184
    Originally Posted by me10lee83
    Now, to figure out how to write the code to do this on my own
    What? I posted the code you need; just add your other document tags to it (ie. doctype, html, head, body, and etc.), that's all you need to do.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    31
    Rep Power
    2
    Originally Posted by web_loone08
    What? I posted the code you need; just add your other document tags to it (ie. doctype, html, head, body, and etc.), that's all you need to do.
    Yes, that works, but only if it's stored on a server since it uses Ajax. I need it to work when stored locally, so guess I'll have to write the functions myself instead of using jquery
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,175
    Rep Power
    184
    You cannot write your own function; you will still run into the same browser security issues with JavaScript. The only way you can do this locally (cross browser); that I can think of... would be to use an iframe.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    31
    Rep Power
    2
    Hm, ok thanks. My professor usually saves our files locally I thought but I'll check with him...
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    31
    Rep Power
    2
    Originally Posted by me10lee83
    Hm, ok thanks. My professor usually saves our files locally I thought but I'll check with him...
    Actually, I just tried it and it is working locally for me.
  16. #9
  17. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,175
    Rep Power
    184
    I do not know what browser you are using; but there are strict browsers, like Chrome... that will not allow you to use this code locally. One browser might allow this code to work, while others will not; that's not "cross browser". The only way for this code to work "cross browser"; would be for this code/web page(s) to be placed on a server. I guess if your professor uses the same browser you are using and did not say anything about your code having to work across all browsers; then just go with it. If he/she knows what their actually looking at; then it really does not matter, because they will know the code will work.
    Last edited by web_loone08; May 8th, 2013 at 09:37 PM.
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    31
    Rep Power
    2
    Originally Posted by web_loone08
    I do not know what browser you are using; but there are strict browsers, like Chrome... that will not allow you to use this code locally. So, that's what I mean by "cross browser"; one browser might allow this code to work, while others will not.
    '

    Good to know, thanks. I was using Firefox and I believe this is what our professor uses as well so it should work for him. I tested this in Chrome and it does not work like you said. IE (10) loads the content in the footer, but the CSS doesn't load quite right.

IMN logo majestic logo threadwatch logo seochat tools logo