Category >> JQuery  

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  
  • Angham Hamdy

    it doesnt work with google crome?????????????????

  • Admin

    Because it is not a good idea to load stuff that may not be used.

  • http://thurrockdesign.com Essex Design

    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);

  • Frazer

    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

  • http://www.jasscreativeworks.com Jass

    Very useful info!

    It will be helpful to me if you share the code to show ‘page loading’ animation while page being loaded.