Posted on September 20, 2008 - by webmaster
Ajaxify your web pages using Jquery
This simple tutorial example will show you how to dynamically load your web content via ajax instead of default behaviour HTTP request (full round trip), before we continue you may want to have a look at the demo page.
To run this example you need to download jquery library or you can use Google Ajax Libraries API, Next create an HTML page name it “index.html” copy paste the codes below, and change the codes as neccesary:
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="path/to/jquery/jquery.js"></script>
<script type="text/javascript">
// javascript codes goes here
</script>
<style type="text/css">
/* CSS goes here */
/* keep this! */
#loading {display:none;} /*hide the loading element by default*/
</style>
</head>
<body>
<!-- navigation -->
<div id="nav">
<ul>
<!-- current class for the first load page -->
<li><a class="current" href="homepage.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About me</a></li>
</ul>
</div>
<!-- content holder -->
<div id="wrapper"></div>
</body>
</html>
In this example assumed your website contain of 3 contents homepage, services and about, so here we need to create those pages, simply copy paste the codes below, add the content, and gve a name: homepage.html,about.html, and services.html
<div class="container"> <!-- Content Goes Here ... --> </div>
No head, no body tags because we already put those tags in index.html and we are simply load these pages into wrapper div at index.html.
Now the main part, we need to write the javascript codes which will handle the ajax request. add these codes to index.html:
//1
$(function () {
//2
function ajaxify(file){
//3
$('<div id="loading"></div>').html("Loading Content: "+file+" ...").appendTo('body').fadeIn();
//4
$.get(file,function(data) {
//5
$("#wrapper").slideUp('slow',function(){
//6
$(this).html(data).slideDown('slow',function(){
//7
$('#loading').fadeOut('slow',function(){$(this).remove();});
});
});
});
}
//8
$("div#nav ul li a").click(function(){
//9
$('#nav ul li a.current').removeClass('current');
//10
$(this).addClass('current');
//11
ajaxify($(this).attr('href'));
//12
return false;
});
//13
ajaxify('homepage.html');
});
- The very basic jquery syntax, it tells browser to execute the codes inside the brackets only if the DOM is ready for any modification that going to be made by the scripts
- procedure block declaration to handle the onclick method (@ #11 & #13), param (string) the URL to load
- create a new div element with class “loading”, add the HTML string into it, then add itself as a child of body, and fade it in (take a look at stylesheet declaration, we set the display attribute to “none”)
- create HTTP GET request via ajax, parameter file is the url of the file to load, and on data received …
- Slide up the wrapper div and once the slide up effect completed …
- Put the data as HTML string into the wrapper div ($(this) refers to wrapper div) then slide it down slowly, and once slide down completed …
- Fade out the loading element, and then remove it from the DOM when fade out effect completed
- Anchor inside the selector pattern (read the jquery docs about selector) on click …
- remove the class current from the element which currently has it
- add the current style to the current clicked anchor
- execute ajaxify function with parameter the URL (href) of the current clicked anchor
- important!, to prevent default behaviour of a link, otherwise it will load the URL with full round trip HTTP request
- For the first loaded index.html, tell the browser to load the homepage.html via ajax
!update better approach available here, prevent a fall on screen readers without javascript support also SEO compliants
12 Comments
We'd love to hear yours!
Leave a Comment
Here's your chance to speak.
-
Most Popular Posts
Visit My Website
September 26, 2008
Permalink
can we try it with php? or is there other specific requirements? thanks.
Visit My Website
September 26, 2008
Permalink
sure, you can load HTML generated by any server side codes, just change the href target
Visit My Website
September 27, 2008
Permalink
How do search engines open the pages? Will they index them as any other static html?
Visit My Website
September 30, 2008
Permalink
check out the newer post http://www.chazzuka.com/blog/?p=246 about SEO friendly and accessible ajax, if we have some time, we’ll turn this sample into indexable ajax page
Visit My Website
October 1, 2008
Permalink
Hi,
if you doubleclick the tab preloading text will show forever.
Is there a way to avoid this?
Thanks
Visit My Website
October 2, 2008
Permalink
@Mr.X
change the click handler:
$(“div#nav ul li a”).click(function() {
if(!$(this).hasClass(“current”)) {
.. load
}
return false;
});
Visit My Website
October 13, 2008
Permalink
Really this is good information about Ajax.
Visit My Website
November 11, 2008
Permalink
Nice example! I will try to implement this one on my websystem. Thanks!
Visit My Website
December 31, 2008
Permalink
Thank you very much
I’ll use your method a lot
Visit My Website
April 8, 2009
Permalink
I can’t seem to find the updated page with the seo friendly version and the no js compatibility.
Visit My Website
April 13, 2009
Permalink
the link is updated check it out
Visit My Website
January 4, 2010
Permalink
simple but useful.
Thank for sharing your knowledge.