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.
<pre><code> String foo = "bar"; </code></pre>
-
texaswc
-
atick
-
madhukaleeckal
-
Andrea
-
Ranjeet Kumar
-
tola
-
Dede Irvan S
-
sadegh
-
Guest
-
GuestMan
-
Angham Hamdy
-
Essex Design
-
Frazer
-
Jass