Ajax Workshop 2: Building Tabbed Content

This workshop we will be building a tabbed content browser that’s Ajax powered. When ever a user clicks a tab the Ajax will communicate with the server and send back the appropriate data for that tab. We will start this workshop off with the XHTML and CSS for the tabbed content browser. We will need 3 main IDs (one for the container, one for the content area and one for the loading status) and 1 class (for the tabs).

#container {
	width:500px;
}
.tabs {
	width:50px;
	margin-right:10px;
	padding:4px;
	text-align:center;
	float:left;
	cursor:pointer;
	border:1px solid #ccc;
	border-bottom:0;
}
#content {
	height:250px;
	clear:both;
	border:1px solid #ccc;
}
#load {
	position:absolute;
	left:0;
	top:0;
	width:100px;
	height:20px;
	background-color:red;
	color:white;
	display:none;
}

The first ID #container will hold the tabs as well as the content area, we only give this a width which everything inside can inherit. The following class .tabs is going to style our tabs, most of the styling we have is mostly for looks an important property is the float:left. The float:left makes the tabs so they are on the same horizontally aligned, this can also be done with using display:inline but with a little more tweaking. We also gave it a property of cursor:pointer so when the user mousses over the tab that it has the look and feel of a button. Finally we have the ID #content. We set a height for the content area which can be changed depending on how much content you want and we set the clear property to clear:both. This is because about this div we have all of tabs floated left this makes the content div break to a new line directly beneath. The loading style is used for when the Ajax is communicating with the server we set the display to display:none so it only shows while the page is loading. We also gave all the tabs IDs this will be covered further down the workshop.

Here is the XHTML needed for the styles above:

<div id="load">Loading...</div>
<div id="container">
	<div class="tabs" id="tab1">Tab 1</div>
	<div class="tabs" id="tab2">Tab 2</div>
	<div class="tabs" id="tab3">Tab 3</div>
	<div class="tabs" id="tab4">Tab 4</div>
	<div id="content"></div>
</div>

This is pretty self explanatory; we are creating the container div with all of the tab divs and the content div. We are also applying the correct ID or class to the appropriate div. We should have something that looks like the following:

Step 1

Now that the XHTML and CSS is out of the way time for the JavaScript/Ajax. We will be using the Prototype.js Framework again in this tutorial which can be downloaded http://prototype.conio.net/.

function init () {
	var tabs = document.getElementsByClassName('tabs');
	for (var i = 0; i < tabs.length; i++) {
		$(tabs[i].id).onclick = function () {
			getTabData(this.id);
	}
}
}
function getTabData(id) {
	var url = 'process.php';
	var rand = Math.random(9999);
	var pars = 'id=' + id + '&rand=' + rand;
	var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
}
function showLoad () {
	$('load').style.display = 'block';
}
function showResponse (originalRequest) {
	var newData = originalRequest.responseText;
	$('load').style.display = 'none';
	$('content').innerHTML = newData;
}

The first function init() (which we will be attached to the body onload) we are setting up the onclick events for the tabs. First we are getting all of the tabs as objects by using Prototype’s getElemenetsByClassName function. This returns an array of all elements with the class name provided as a parameter. Next we need to loop through that array and and add an onclick function. We are setting up the tabs so that when they are clicked we trigger getTabData and pass it the tab ID so that the server side can figure out which data to pass back to the content area. The getTabData function is similar to the sendData function of our first workshop. We are setting the URL which is what will determine what data to pass back, we also created a new variable called rand. This variable ensures that the content is never cached on the server side. Next we create our pars variable to tell the Ajax object what parameters we are passing to the server side. Finally we create the Ajax object, set the method to get, pass in the parameters and set our event functions for the object. We cover this in greater detail in the first workshop. The next function showLoad which is called by myAjax while the object is communicating with the server simply changes the CSS style of the load div to block to notify the user that the content is loading. Finally the show response function has a parameter of originalRequest, this is the data that is passed back from the server. In this function we set the style of the load div back to display:none and then populate the content div with the correct data we received from the server. Here is the complete XHTML and CSS:

<!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>Ajax Workshop 2: Building Tabbed Content</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function init () {
var tabs = document.getElementsByClassName('tabs');
	for (var i = 0; i < tabs.length; i++) {
		$(tabs[i].id).onclick = function () {
			getTabData(this.id);
		}
	}
}
function getTabData(id) {
	var url = 'process.php';
	var rand = Math.random(9999);
	var pars = 'id=' + id + '&rand=' + rand;
	var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
}
function showLoad () {
	$('load').style.display = 'block';
}
function showResponse (originalRequest) {
	var newData = originalRequest.responseText;
	$('load').style.display = 'none';
	$('content').innerHTML = newData;
}
</script>
<style type="text/css">
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
#container {
	width:500px;
}
.tabs {
	width:50px;
	margin-right:10px;
	padding:4px;
	text-align:center;
	float:left;
	cursor:pointer;
	border:1px solid #ccc;
	border-bottom:0;
}
#content {
	height:250px;
	clear:both;
	border:1px solid #ccc;
}
#load {
	position:absolute;
	left:0;
	top:0;
	width:100px;
	height:20px;
	background-color:red;
	color:white;
	display:none;
}
</style>
</head>
<body onload="init()">
<div id="load">Loading...</div>
	<div id="container">
	<div class="tabs" id="tab1">Tab 1</div>
	<div class="tabs" id="tab2">Tab 2</div>
	<div class="tabs" id="tab3">Tab 3</div>
	<div class="tabs" id="tab4">Tab 4</div>
	<div id="content"></div>
</div>
</body>
</html>

Finally here is the PHP which is self explanatory for Process.php.

<?php
function stringForJavascript($in_string) {
   $str = ereg_replace("[\r\n]", " \\n\\\n", $in_string);
   $str = ereg_replace('"', '\\"', $str);
   Return $str;
}
switch($_GET['id']) {
	case 'tab1':
		$content = 'This is content for tab 1.';
		break;
	case 'tab2':
		$content = 'This is content for tab 2.';
		break;
	case 'tab3':
		$content = 'This is content for tab 3.';
		break;
	case 'tab4':
		$content = 'This is content for tab 4.';
		break;
	default:
		$content = 'There was an error.';
		break;								
	
} 
print stringForJavascript($content);
usleep(400000);
?>

Alternatively you could check the database for content instead of using a case statement and having the content hard coded.

Here is what it looks like when complete

If you guys have any questions or comments there is a thread in the discussion boards.

Technorati Tags: technorati , technorati , technorati , technorati , technorati , technorati , technorati

About this entry

You’re currently reading “Ajax Workshop 2: Building Tabbed Content,” an entry on Ajax Lessons

calendar
2.18.06 / 3pm
folder
Lessons, Tutorials, Workshops
folder
    Bookmark Ajax Workshop 2: Building Tabbed Content at del.icio.us    Digg Ajax Workshop 2: Building Tabbed Content at Digg.com    Bookmark Ajax Workshop 2: Building Tabbed Content at NewsVine
folder
Digg story
bookRecommended Books
Professional AjaxFoundations of Ajax (Foundation)Ajax in Action