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

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.

 Original Source:
http://www.programcreek.com/2010/01/use-jquery-ajax-to-load-static-html-page-to-a-div-tag/