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

Category: JQuery   January 25, 2010

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.

Related posts:

  1. Set the page-breaking behavior for an element
  2. Java vs. JavaScript
  3. Reload Javascript and rebind elements when using JQuery
  4. Parse HTML in Java
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>
  • texaswc

    too much in the javascript for 200 pages….

  • atick

    Tnx

  • madhukaleeckal

    Not working on my Chrome Browser !!!

  • Andrea

    after I loaded the page the href in the loaded page doesn’t work.
    Can you help me?

  • Ranjeet Kumar

    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!”);
    });
    });

  • tola

    Why javascript doesn’t work after jquery.load
    ?

  • Thank you so much… your code realy help me.

  • sadegh

    tnx man , big like and Google +1

  • Guest

    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.

  • GuestMan

    Worked in Chrome for me once I disabled my adblocker.

  • Angham Hamdy

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

  • Admin

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

  • 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

  • Very useful info!

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