Use JQuery Ajax to load static html page to a div tag

This example shows how to load a static html page to a div tag by using JQuery Ajax?

If you want to load a static html page, you can use JQuery Ajax function. To make this separate from the main project which has a good MVC structure, I use JQuery's Ajax function to load those static pages.

First of all, here is a menu from index.html page.

<ul>
	<li><a id="page1" href="#">About</a></li>
	<li><a id="page2" href="#">Community</a></li>
	<li><a id="page3" href="#">Sponsor</a></li>
</ul>
<div id="result" style="clear:both;">
</div>

At the head part, we need to include JQuery library.

<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>

Add the following code to head part.

	<script type="text/javascript">
		$(document).ready(function(){
		   $("#page1").click(function(){
		   	$('#result').load('pages/page1.html');
		     //alert("Thanks for visiting!");
		   }); 
 
		   $("#page2").click(function(){
		   	$('#result').load('pages/page2.html');
		     //alert("Thanks for visiting!");
		   });
		 });
	</script>

That's it!

Of course, you have a directory /pages/ which contains several static html pages for loading.

Category >> JQuery

If you want someone to read your code, please put the code inside <pre><code> and </code></pre> tags. For example:

<pre><code> 
String foo = "bar";
</code></pre>

Jass on 2012-4-11

Very useful info!

It will be helpful to me if you share the code to show ‘page loading’ animation while page being loaded.
Frazer on 2012-10-26

Hey great info!

Would this work as a means of loading embedding code contained in other pages within my site onto one single page?

More specifically: I wanted to create a page with several links on the lefthand side to various photo albums and an open div on the right to display the selected album. My albums were made using simpleviewer and each has some embed code to display it.

If I had just the embed code on various static .html pages could this function be used to seek that code out and display it?

Thanks a lot
Essex Design on 2012-12-18

Why not add a fade effect?

//Hide it on click
$(‘#result’).hide();
//Load it $(‘#result’).load(‘pages/page1.html’);
//Fade it in
$(‘#result’).fadeIn(600);
Admin on 2012-12-31

Because it is not a good idea to load stuff that may not be used.
Angham Hamdy on 2013-11-10

it doesnt work with google crome?????????????????
GuestMan on 2014-5-17

Worked in Chrome for me once I disabled my adblocker.
Guest on 2014-6-3

Thanks. I couldnt figure out why this wasnt working. Is there a solution to the adblocker issue? Most people wont trust a random website or disable it.
sadegh on 2014-7-8

tnx man , big like and Google +1
Dede Irvan S on 2014-7-10

Thank you so much… your code realy help me.
tola on 2014-10-4

Why javascript doesn’t work after jquery.load
?
Ranjeet Kumar on 2014-10-10

This is good code, but I want to use class css selector like this :—

$(document).ready(function(){
$(“.menu-link”).click(function(){
$(‘#result’).load(‘pages/page1.html’);
//alert(“Thanks for visiting!”);
});
});
Andrea on 2015-2-16

after I loaded the page the href in the loaded page doesn’t work.
Can you help me?
Mashrur Mohsin on 2015-5-14

fuck you
madhukaleeckal on 2015-8-4

Not working on my Chrome Browser !!!
atick on 2015-8-21

Tnx
texaswc on 2016-6-27

too much in the javascript for 200 pages….

Use JQuery Ajax to load static html page to a div tag

Related posts:

Leave a comment