D
David Cook
The html file below gets intermittent errors 'error on page' ('number
expected')
when clicking on column-headings to sort. Yet, this same file works
flawlessly
in other browsers (i.e. Opera, Mozilla, Netscape, etc.).
Can anyone suggest a fix/workaround?
Cheers...
Dave
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Whitewater Runs</title>
<style type="text/css">
table {table-collapse:collapse; border-spacing:0;}
td {border:2px groove black; padding:7px;
background-color:lightgrey;}
th {border:2px groove black; padding:7px;
background-color:lightblue;}
.ctr {text-align:center;}
</style>
<script type="text/javascript">
// Table data -- an array of objects
var jsData = new Array();
// jsData[0] = {elem1:"elem1Value", elem2:"elem2Value",
elem3:"elem3Value"};
// (etc)
jsData[0] =
{
RiverName : "Androscoggin",
Location : "Errol Bridge to Pontook Rapid",
FlowType : "Dam",
RunMiles : 20.0,
State : "NH",
Latitude : "N44/46.8'",
Longitude : "W71/07.8'"
};
jsData[1] =
{
RiverName : "Blue Hill Falls",
Location : "Blue Hill Falls",
FlowType : "Tide",
RunMiles : 0.0,
State : "ME",
Latitude : "N44/23.6'",
Longitude : "W68/59.3'"
};
jsData[2] =
{
RiverName : "Cohasset",
Location : "Cohasset",
FlowType : "Tide",
RunMiles : 0.0,
State : "MA",
Latitude : "N42/14.5'",
Longitude : "W70/48.7'"
};
jsData[3] =
{
RiverName : "Contoocook",
Location : "Hillsborough to Henniker",
FlowType : "Rain",
RunMiles : 2.2,
State : "NH",
Latitude : "N43/08.6'",
Longitude : "W71/52.2'"
};
jsData[4] =
{
RiverName : "Dead(at low water levels)",
Location : "Spencer Stream to the Forks",
FlowType : "Dam",
RunMiles : 20,
State : "ME",
Latitude : "N45/18.0'",
Longitude : "W70/13.0'"
};
jsData[5] =
{
RiverName : "Dead(at high water levels)",
Location : "Spencer Stream to the Forks",
FlowType : "Dam",
RunMiles : 20,
State : "ME",
Latitude : "N45/18.0'",
Longitude : "W70/13.0'"
};
jsData[6] =
{
RiverName : "Deerfield (FifeBrook)",
Location : "Fife Brook Dam to Zoar Gap",
FlowType : "Dam",
RunMiles : 4.8,
State : "MA",
Latitude : "N42/41.2'",
Longitude : "W73/06.8'"
};
jsData[7] =
{
RiverName : "Deerfield (MonroeBrDryway)",
Location : "Monroe Bridge to Dunbar Brook",
FlowType : "Dam",
RunMiles : 3.0,
State : "MA",
Latitude : "N42/42.0'",
Longitude : "W73/07.0'"
};
jsData[8] =
{
RiverName : "Jenness Beach",
Location : "Jenness Beach (Rye)",
FlowType : "Surf",
RunMiles : 0.0,
State : "NH",
Latitude : "N42/59.0'",
Longitude : "W70/45.8'"
};
jsData[9] =
{
RiverName : "Kennebec",
Location : "Harris Station Dam to the Forks",
FlowType : "Dam",
RunMiles : 11.0,
State : "ME",
Latitude : "N45/27.5'",
Longitude : "W69/51.7'"
};
jsData[10] =
{
RiverName : "Magalloway",
Location : "Aziscohos Hydro to Wilson Mills",
FlowType : "Dam",
RunMiles : 1.75,
State : "ME",
Latitude : "N44/55.8'",
Longitude : "W70/59.0'"
};
jsData[11] =
{
RiverName : "Merrimack",
Location : "Arms Park (Manchester)",
FlowType : "Dam",
RunMiles : 0.5,
State : "NH",
Latitude : "N43/00.0'",
Longitude : "W71/26.7'"
};
jsData[12] =
{
RiverName : "Merrimack",
Location : "Heritage Trail(Bedford)",
FlowType : "Dam",
RunMiles : 0.6,
State : "NH",
Latitude : "N42/59.9'",
Longitude : "W71/26.7'"
};
jsData[13] =
{
RiverName : "Ogunquit Beach",
Location : "Ogunquit Beach",
FlowType : "Surf",
RunMiles : 0.0,
State : "ME",
Latitude : "N43/16.0'",
Longitude : "W70/35.3'"
};
jsData[14] =
{
RiverName : "Pemigewasset(Bristol Gorge)",
Location : "Ayers Island Dam to Coolidge Woods Rd",
FlowType : "Dam",
RunMiles : 1.0,
State : "NH",
Latitude : "N43/35.8'",
Longitude : "W71/43.1'"
};
jsData[15] =
{
RiverName : "Piscataquog",
Location : "Goffstown to Pinardville",
FlowType : "Dam",
RunMiles : 2.0,
State : "NH",
Latitude : "N43/01.0'",
Longitude : "W71/34.1'"
};
jsData[16] =
{
RiverName : "Quaboag",
Location : "Warren to Route 67",
FlowType : "Rain",
RunMiles : 5.5,
State : "MA",
Latitude : "N42/12.7'",
Longitude : "W72/14.0'"
};
jsData[17] =
{
RiverName : "Rapid",
Location : "Middle Dam to Cedar Stump",
FlowType : "Dam",
RunMiles : 4.5,
State : "ME",
Latitude : "N44/46.0'",
Longitude : "W70/57.0'"
};
jsData[18] =
{
RiverName : "Sheepscot Reversing Falls",
Location : "5 miles northeast of Wiscasset",
FlowType : "Tide",
RunMiles : 0.0,
State : "ME",
Latitude : "N44/03.0'",
Longitude : "W69/37.0'"
};
jsData[19] =
{
RiverName : "Souhegan",
Location : "Greenville to Wilton",
FlowType : "Rain",
RunMiles : 3.5,
State : "NH",
Latitude : "N42/47.2'",
Longitude : "W71/48.2'"
};
jsData[20] =
{
RiverName : "Millers (Upper)",
Location : "South Royalston to Athol",
FlowType : "Rain",
RunMiles : 7.0,
State : "MA",
Latitude : "N42/37.8'",
Longitude : "W72/08.9'"
};
jsData[21] =
{
RiverName : "West (upper)",
Location : "Ball Mtn Dam to Jamaica St Park",
FlowType : "Dam",
RunMiles : 2.5,
State : "VT",
Latitude : "N43/07.6'",
Longitude : "W72/46.3'"
};
jsData[22] =
{
RiverName : "West (lower)",
Location : "Jamaica St Park to Townshend Res",
FlowType : "Dam",
RunMiles : 5.5,
State : "VT",
Latitude : "N43/06.3'",
Longitude : "W72/46.4'"
};
jsData[23] =
{
RiverName : "White",
Location : "N.Royalton to S.Royalton",
FlowType : "Rain",
RunMiles : 7.5,
State : "VT",
Latitude : "N43/49.3'",
Longitude : "W72/32.6'"
};
jsData[24] =
{
RiverName : "Winnipesaukee",
Location : "Franklin",
FlowType : "Dam",
RunMiles : 1.0,
State : "NH",
Latitude : "N43/26.6'",
Longitude : "W71/37.3'"
};
// Draw table from 'jsData' array of objects
function drawTable(tbody) {
var tr, td;
tbody = document.getElementById(tbody);
// remove existing rows, if any
clearTable(tbody);
// loop through data source
for (var i = 0; i < jsData.length; i++) {
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData.RiverName;
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsData.Location;
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsData.FlowType;
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsData.RunMiles;
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsData.State;
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsData.Latitude;
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsData.Longitude;
}
}
// Remove existing table rows
function clearTable(tbody) {
while (tbody.rows.length > 0) {
tbody.deleteRow(0);
}
}
// Sorting function dispatcher (invoked by table column links)
function sortTable(link) {
switch (link.firstChild.nodeValue) {
case "RiverName" :
jsData.sort(sortByRiverName);
break;
case "Location" :
jsData.sort(sortByLocation);
break;
case "FlowType" :
jsData.sort(sortByFlowType);
break;
case "RunMiles" :
jsData.sort(sortByRunMiles);
break;
case "State" :
jsData.sort(sortByState);
break;
case "Latitude" :
jsData.sort(sortByLatitude);
break;
case "Longitude" :
jsData.sort(sortByLongitude);
break;
}
drawTable("wwData")
return false
}
// Sorting functions (invoked by sortTable())
function sortByRiverName(a, b) {
a = a.RiverName.toLowerCase();
b = b.RiverName.toLowerCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByLocation(a, b) {
a = a.Location.toLowerCase();
b = b.Location.toLowerCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByFlowType(a, b) {
a = a.FlowType.toLowerCase();
b = b.FlowType.toLowerCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByRunMiles(a, b) {
return a.RunMiles - b.RunMiles;
}
function sortByState(a, b) {
a = a.State.toLowerCase();
b = b.State.toLowerCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByLatitude(a, b) {
a = a.Latitude.toLowerCase();
b = b.Latitude.toLowerCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByLongitude(a, b) {
a = a.Longitude.toLowerCase();
b = b.Longitude.toLowerCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
</script>
</head>
<body onload="drawTable('wwData')" bgcolor="white">
<h2>Whitewater that I've run by kayak:</h2>
<h4>(Note that client can now click on each column-heading to sort
the data.)</h4>
<h4>(Re-sorting happens on the client side...no further server hits
are required!)</h4>
<hr />
<table id="myTable">
<thead>
<tr>
<th><a href="#" title="Sort by RiverName"
onclick="return sortTable(this)">RiverName</a></th>
<th><a href="#" title="Sort by Location"
onclick="return sortTable(this)">Location</a></th>
<th><a href="#" title="Sort by FlowType"
onclick="return sortTable(this)">FlowType</a></th>
<th><a href="#" title="Sort by RunMiles"
onclick="return sortTable(this)">RunMiles</a></th>
<th><a href="#" title="Sort by State"
onclick="return sortTable(this)">State</a></th>
<th><a href="#" title="Sort by Latitude"
onclick="return sortTable(this)">Latitude</a></th>
<th><a href="#" title="Sort by Longitude"
onclick="return sortTable(this)">Longitude</a></th>
</tr>
</thead>
<tbody id="wwData"></tbody>
</table>
</body>
</html>
expected')
when clicking on column-headings to sort. Yet, this same file works
flawlessly
in other browsers (i.e. Opera, Mozilla, Netscape, etc.).
Can anyone suggest a fix/workaround?
Cheers...
Dave
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Whitewater Runs</title>
<style type="text/css">
table {table-collapse:collapse; border-spacing:0;}
td {border:2px groove black; padding:7px;
background-color:lightgrey;}
th {border:2px groove black; padding:7px;
background-color:lightblue;}
.ctr {text-align:center;}
</style>
<script type="text/javascript">
// Table data -- an array of objects
var jsData = new Array();
// jsData[0] = {elem1:"elem1Value", elem2:"elem2Value",
elem3:"elem3Value"};
// (etc)
jsData[0] =
{
RiverName : "Androscoggin",
Location : "Errol Bridge to Pontook Rapid",
FlowType : "Dam",
RunMiles : 20.0,
State : "NH",
Latitude : "N44/46.8'",
Longitude : "W71/07.8'"
};
jsData[1] =
{
RiverName : "Blue Hill Falls",
Location : "Blue Hill Falls",
FlowType : "Tide",
RunMiles : 0.0,
State : "ME",
Latitude : "N44/23.6'",
Longitude : "W68/59.3'"
};
jsData[2] =
{
RiverName : "Cohasset",
Location : "Cohasset",
FlowType : "Tide",
RunMiles : 0.0,
State : "MA",
Latitude : "N42/14.5'",
Longitude : "W70/48.7'"
};
jsData[3] =
{
RiverName : "Contoocook",
Location : "Hillsborough to Henniker",
FlowType : "Rain",
RunMiles : 2.2,
State : "NH",
Latitude : "N43/08.6'",
Longitude : "W71/52.2'"
};
jsData[4] =
{
RiverName : "Dead(at low water levels)",
Location : "Spencer Stream to the Forks",
FlowType : "Dam",
RunMiles : 20,
State : "ME",
Latitude : "N45/18.0'",
Longitude : "W70/13.0'"
};
jsData[5] =
{
RiverName : "Dead(at high water levels)",
Location : "Spencer Stream to the Forks",
FlowType : "Dam",
RunMiles : 20,
State : "ME",
Latitude : "N45/18.0'",
Longitude : "W70/13.0'"
};
jsData[6] =
{
RiverName : "Deerfield (FifeBrook)",
Location : "Fife Brook Dam to Zoar Gap",
FlowType : "Dam",
RunMiles : 4.8,
State : "MA",
Latitude : "N42/41.2'",
Longitude : "W73/06.8'"
};
jsData[7] =
{
RiverName : "Deerfield (MonroeBrDryway)",
Location : "Monroe Bridge to Dunbar Brook",
FlowType : "Dam",
RunMiles : 3.0,
State : "MA",
Latitude : "N42/42.0'",
Longitude : "W73/07.0'"
};
jsData[8] =
{
RiverName : "Jenness Beach",
Location : "Jenness Beach (Rye)",
FlowType : "Surf",
RunMiles : 0.0,
State : "NH",
Latitude : "N42/59.0'",
Longitude : "W70/45.8'"
};
jsData[9] =
{
RiverName : "Kennebec",
Location : "Harris Station Dam to the Forks",
FlowType : "Dam",
RunMiles : 11.0,
State : "ME",
Latitude : "N45/27.5'",
Longitude : "W69/51.7'"
};
jsData[10] =
{
RiverName : "Magalloway",
Location : "Aziscohos Hydro to Wilson Mills",
FlowType : "Dam",
RunMiles : 1.75,
State : "ME",
Latitude : "N44/55.8'",
Longitude : "W70/59.0'"
};
jsData[11] =
{
RiverName : "Merrimack",
Location : "Arms Park (Manchester)",
FlowType : "Dam",
RunMiles : 0.5,
State : "NH",
Latitude : "N43/00.0'",
Longitude : "W71/26.7'"
};
jsData[12] =
{
RiverName : "Merrimack",
Location : "Heritage Trail(Bedford)",
FlowType : "Dam",
RunMiles : 0.6,
State : "NH",
Latitude : "N42/59.9'",
Longitude : "W71/26.7'"
};
jsData[13] =
{
RiverName : "Ogunquit Beach",
Location : "Ogunquit Beach",
FlowType : "Surf",
RunMiles : 0.0,
State : "ME",
Latitude : "N43/16.0'",
Longitude : "W70/35.3'"
};
jsData[14] =
{
RiverName : "Pemigewasset(Bristol Gorge)",
Location : "Ayers Island Dam to Coolidge Woods Rd",
FlowType : "Dam",
RunMiles : 1.0,
State : "NH",
Latitude : "N43/35.8'",
Longitude : "W71/43.1'"
};
jsData[15] =
{
RiverName : "Piscataquog",
Location : "Goffstown to Pinardville",
FlowType : "Dam",
RunMiles : 2.0,
State : "NH",
Latitude : "N43/01.0'",
Longitude : "W71/34.1'"
};
jsData[16] =
{
RiverName : "Quaboag",
Location : "Warren to Route 67",
FlowType : "Rain",
RunMiles : 5.5,
State : "MA",
Latitude : "N42/12.7'",
Longitude : "W72/14.0'"
};
jsData[17] =
{
RiverName : "Rapid",
Location : "Middle Dam to Cedar Stump",
FlowType : "Dam",
RunMiles : 4.5,
State : "ME",
Latitude : "N44/46.0'",
Longitude : "W70/57.0'"
};
jsData[18] =
{
RiverName : "Sheepscot Reversing Falls",
Location : "5 miles northeast of Wiscasset",
FlowType : "Tide",
RunMiles : 0.0,
State : "ME",
Latitude : "N44/03.0'",
Longitude : "W69/37.0'"
};
jsData[19] =
{
RiverName : "Souhegan",
Location : "Greenville to Wilton",
FlowType : "Rain",
RunMiles : 3.5,
State : "NH",
Latitude : "N42/47.2'",
Longitude : "W71/48.2'"
};
jsData[20] =
{
RiverName : "Millers (Upper)",
Location : "South Royalston to Athol",
FlowType : "Rain",
RunMiles : 7.0,
State : "MA",
Latitude : "N42/37.8'",
Longitude : "W72/08.9'"
};
jsData[21] =
{
RiverName : "West (upper)",
Location : "Ball Mtn Dam to Jamaica St Park",
FlowType : "Dam",
RunMiles : 2.5,
State : "VT",
Latitude : "N43/07.6'",
Longitude : "W72/46.3'"
};
jsData[22] =
{
RiverName : "West (lower)",
Location : "Jamaica St Park to Townshend Res",
FlowType : "Dam",
RunMiles : 5.5,
State : "VT",
Latitude : "N43/06.3'",
Longitude : "W72/46.4'"
};
jsData[23] =
{
RiverName : "White",
Location : "N.Royalton to S.Royalton",
FlowType : "Rain",
RunMiles : 7.5,
State : "VT",
Latitude : "N43/49.3'",
Longitude : "W72/32.6'"
};
jsData[24] =
{
RiverName : "Winnipesaukee",
Location : "Franklin",
FlowType : "Dam",
RunMiles : 1.0,
State : "NH",
Latitude : "N43/26.6'",
Longitude : "W71/37.3'"
};
// Draw table from 'jsData' array of objects
function drawTable(tbody) {
var tr, td;
tbody = document.getElementById(tbody);
// remove existing rows, if any
clearTable(tbody);
// loop through data source
for (var i = 0; i < jsData.length; i++) {
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData.RiverName;
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsData.Location;
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsData.FlowType;
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsData.RunMiles;
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsData.State;
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsData.Latitude;
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsData.Longitude;
}
}
// Remove existing table rows
function clearTable(tbody) {
while (tbody.rows.length > 0) {
tbody.deleteRow(0);
}
}
// Sorting function dispatcher (invoked by table column links)
function sortTable(link) {
switch (link.firstChild.nodeValue) {
case "RiverName" :
jsData.sort(sortByRiverName);
break;
case "Location" :
jsData.sort(sortByLocation);
break;
case "FlowType" :
jsData.sort(sortByFlowType);
break;
case "RunMiles" :
jsData.sort(sortByRunMiles);
break;
case "State" :
jsData.sort(sortByState);
break;
case "Latitude" :
jsData.sort(sortByLatitude);
break;
case "Longitude" :
jsData.sort(sortByLongitude);
break;
}
drawTable("wwData")
return false
}
// Sorting functions (invoked by sortTable())
function sortByRiverName(a, b) {
a = a.RiverName.toLowerCase();
b = b.RiverName.toLowerCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByLocation(a, b) {
a = a.Location.toLowerCase();
b = b.Location.toLowerCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByFlowType(a, b) {
a = a.FlowType.toLowerCase();
b = b.FlowType.toLowerCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByRunMiles(a, b) {
return a.RunMiles - b.RunMiles;
}
function sortByState(a, b) {
a = a.State.toLowerCase();
b = b.State.toLowerCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByLatitude(a, b) {
a = a.Latitude.toLowerCase();
b = b.Latitude.toLowerCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByLongitude(a, b) {
a = a.Longitude.toLowerCase();
b = b.Longitude.toLowerCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
</script>
</head>
<body onload="drawTable('wwData')" bgcolor="white">
<h2>Whitewater that I've run by kayak:</h2>
<h4>(Note that client can now click on each column-heading to sort
the data.)</h4>
<h4>(Re-sorting happens on the client side...no further server hits
are required!)</h4>
<hr />
<table id="myTable">
<thead>
<tr>
<th><a href="#" title="Sort by RiverName"
onclick="return sortTable(this)">RiverName</a></th>
<th><a href="#" title="Sort by Location"
onclick="return sortTable(this)">Location</a></th>
<th><a href="#" title="Sort by FlowType"
onclick="return sortTable(this)">FlowType</a></th>
<th><a href="#" title="Sort by RunMiles"
onclick="return sortTable(this)">RunMiles</a></th>
<th><a href="#" title="Sort by State"
onclick="return sortTable(this)">State</a></th>
<th><a href="#" title="Sort by Latitude"
onclick="return sortTable(this)">Latitude</a></th>
<th><a href="#" title="Sort by Longitude"
onclick="return sortTable(this)">Longitude</a></th>
</tr>
</thead>
<tbody id="wwData"></tbody>
</table>
</body>
</html>