www.webdeveloper.com
Results 1 to 11 of 11

Thread: Insert HTML in a div

  1. #1
    Join Date
    May 2013
    Posts
    8

    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 type = "text/javascript" language = "JavaScript">
          $('#footer').load('footer.html');
        </script>
    The footer.html file is in the same location as the html file which this code snipped 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
    Join Date
    May 2013
    Posts
    8
    Btw, I'm using jquery. I had <script src="jquery-1.9.1.min.js"></script> as a seperate tag, I've updated the open tag above to <script type = "text/javascript" language = "JavaScript" src="jquery-1.9.1.min.js"> but no change

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,441

    Lightbulb

    This does not use JQuery at all.

    See if you can use it to suit your needs.
    See recommendations about external file creation.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style type="text/css">
    /* following should be placed in an external style sheet file */
    #headerDIV { color:green; text-align:center; vertical-align:top; }
    #footerDIV { color:green; text-align:center; vertical-align:bottom; }
    </style>
    
    <script type="text/javascript">
    // this would be located in an external JS file to be loaded by each page an called by:
    // <script type="text/javascript" src='Header_Footer.js' >
    var HeaderInformation = 'Information located in the HEADER<p>&nbsp;</p>';
    var FooterInformation = '<p>&nbsp;</p>Information located in the FOOTER';
    </script>
    
    </head>
    <body>
    <div style="border:1px solid blue;">  <!-- this DIV tag is just for display, not needed -->
    
     <div id="headerDIV"></div>
    
     <h1>Header and Footer Tests</h1>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>Body Of Information</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
    
     <div id="footerDIV"></div>
    
    </div>                                <!-- this DIV tag is just for display, not needed -->
    
    <script type="text/javascript">
    window.onload = function() {
      document.getElementById('headerDIV').innerHTML = HeaderInformation;
      document.getElementById('footerDIV').innerHTML = FooterInformation;
    }
    </script>
    
    </body>
    </html>

  4. #4
    Join Date
    May 2013
    Posts
    8
    Thanks that does work, but what about loading contents from an HTML file instead of a javascript file? (Ok to have the javascript itself in an external script file, but I'm trying something for a homework that will eventually need to be loading one html file into another with javascript)

  5. #5
    Join Date
    May 2013
    Posts
    8
    Here are some of the links I was using as a reference before http://docs.jquery.com/Ajax/load and http://stackoverflow.com/questions/3...use-of-iframes

  6. #6
    Join Date
    May 2013
    Posts
    8
    Also, I tried using your code with the external files and it doesn't seem to be working... here's what I have (all files are in the same ffolder)

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="test.css"/>
    
    <script type="text/javascript" src='footer-test.js' ></script>
    
    </head>
    <body>
    <div style="border:1px solid blue;">  <!-- this DIV tag is just for display, not needed -->
    
     <div id="headerDIV"></div>
    
     <h1>Header and Footer Tests</h1>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>Body Of Information</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
    
     <div id="footerDIV"></div>
    
    </div>                                <!-- this DIV tag is just for display, not needed -->
    
    <script type="text/javascript">
    window.onload = function() {
      document.getElementById('headerDIV').innerHTML = HeaderInformation;
      document.getElementById('footerDIV').innerHTML = FooterInformation;
    }
    </script>
    
    </body>
    </html>
    Code:
    <script type="text/javascript">
    var HeaderInformation = 'Information located in the HEADER<p>&nbsp;</p>';
    var FooterInformation = '<p>&nbsp;</p>Information located in the FOOTER';
    </script>
    Using Firebug I can tell the browser sees the external script file, just the only info that shows on the page is the border box and the h1 and p info in the html file itself

  7. #7
    Join Date
    May 2013
    Posts
    8
    Ok just realized you don't put <script> in the script file (duh).
    So only question is, how do I accomplish this where instead of the variables equaling a string, it loads an html file

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,441
    I'm not sure where you are heading with this.

    You started out wanting to put a common header and footer into each individual HTML file.
    Now you seem to be wanting to load in a whole new HTML page ???

    It would be easier to chain the HTML files rather than load them into an existing file.
    You could also use <iframe> tags to load in a existing page, but that would be more than just headers and footers.

  9. #9
    Join Date
    May 2013
    Posts
    8
    I got it to work, below is the code. Problem was my footer.html file had <html>, <body>, etc tags in it, instead of just the text and any span tags.

    The assignment is to load create a header, footer, and nav html files, then load those html file in to every web page on the site. So while the Javascript method you suggested does accomplish the same thing in the end, it doesn't meet the requirments for the assignment. But thank you for your help, I learned another way of doing it, and that's always a good thing!

    Code:
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <div id="footer"></div>
    <script>
    $("#footer").load("footer.html");
    </script>

  10. #10
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    i think that SSI language was mentioned in your assingment but not javascript

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,441
    Quote Originally Posted by me10lee83 View Post
    I got it to work, below is the code. Problem was my footer.html file had <html>, <body>, etc tags in it, instead of just the text and any span tags.

    ...
    Difficult to see your problem when you did not include your code in your initial post.
    My offer was just SWAG (Scientific Wild A** Guess) at your stated requirements.
    Glad you got it solved.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles