Loading a page without refreshing can’t get easier than what am about to show you.
I will be using BlueprintCSS to style the pages in this tutorial but you can use your own CSS file or none at all.
To begin create a file called index.html and fill it up with this content
<html> <head> <link rel="stylesheet" href="http://demo.webhole.net/styles/blueprint/screen950.css" media="all" /> <!--[if IE]> <link rel="stylesheet" href="http://demo.webhole.net/styles/blueprint/ie.css" media="all" /> <![endif]--> </head> <body> <div class="container"> <div class="span-5"> <ul> <li><a href="#" id="home" class="nav">Home</a></li> <li><a href="#" id="about" class="nav">About</a></li> <li><a href="#" id="contact" class="nav">Contact Us</a></li> </ul> </div> <div class="span-19 last" id="response"> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="loader.js"></script> </body> </html>
As you can see I load BlueprintCSS and I have a few classes but the only lines you have to have are the script tags, a div with id "response" and the navigation links with their respective id’s.
The first script tag loads JQuery from the google apis, the second script tag loads the script am about to show you, which takes care of loading a certain page when someone clicks one of the links.
Let’s make the loader.js file
As you know from previous posts, this lines of code tell the browser to do what’s inside when the document has finished loading.
$(document).ready(function(){
});
Now let’s add the next line.
We don’t want the page to load and be empty right? so we use this next line to load the "home.html" file as soon as the document has finished loading.
$(document).ready(function(){
// load home page when the page loads
$("#response").load("home.html");
});
JQuery has an AJAX function called "load", this function is appended to a selector where you want a page to be loaded, in this case we want to contents of file "home.html" to load in the tag with id "response".
"load" can take 3 parameters in this order, the page you want to load, data you want to send (POST) and a callback function, we just want to load pages whose content don’t depend on data you send, so we just need the first parameter.( I’ll make another post to show you how to send data to a PHP file with JQuery)
The navigation is going to work this way, I want to trigger the loading of a certain page when a user clicks a certain link, so we are also going to be using JQuery’s "click" event which I covered previously. Let’s take a look at the following block of code.
$("#about").click(function(){
// load about page on click
$("#response").load("about.html");
});
JQuery’s "click" event is appended to the id selectors of every link we have in our index.html page. With the click event we are saying that we want the pages to load in id "response" when the user clicks on one of the links. In this case we are saying that when someone clicks the id "about" we want to load the contents of "about.html" in id "response". Since we have 3 pages, home, about and contact, we are going to need 3 of these blocks. Here is "load.js" with its contents.
$(document).ready(function(){
// load index page when the page loads
$("#response").load("home.html");
$("#home").click(function(){
// load home page on click
$("#response").load("home.html");
});
$("#about").click(function(){
// load about page on click
$("#response").load("about.html");
});
$("#contact").click(function(){
// load contact form onclick
$("#response").load("contact.html");
});
});
You can put whatever you want in each page (about.html, contact.html and home.html) they should be in the same directory.
Note: am specifying a file name for the parameters of each AJAX load but the parameter is actually a file path, so the files you load don’t have to be in the same directory.
Although am applying this tutorial to navigation I wouldn’t recommend that you use it for it, remember that the page you load is hidden from search engines. "What can I use it for then?" you might ask, well I like to use this to load forms and/or other documents that I don’t care if they are indexed or not and to pass data to the server.
Important: When you load a page into another page the page you load will get the styles from the current page, this means that all you need to have in the page you want to load is what goes inside the <body> tags.
That’s it for this tutorial, the demo using this script is at AJAX Page Loading.