AJAX tabs are simply navigation tabs that perform an AJAX request to fetch some external content to be injected into the current page. Generally this kind of tabs are used to create a really effective pagination effect. You click on a tab, an AJAX request runs with some parameters and you get some new content for your pages. This feature is made up of two components: JavaScript and a server-side script that processes your AJAX request and returns your content depending on the parameters you passed along your request. In this example we're going to use PHP as our server-side script, but feel free to use whatever server-side language you like. On the client side, instead, we'll use the AJAX features of jQuery. Let's see how.
Understanding URL parameters
Since we want to fetch something from the web server, we'll run an AJAX GET request. To allow our PHP script to deliver the correct contents for each request, we need to pass a parameter along with our GET request. This parameter will be attached to the URL set on each link contained within a tab:
p=number
where number is a progressive integer number that tells PHP what section to deliver (page one, page two and so on). The complete URL will not be visible in the browser due to the fact that our request is asynchronous, but it looks like this:
script.php?p=number
So if you pass the number 1, page number 1 will be fetched and so on.
The server-side script
The PHP server-side script is as follows:
header('Content-Type: text/html');
$page = $_GET['p'];
if(!preg_match('/\d{1}/', $page)) {
echo 'Error: invalid parameter';
exit();
}
$page1 = 'Content 1 here';
$page2 = 'Content 2 here';
$page3 = 'Content 3 here';
switch($page) {
case '1':
echo $page1;
break;
case '2':
echo $page2;
break;
case '3':
echo $page3;
break;
default:
break;
}
First, a simple check on the GET parameter p to make sure that is a single digit. Then all the three pages are assembled as strings. Note that the content type delivered is text/html. Finally, a switch block to return the proper content depending on the numeric value of the GET parameter.
Using jQuery
Finally, jQuery. We're going to use the $.ajax() wrapper to run our requests. Each request will be attached to the links contained in our tabs.
$(document).ready(function() {
$('#tabs a').eq(0).click(function(e) {
$.ajax({
type: 'GET',
url: 'script.php',
data: 'p=1',
success: function(html) {
$('#content').empty();
$('#content').html(html);
}
});
e.preventDefault();
});
$('#tabs a').eq(1).click(function(e) {
$.ajax({
type: 'GET',
url: 'script.php',
data: 'p=2',
success: function(html) {
$('#content').empty();
$('#content').html(html);
}
});
e.preventDefault();
});
$('#tabs a').eq(2).click(function(e) {
$.ajax({
type: 'GET',
url: 'script.php',
data: 'p=3',
success: function(html) {
$('#content').empty();
$('#content').html(html);
}
});
e.preventDefault();
});
});
Our request is a GET request, so we set this parameter in the type property. Then we need to set the URL that points to our server-side script using the url property. URL parameters, instead, are passed through the data property. Finally, we use the callback success method to insert our contents into the page. First, however, we need to remove any previous content from the target element, if any. You can see the demo below.