table 'information' drop down with AJAX

apexad · 06-28-2006, 08:00 PM

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
????: NamePros.com http://www.namepros.com/webmaster-tutorials/211735-table-information-drop-down-with-ajax.html

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.
????: NamePros.com http://www.namepros.com/showthread.php?t=211735

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)

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)