CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3163192
user3163192

Reputation: 111

How to use html file as div

I'm very new to html and trying to make a website. So far, I've got an html file that has the header for my site and I would like to use it in all the pages I create for the site using jQuery's load function.

So basically what I want to do is load Header.html into Page.html.

This is the code in Page.html:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Hello</title>

    <script type="text/javascript" src="jQuery.js"></script>

    <script type="text/javascript">
            $(document).ready(function () {
                $("#Header").load("Header.html");
            });

    </script>
</head>
<body>
    Hi
    <div id="Header"></div>
</body>
</html>

Header.html looks something like this:

<div id="Header_Name">Adabelle Combrink</div>
<div id="Header_GameProgrammer">Game Programmer</div>

The only thing that comes up on the screen is "Hi" at the moment.

Upvotes: 0

Views: 300

Answers (5)

James Hibbard
James Hibbard

Reputation: 17725

Looks good, apart from the backslashes in the src attributes should be forward slashes.

Is there any particular error you are getting?

Also, as has been pointed out, PHP would be better suited to this job.

<?php include 'header.php'; ?>

Aside from the accessibility question, there might also be a negative SEO impact.

Edit:

Assuming your path to jQuery is correct, then the code you posted should work (it does for me).

Things to try / be sure of:

  • You are running this on a server (i.e. not just opening the file in your browser, as this will fall foul of the same origin policy). Check that the address in your address bar doesn't start with file://

  • Make sure that the path to the jQuery library is correct

  • Make sure that Page.html and Header.html are in the same folder

  • Check your broswer's error console. Instructions.

Upvotes: 4

manta
manta

Reputation: 1688

Div elements require a closing div tag like so <div></div>. there is no need to call small pieces of code from another js file, just write your code in the head element like so:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script type="text/javascript" src="../Scripts/jQuery.js"></script>
<script>
$(document).ready(function() {
$("#Header").load("../Templates/Header.html");
});
</script>
</head>
<body>
    <div id="Header"></div>
</body>
</html>

Don't be afraid to ask for more info.

$.load() http://api.jquery.com/load/

Upvotes: 0

Juan David Decano
Juan David Decano

Reputation: 166

jQuery(document).ready(function(){
  jQuery.ajax({
      url: 'header.html',
      type: 'get',
      success:function(data){
           jQuery('#header_container').html(data);
       }
  });
});

<div id="header_container">....</div>

The content returned by the request will go inside the header_container div

Upvotes: 0

CodeToad
CodeToad

Reputation: 4724

your code looks fine. are you running the site on a web server, such as out of visual studio (iis express) ? You can't run it locally. Ajax wont work that way.

Open your page in chrome, and press f12 to open up dev tools. go to the network tab. do you see the ajax request being fired on the load function?

by the way, regarding the header div, a div is not a self-closing tag. Its a container. Its best that you close it using a closing tag.

Otherwise you might get unpredictable results in some browsers. ( I have not checked in a while, but it was that way a few years ago, probably in explorer 8)

Upvotes: 0

Arun Krishnan
Arun Krishnan

Reputation: 1958

you can use iframe for including html file into the div.

Otherwise you have to follow some server side include method.

like, in php <?php include("includes/header.php"); ?>

Upvotes: 0

Related Questions