Simple Ajax Tab Menu

by Noman Muhammad

Ajax tab menu is very useful to show contents without reloading the full page. Last week i create a Ajax based tab menu. Basically i modified my menu by getting help from this link. Here i'll show the steps that i do to create this menu functional.

1. create a simple html file (index.html). Between body tag put these


<ul id="tabmenu">
<li onclick="makeactive(1)"><a class="" id="tab1">First Tab</a></li>
<li onclick="makeactive(2)"><a class="" id="tab2">Second Tab</a></li>
<li onclick="makeactive(3)"><a class="" id="tab3">Third Tab</a></li>
</ul>
<div id="content"></div>

Between head tag put these lines


<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
<script language="JavaScript" type="text/javascript">
function makeactive(tab)
{
 document.getElementById("tab1").className = "";
 document.getElementById("tab2").className = "";
 document.getElementById("tab3").className = "";
 document.getElementById("tab"+tab).className = "active";
 callAjax('content.php?content= '+tab, 'content', 'getting content for tab '+tab+'. Wait...', 'Error');
}
</script>

2. Now create the ajax.js that we add in our head section. These are the content of ajax.js


function callAjax(url, pageElement, callMessage, errorMessage) {
    document.getElementById(pageElement).innerHTML = callMessage;
    try {
    req = new XMLHttpRequest(); /* e.g. Firefox */
    } catch(e) {
      try {
      req = new ActiveXObject("Msxml2.XMLHTTP");  /* some versions IE */
      } catch (e) {
        try {
        req = new ActiveXObject("Microsoft.XMLHTTP");  /* some versions IE */
        } catch (E) {
         req = false;
        }
      }
    }
    req.onreadystatechange = function() {responseAjax(pageElement, errorMessage);};
    req.open("GET",url,true);
    req.send(null);
 }

function responseAjax(pageElement, errorMessage) {
  var output = '';
  if(req.readyState == 4) {
     if(req.status == 200) {
        output = req.responseText;
        document.getElementById(pageElement).innerHTML = output;
        } else {
        document.getElementById(pageElement).innerHTML = errorMessage+"\n"+output;
        }
     }
 }

3. Now we need another php file where output will be processed. Nmae it "content.php" and put these lines in it


<?php
if ($_GET['content'] == 1)
{
 echo 'Content for Page 1';
}
if ($_GET['content'] == 2)
{
 echo 'Content for Page 2';
}
if ($_GET['content'] == 3)
{
 echo 'Content For Page 3';
}
?>

Thats all. Now run the index file and see the tab menu in action.
To get First Tab selected when the page loaded just add this( onload="makeactive(1)") to body tag. So in index.html body tag will look as like as that : <body onload="makeactive(1)">

This entry was posted on Sunday, April 05, 2009 and is filed under Ajax, Tab menu . You can leave a response and follow any responses to this entry through the Subscribe to: Post Comments (Atom) .