CODEWITHSUNDEEP
javascriptjqueryhtml
user583507
user583507

Reputation:

Load html into div without changing the rest of page

So I've seen tons of people asking how to load html into a div, and my code does that fine....but then the rest of the page changes when I load the html into the div.

I have a page a.html that looks like this, and loads b.html

a.html

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script> 
$(function() {
$("#includedContent").load("b.html"); 
}); 
</script> 



 <div id="includedContent"></div>
 <h1>This is why I rule</h1>
</head>
</html>

then b.html looks like this

<p> This is my include file </p>

What happens is a.html loads and I can see This is why I rule momentarily, but then the code goes out and gets b.html. When b.html loads I can ONLY see This is my include file and the 'This is why I rule' message disappears...

Why is this? How do I prevent it? It does this on all browsers I have tested it on.

Upvotes: 4

Views: 59667

Answers (2)

Yotam Omer
Yotam Omer

Reputation: 15376

All your HTML markup is in the head section not the body

try this:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

<script> 
$(function() {
$("#includedContent").load("b.html"); 
}); 
</script> 

</head>
<body>
     <div id="includedContent"></div>
     <h1>This is why I rule</h1>
</body>
</html>

Upvotes: 2

cruxi
cruxi

Reputation: 829

You have to write your html code into a <body> </body> 

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script> 
$(function() {
$("#includedContent").load("b.html"); 
}); 
</script> 
</head>

<body>
 <div id="includedContent"></div>
 <h1>This is why I rule</h1>
</body>
</html>

Upvotes: 9

Related Questions