This coding goes to your <head></head> tags
====================================
<script type=”text/javascript”>
var request;
var dest;
function processStateChange(){
if (request.readyState == 4){
contentDiv = document.getElementById(dest);
if (request.status == 200){
response = request.responseText;
contentDiv.innerHTML = response;
} else {
contentDiv.innerHTML = “Error: Status “+request.status;
}
}
}
function loadHTML(URL, destination){
dest = destination;
if (window.XMLHttpRequest){
request = new XMLHttpRequest();
request.onreadystatechange = processStateChange;
request.open(”GET”, URL, true);
request.send(null);
} else if (window.ActiveXObject) {
request = new ActiveXObject(”Microsoft.XMLHTTP”);
if (request) {
request.onreadystatechange = processStateChange;
request.open(”GET”, URL, true);
request.send();
}
}
}
=============================
Using links to call javasripts functions
<div id=”menu”>
<table width=”240px”>
<tr><th> Product & Services</th></tr>
<tr class=”rowA”><td> <span onclick=”loadHTML(’../products/product_ajax.php?product_id=0′,’display’)”>IT/IS Consultation Service</span></td></tr>
<tr class=”rowA”><td> <span onclick=”loadHTML(’../products/product_ajax.php?product_id=1′,’display’)”>Network Analysis and Assessment</span></td></ctr>
<tr class=”rowA”><td> <span onclick=”loadHTML(’../products/product_ajax.php?product_id=2′,’display’)”>Business Desktop Support</span></td></tr>
<tr class=”rowA”><td> <span onclick=”loadHTML(’../products/product_ajax.php?product_id=3′,’display’)”>Business Data Backup</span></td></tr>
<tr class=”rowA”><td> <span onclick=”loadHTML(’../products/product_ajax.php?product_id=4′,’display’)”>Business Dedicate Server</span></td></tr>
<tr class=”rowA”><td> <span onclick=”loadHTML(’../products/product_ajax.php?product_id=5′,’display’)”>Database Outsourcing</span></td></tr>
<tr class=”rowA”><td> <span onclick=”loadHTML(’../products/product_ajax.php?product_id=6′,’display’)”>Software Engineering and Outsourcing</span></td></tr>
<tr class=”rowA”><td> <span onclick=”loadHTML(’../products/product_ajax.php?product_id=7′,’display’)”>Computer Hardware Outsourcing</span></td></tr>
<tr class=”rowA”><td> <span onclick=”loadHTML(’../products/product_ajax.php?product_id=8′,’display’)”>Business IT/IS Total Outsourcing</span></td></tr>
<tr class=”rowA”><td> <span onclick=”loadHTML(’../products/product_ajax.php?product_id=9′,’display’)”>Emergency IT/IS Service</span></td></tr>
<tr class=”rowA”><td> <span onclick=”loadHTML(’../products/product_ajax.php?product_id=10′,’display’)”>Temporary Link</span></td></tr>
</table>
<br />
<br />
<br />
</div>
==========================
And then all of them come to the AJAX server-side function
<?php
switch($_GET['product_id']){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
case 8:
case 9:
case 10:
require(’product-’.$_GET['product_id'].’.php’);
break;
default:
print(”No such category<br>”);
}
?>
===================
This is only the most basic functionality of a PHP AJAX MENU, use it at your own risk.
Tags: ajax, AJAX MENU, CMS, icn technologies, ICNT, icntechnologies, php
