One of AJAX’s strengths is that it allows you to save bandwidth for your application by providing data on-demand instead of loading everything in one go. Because of this, some applications like the invisionboard has employed AJAX tabs on its user control panel. But have you ever wondered how to create one yourself? Well this article will show you how its done easily using jQuery.
First of all, the concept of AJAX Tabs is very simple if you would look at it from the ground up. By concept, it is simply multiple AJAX triggers that have the same target container. For this example, we will use a link as the trigger and have a div with an id of tabcontents as the target container.
<a id="tab1" href="#">Tab 1</a><br>
<div id="tabcontent"></div>
First let’s do a sample of a simple AJAX trigger from a link with an id of tab1 loading an HTML page named tab1.html through AJAX. Then the page will be loaded to a div with an id of tabcontent:
$("#tab1").click(function()
{
$.ajax(
{
url: "tab1.html",
cache: false,
success: function(message)
{
$("#tabcontent").empty().append(message);
}
});
});Its quite simple if you would look at it. The important thing is we have to match the trigger to the page we have to load, and into the container in which we must load the page.
If for example, we want to create a tab with 4 tabs / triggers we can simply manage this through repeating the code above several times and just changing the trigger id’s and the page it loads. The target container will still remain the same. However, this will present a problem since the more tabs / triggers we have, the more the clutter, and the more it is harder to manage.
Fortunately, there is a solution to this. By turning the AJAX call into a function and passing the page required to load as a parameter, we can simplify the tab implementation:
function loadTab(pageUrl)
{
$.ajax(
{
url: pageUrl,
cache: false,
success: function(message)
{
$("#tabcontent").empty().append(message);
}
});
}
$(document).ready(function()
{
$("#tab1").click(function()
{
loadTab("tab1.html");
});
$("#tab2").click(function()
{
loadTab("tab2.html");
});
$("#tab3").click(function()
{
loadTab("tab3.html");
});
$("#tab4").click(function()
{
loadTab("tab4.html");
});
});Want to make it even more manageable? Why not use arrays to store the required pages, and pass the array keys instead? And while we’re at it, we can also add a preloader for when the page is still loading. Here is what the final code will look like:
var pageUrl = new Array();
pageUrl[1] = "tab1.html";
pageUrl[2] = "tab2.html";
pageUrl[3] = "tab3.html";
pageUrl[4] = "tab4.html";
function loadTab(id)
{
if (pageUrl[id].length > 0)
{
$("#preloader").show();
$.ajax(
{
url: pageUrl[id],
cache: false,
success: function(message)
{
$("#tabcontent").empty().append(message);
$("#preloader").hide();
}
});
}
}
$(document).ready(function()
{
$("#preloader").hide();
$("#tab1").click(function()
{
loadTab(1);
});
$("#tab2").click(function()
{
loadTab(2);
});
$("#tab3").click(function()
{
loadTab(3);
});
$("#tab4").click(function()
{
loadTab(4);
});
});This is merely a bare bones implementation of the AJAX tabs. From here, you can add additional validations (for example AJAX error messages), and add styles to your links and content. You can also specify dynamic content (like PHP, Python, or ASP scripts) as the target for the script to load.
If you want to see a demo of this script in action, or you want to download the source code, just click on the links below:
jQuery AJAX Tabs Demo
Download jQuery AJAX Tabs Source Code
25 Comments 
