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.dt d">
<html>
<head>
<title>Whitewat er Runs</title>
<style type="text/css">
table {table-collapse:collap se; 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:"elem1Va lue", elem2:"elem2Val ue",
elem3:"elem3Val ue"};
// (etc)
jsData[0] =
{
RiverName : "Androscogg in",
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 : "Hillsborou gh 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(B ristol 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 : "Piscataquo g",
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.getEle mentById(tbody) ;
// remove existing rows, if any
clearTable(tbod y);
// loop through data source
for (var i = 0; i < jsData.length; i++) {
tr = tbody.insertRow (tbody.rows.len gth);
td = tr.insertCell(t r.cells.length) ;
td.innerHTML = jsData[i].RiverName;
td = tr.insertCell(t r.cells.length) ;
td.setAttribute ("align", "center");
td.innerHTML = jsData[i].Location;
td = tr.insertCell(t r.cells.length) ;
td.setAttribute ("align", "center");
td.innerHTML = jsData[i].FlowType;
td = tr.insertCell(t r.cells.length) ;
td.setAttribute ("align", "center");
td.innerHTML = jsData[i].RunMiles;
td = tr.insertCell(t r.cells.length) ;
td.setAttribute ("align", "center");
td.innerHTML = jsData[i].State;
td = tr.insertCell(t r.cells.length) ;
td.setAttribute ("align", "center");
td.innerHTML = jsData[i].Latitude;
td = tr.insertCell(t r.cells.length) ;
td.setAttribute ("align", "center");
td.innerHTML = jsData[i].Longitude;
}
}
// Remove existing table rows
function clearTable(tbod y) {
while (tbody.rows.len gth > 0) {
tbody.deleteRow (0);
}
}
// Sorting function dispatcher (invoked by table column links)
function sortTable(link) {
switch (link.firstChil d.nodeValue) {
case "RiverName" :
jsData.sort(sor tByRiverName);
break;
case "Location" :
jsData.sort(sor tByLocation);
break;
case "FlowType" :
jsData.sort(sor tByFlowType);
break;
case "RunMiles" :
jsData.sort(sor tByRunMiles);
break;
case "State" :
jsData.sort(sor tByState);
break;
case "Latitude" :
jsData.sort(sor tByLatitude);
break;
case "Longitude" :
jsData.sort(sor tByLongitude);
break;
}
drawTable("wwDa ta")
return false
}
// Sorting functions (invoked by sortTable())
function sortByRiverName (a, b) {
a = a.RiverName.toL owerCase();
b = b.RiverName.toL owerCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByLocation( a, b) {
a = a.Location.toLo werCase();
b = b.Location.toLo werCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByFlowType( a, b) {
a = a.FlowType.toLo werCase();
b = b.FlowType.toLo werCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByRunMiles( a, b) {
return a.RunMiles - b.RunMiles;
}
function sortByState(a, b) {
a = a.State.toLower Case();
b = b.State.toLower Case();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByLatitude( a, b) {
a = a.Latitude.toLo werCase();
b = b.Latitude.toLo werCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByLongitude (a, b) {
a = a.Longitude.toL owerCase();
b = b.Longitude.toL owerCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
</script>
</head>
<body onload="drawTab le('wwData')" bgcolor="white" >
<h2>Whitewate r 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.dt d">
<html>
<head>
<title>Whitewat er Runs</title>
<style type="text/css">
table {table-collapse:collap se; 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:"elem1Va lue", elem2:"elem2Val ue",
elem3:"elem3Val ue"};
// (etc)
jsData[0] =
{
RiverName : "Androscogg in",
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 : "Hillsborou gh 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(B ristol 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 : "Piscataquo g",
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.getEle mentById(tbody) ;
// remove existing rows, if any
clearTable(tbod y);
// loop through data source
for (var i = 0; i < jsData.length; i++) {
tr = tbody.insertRow (tbody.rows.len gth);
td = tr.insertCell(t r.cells.length) ;
td.innerHTML = jsData[i].RiverName;
td = tr.insertCell(t r.cells.length) ;
td.setAttribute ("align", "center");
td.innerHTML = jsData[i].Location;
td = tr.insertCell(t r.cells.length) ;
td.setAttribute ("align", "center");
td.innerHTML = jsData[i].FlowType;
td = tr.insertCell(t r.cells.length) ;
td.setAttribute ("align", "center");
td.innerHTML = jsData[i].RunMiles;
td = tr.insertCell(t r.cells.length) ;
td.setAttribute ("align", "center");
td.innerHTML = jsData[i].State;
td = tr.insertCell(t r.cells.length) ;
td.setAttribute ("align", "center");
td.innerHTML = jsData[i].Latitude;
td = tr.insertCell(t r.cells.length) ;
td.setAttribute ("align", "center");
td.innerHTML = jsData[i].Longitude;
}
}
// Remove existing table rows
function clearTable(tbod y) {
while (tbody.rows.len gth > 0) {
tbody.deleteRow (0);
}
}
// Sorting function dispatcher (invoked by table column links)
function sortTable(link) {
switch (link.firstChil d.nodeValue) {
case "RiverName" :
jsData.sort(sor tByRiverName);
break;
case "Location" :
jsData.sort(sor tByLocation);
break;
case "FlowType" :
jsData.sort(sor tByFlowType);
break;
case "RunMiles" :
jsData.sort(sor tByRunMiles);
break;
case "State" :
jsData.sort(sor tByState);
break;
case "Latitude" :
jsData.sort(sor tByLatitude);
break;
case "Longitude" :
jsData.sort(sor tByLongitude);
break;
}
drawTable("wwDa ta")
return false
}
// Sorting functions (invoked by sortTable())
function sortByRiverName (a, b) {
a = a.RiverName.toL owerCase();
b = b.RiverName.toL owerCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByLocation( a, b) {
a = a.Location.toLo werCase();
b = b.Location.toLo werCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByFlowType( a, b) {
a = a.FlowType.toLo werCase();
b = b.FlowType.toLo werCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByRunMiles( a, b) {
return a.RunMiles - b.RunMiles;
}
function sortByState(a, b) {
a = a.State.toLower Case();
b = b.State.toLower Case();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByLatitude( a, b) {
a = a.Latitude.toLo werCase();
b = b.Latitude.toLo werCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
function sortByLongitude (a, b) {
a = a.Longitude.toL owerCase();
b = b.Longitude.toL owerCase();
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
}
</script>
</head>
<body onload="drawTab le('wwData')" bgcolor="white" >
<h2>Whitewate r 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>
Comment