Dynamically displaying content
There are two options I wish to explore. The first is to build a tabbed pane where each part is loaded separately:
The idea is to load the page content with new content when the different tabs are clicked.
Tabbed Pane
There are two options for implementation. If most the page content is loaded on the tabbed pane then the non-dynamic version should link to separate pages with the same content. If it is a small area then all the content can be loaded initially and using css can be put into panes.
To fill the page content with the AJAX request I am using innerHTML. This is not fully DOM compliant but it does work with all browsers. For the example I am storing the page content in php variables in a separate file called pagecontent.php. The information is more likely to be held in a database in a real life situation.
First I have put the functionality of the init into a separate js file. This is loaded and the code checks for createListeners function before calling it avoiding errors.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My AJAX Enabled Page</title>
<script type="text/javascript" src="AJAXClass2.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="loaditnit.js"></script>
<link rel="stylesheet" type="text/css" href="example.css" />
</head>
There is also a style sheet to display the content in a useful format.
The body of the document carries php code to display the correct page if JavaScript is not enabled. The links send a get value to the page and the php displays the appropriate content.
<body>
<div id="contentFrame">
<div id="accessOptions">
<ul id="accessMenu">
<li><a href="#content">Skip Navigation</a></li>
<li><a href="accessibilityOptions.php">Accessibility Options</a></li>
</ul>
</div>
<div id="header">
<h1>My AJAX website</h1>
</div>
<div id="menu">
<ul>
<li><a href="AJAX4.php" >Display the time 1</a></li>
<li><a href="AJAX5.php">Display the time 2</a></li>
<li><a href="subForm.php">Submitting a form</a></li>
<li><a href="DynamicContent.php">Dynamically Display Content</a></li>
<li><a href="dropdown.php">Populating drop down boxes</a></li>
</ul>
</div>
<div id="content">
<h1>Dynamically Display Content</h1>
<p>When AJAX is used the background will be yellow. This works with or
without javascript. The information is loaded faster through AJAX
as less information has to be loaded.</p>
<div id="pagelist">
<ul>
<?php
include("pagecontent.php");
$p=1;
if(isset($_GET['p'])){
$p=$_GET['p'];
}
?>
<li<?php if($p==1){echo' id="sel"';} ?>><a href="?p=1" id="page1">
page 1</a></li>
<li<?php if($p==2){echo' id="sel"';} ?>><a href="?p=2" id="page2">
page 2</a></li>
<li<?php if($p==3){echo' id="sel"';} ?>><a href="?p=3" id="page3">
page 3</a></li>
</ul>
</div>
<div id="page">
<?php
switch($p){
case 1:
echo $page1;
break;
case 2:
echo $page2;
break;
case 3:
echo $page3;
break;
}
?>
</div>
</div>
</div>
</body>
Finally add in the AJAX functionality by creating the file getContent.php which returns the content requested by the AJAX call.
<?php
include("pagecontent.php");
$p=1;
if(isset($_GET['p'])){
$p=$_GET['p'];
}
switch($p){
case 1:
echo $page1;
break;
case 2:
echo $page2;
break;
case 3:
echo $page3;
break;
}
?$gt;
Then the AJAX functionality is to be initialised by creating listeners and adding the make call method to the header of our dynamic content page.
<script type="text/javascript">
function createListeners(){
var objAnchor1 = document.getElementById('page1');
if (objAnchor1){
objAnchor1.onclick = function(event){return makeCall(1);};
objAnchor1.onkeypress = function(event){return makeCall(1);};
}
var objAnchor2 = document.getElementById('page2');
if (objAnchor2){
objAnchor2.onclick = function(event){return makeCall(2);};
objAnchor2.onkeypress = function(event){return makeCall(2);};
}
var objAnchor3 = document.getElementById('page3');
if (objAnchor3){
objAnchor3.onclick = function(event){return makeCall(3);};
objAnchor3.onkeypress = function(event){return makeCall(3);};
}
}
function removeListeners(){
var objAnchor1 = document.getElementById('page1');
if (objAnchor1){
objAnchor1.onclick = function(event){return true;};
objAnchor1.onkeypress = function(event){return true;};
}
var objAnchor2 = document.getElementById('page2');
if (objAnchor2){
objAnchor2.onclick = function(event){return true;};
objAnchor2.onkeypress = function(event){return true;};
}
var objAnchor3 = document.getElementById('page3');
if (objAnchor3){
objAnchor3.onclick = function(event){return true;};
objAnchor3.onkeypress = function(event){return true;};
}
}
function makeCall(page){
var myAJAX= new AJAXClient();
myAJAX.isAsync=true;
myAJAX.callback= function(result){
document.getElementById('page').innerHTML=myAJAX.xmlhttp.responseText;
document.getElementById('page').style.backgroundColor='yellow';
for (i=1; i<=3; i++){
if(page==i){
document.getElementById('page'+i).style.backgroundColor='#ffffff;';
}else{
document.getElementById('page'+ i).style.backgroundColor='#99ffff;';
}
}
}
myAJAX.makeRequest('getContent.php?p='+page, null);
return false;
}
</script>
The make call function also sets the background colour of the tabs through changing the style attribute.
See Example (opens in new window)
Previous: Submitting a form
References
Webcredible. (2008). AJAX accessibility for websites. Retrieved 2008, march 12 from webcredible.com: http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/ajax-accessibility.shtml
Elated Communications Ltd. (2002). Tutorial: JavaScript and cookies. Retrieved January 18, 2008, from elated.com: http://www.elated.com/articles/javascript-and-cookies/
Lemon, G., Faulkner, S. (2006, May 25) Making Ajax Work with Screen Readers. Retrieved March 31, 2008, from http://juicystudio.com/article/making-ajax-work-with-screen-readers.php
Lemon, G., Faulkner, S. (2007, January 19) Improving Ajax applications for JAWS users. Retrieved March 31, 2008, from http://juicystudio.com/article/improving-ajax-applications-for-jaws-users.php
Eichorn, J. (2006). Understanding AJAX. Upper Saddle River, NJ: Pearson Education, Inc.
Zakas, N. C. (2005). Proffessional JavaScript for web developers. Indianapolis: Wiley Publishing Inc.