This technique is used on
http://www.isohunt.com and as of today on my own site,
http://www.restaurantselector.net
I am doing it different then isohunt is doing it, but the effect is the same. I will show you how my site does it.
To see this tutorial in action:
http://www.restaurantselector.net/ajaxtut/
First, create a table, with hidden rows under each non-hidden row, and put a <div> inside this row.
I will name non hidden rows 'name#' and hidden rows 'indx#' and the <div> spni#
at the bottom of the table, insert an <iframe> element
EDIT: just for fun, I moved the second id="name#" tag to the first <td> element.
index.html:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>table 'information' drop down with AJAX example</title>
<script src="javascript.js" type="text/javascript"></script>
</head>
<body>
<table class="indexList" cellpadding="3" cellspacing="1" width="100%">
<tr><th>Header1</th><th>Header2</th><th>Header3</th><th>Header4</th></tr>
<tr id="name1" onclick="requestData('1')" onmouseover="rowOver('1')" onmouseout="rowOut('1')"><td>Click</td><td>anywhere</td><td>in this row</td><td>to see the date</td></tr>
<tr style="display:none; background-color:#f2b5bb;" id="indx1"><td colspan="4"><div style="padding:5px; border:3px solid #034b8e; background-color:#ededed; text-align:center;" id="spni1"></div></td></tr>
<tr onclick="requestData('2')" onmouseover="rowOver('2')" onmouseout="rowOut('2')"><td id="name2">Click</td><td>anywhere</td><td>in this row</td><td>to see the day of week</td></tr>
<tr style="display:none; background-color:#f2b5bb;" id="indx2"><td colspan="4"><div style="padding:5px; border:3px solid #034b8e; background-color:#ededed; text-align:center;" id="spni2"></div></td></tr>
<tr id="name3" onclick="requestData('3')" onmouseover="rowOver('3')" onmouseout="rowOut('3')"><td>Click</td><td>anywhere</td><td>in this row</td><td>to see the month</td></tr>
<tr style="display:none; background-color:#f2b5bb;" id="indx3"><td colspan="4"><div style="padding:5px; border:3px solid #034b8e; background-color:#ededed; text-align:center;" id="spni3"></div></td></tr>
</table>
<iframe src="about:blank" name="hiddenFrame" width="0" height="0" frameborder="0"></iframe>
</body>
</html>
next, you need a javascript file that will colorize rows as well as make the request for new data, and finally unhide the hidden row
javascript.js
Code:
// JavaScript Document
function rowOver(i, nColor) {
if (!nColor) nColor = "#f2b5bb";
var nameObj = (document.getElementById) ? document.getElementById('name' + i) : eval("document.all['name" + i + "']");
if (nameObj != null) nameObj.style.background=nColor;
}
function rowOut(i, nColor) {
if (!nColor) nColor = "#ffffff";
var trObj = (document.getElementById) ? document.getElementById('indx' + i) : eval("document.all['indx" + i + "']");
var nameObj = (document.getElementById) ? document.getElementById('name' + i) : eval("document.all['name" + i + "']");
if (trObj == null || trObj.style.display=="none") nameObj.style.background=nColor;
}
function requestData(id) {
var url = "getdata.php?id="+id;
top.frames["hiddenFrame"].location = url;
}
function displayData(sText,id) {
var spanIndexRow = document.getElementById('spni' + id);
var trRow = document.getElementById('indx' + id);
spanIndexRow.innerHTML = sText;
if (trRow.style.display == "none") { trRow.style.display = ""; }
else { spanIndexRow.innerHTML = ""; trRow.style.display = "none"; }
rowOver(id);
}
Lastly, you need a PHP file the gets some data that you want to display. This should be a fully functional page, as all we are doing is getting what is put into the 'divInfoToReturn' <div> tag.
getdata.php:
Code:
<html>
<head>
<title>something</title>
<?php $id = $_GET['id']; ?>
<script type="text/javascript">
window.onload = function () {
var divInfoToReturn = document.getElementById("divInfoToReturn");
parent.displayData(divInfoToReturn.innerHTML,<?php echo "'$id'" ?>);
};
</script>
</head>
<body>
<div id="divInfoToReturn">
<?php
if ($id == '1') { echo date('m/d/y'); }
if ($id == '2') { echo date('l'); }
if ($id == '3') { echo date('F'); }
?>
</div>
</body>
</html>
NOTES:
<iframe> is not supported in XHTML 1.0 Strict. I tried changing this script to use an <object> tag but it did not work, deal with it.
To add some spice, I used style="..." alot. naturally, a CSS file and classes would be used in the real world.
In the real world, this table would be generated with PHP or something else, but you get the idea.
I stole the rowOut and rowOver functions straight from isohunt :)
This might seem fairly complicated for some people. If you have questions about this, just ask! (posting is fine, but a PM would be better)
