 |
    |
Home
How to create a website
How to create login in website
How to create feedback form
How to create Ajax website
How to create HTML file
How to create Ajax website using jquery
Here I will show how to create Ajax website using jquery. Most of us find it difficult to develop Ajax, mostly the designers. But after reading the topic you will be clear with Ajax.
Ajax is nothing but loading external page to the current page without refreshing browser.
It is faster then what we do regularly by using <a> tag in html. At last the whole page is not loaded again, only the required content is loaded. This complete process is done by javascript.
Why jquery?
Jquery is javascript framework. Using jquery makes life ease. Bothering of browsers compatibility issues are solved. Obviously the few lines of code and everything is done.
Before we start, make sure you have jquery.js on your computer. If you are not having download it from here
Create a new file, name it as index.html. See the code below. We have put navigation bar at the top (Home, Product, Services, Contact) and below is the div tag where the content of the page will appear (<div id="dataGrid" ></div>).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript" src="js/common.js"></script>
</head>
<body >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="javascript:;" id="home">Home</a></td>
<td><a href="javascript:;" id="products">Products</a></td>
<td><a href="javascript:;" id="services">Service</a> </td>
<td><a href="javascript:;" id="contact">Contact</a></td>
<td> </td>
</tr>
</table>
<div id="dataGrid" ></div>
</body>
</html>
Jquery.js and common.js, both are the javascript files included in head of the file.
Common.js contains the function of calling external file.
$(document).ready(function(){
$.ajax({
url: "home.html",
cache: false,
success: function(html){
$("#dataGrid").append(html);
}
});
// for products clicked
$("#products").click(function(){
document.getElementById("dataGrid").innerHTML = "";
$.ajax({ url: "products.html", cache: false, success: function(html){ $("#dataGrid").append(html); } });
});
// for services clicked
$("#services").click(function(){
document.getElementById("dataGrid").innerHTML = "";
$.ajax({ url: "services.html", cache: false, success: function(html){ $("#dataGrid").append(html); } });
});
// for contact clicked
$("#contact").click(function(){
document.getElementById("dataGrid").innerHTML = "";
$.ajax({ url: "contact.html", cache: false, success: function(html){ $("#dataGrid").append(html); } });
});
// for home clicked
$("#home").click(function(){
document.getElementById("dataGrid").innerHTML = "";
$.ajax({ url: "home.html", cache: false, success: function(html){ $("#dataGrid").append(html); } });
});
});
$(document).ready(function(){ this is predefined function of jquery, called when page is loaded. This means that when the body is loaded what function should javascript perform. It is similar to onload=”” function used in body <body onload="" > The next step is to call the external file when the page is loaded
$.ajax({
url: "home.html",
cache: false,
success: function(html){
$("#dataGrid").append(html);
}
});
In this function we are calling "home.html" to load in div tag we had defined in index.html file. In jquery id is defined with the #.
From above all the code it is clear that when the when the index.html page is loaded home.html should be called.
Now lets move to the next step of calling pages after clicking the navigation links.
$("#products").click(function(){
document.getElementById("dataGrid").innerHTML = "";
$.ajax({ url: "products.html", cache: false, success: function(html){ $("#dataGrid").append(html); } });
});
In above code $("#products").click(function(){ function is used for clicking events.
So when id = "products" is clicked some thing should happen. It is similar to onclick="" We use in html tags. So when clicking product link, product id calls above jquery function and the code inside that function is executed.
The first line of the inner code is document.getElementById("dataGrid").innerHTML = "";
This line is use to clear the previous data hold by the div "dataGrid" and the other lines as you know that it loads data of called file in div tag "dataGrid"
That's all, I think you are clear about the ajax and jquery also.
You can download samples files from here (ajax-website-sample.rar).
| © copyrights sudarshansoft 2009 |