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

January 25, 2010 * Comments(0)

In one of my projects, I need to add several static pages to it. Those pages are static html and will not need update.

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! So simple. Of course, you have a directory /pages/ which contains several static html pages for loading.

BTW, here is a very good JQuery menu. With little configuration, it can be setup in a few minutes.

Related posts: