Changing Data without Refreshing Page

G

Greg Scharlemann

Given some recent success on a simple form validation (mainly due to
the kind folks in this forum), I've tried to tackle something a bit
more difficult. I'm pulling data down from a database and populating a
simple table. I'd like the table to contain 10 entries per page and
have the option for the user to scroll through the pages of data
without having to go back to refresh the page (I've already pulled all
the info I need from the database). So, I've taken a stab at it and
this is probably not the best way to do it (so if you have a better
idea I'm open), but I think it will work. Right now I'm encountering
an 'Object Expected' error and I don't know how to interpret what it's
telling me.

Here's an isolated example of the code that I've been playing with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td width="100%" style="padding:2px;">
<div id="panel"></div>
<script type="text/javascript">
//<![CDATA[
var dataArray = new Array();
var panel = document.getElementById('panel');

dataArray[0] = "<tr valign=\"top\" class=\"rowOff\"
onMouseOver=\"this.className='rowOn'\"
onMouseOut=\"this.className='rowOff'\"><td class=\"grid\"
align=\"center\"><a class=\"inlineActionLink\"
href=\"detailinfo.php?MlsNum=531245&nomap=true\" title=\"Unable to
locate on map\">Details</a></td><td class=\"tableContent\"
align=\"right\">129,900</td><td class=\"tableContent\"
align=\"center\">3</td><td class=\"tableContent\"
align=\"center\">3</td><td class=\"tableContent\"
align=\"center\">1,720</td></tr>";
dataArray[1] = "<tr valign=\"top\" class=\"rowOff\"
onMouseOver=\"this.className='rowOn'\"
onMouseOut=\"this.className='rowOff'\"><td class=\"grid\"
align=\"center\"><a class=\"inlineActionLink\"
href=\"detailinfo.php?MlsNum=513195&nomap=true\" title=\"Unable to
locate on map\">Details</a></td><td class=\"tableContent\"
align=\"right\">124,500</td><td class=\"tableContent\"
align=\"center\">4</td><td class=\"tableContent\"
align=\"center\">3</td><td class=\"tableContent\"
align=\"center\">1,528</td></tr>";
panel.innerHTML = "<table border=\"0\" cellpadding=\"2\"
cellspacing=\"1\" width=\"100%\" class=\"tableGridList\"><tr><td
class=\"colHead\" align=\"center\">&nbsp;</td><td class=\"colHead\"
align=\"center\">Price</td><td class=\"colHead\"
align=\"center\">Beds</td><td class=\"colHead\"
align=\"center\">Baths</td><td class=\"colHead\"
align=\"center\">SqFt.</td></tr>";

panel.innerHTML += dataArray[0];
panel.innerHTML +="</table>";
//]]

function changePage(index) {
panel.innerHTML = "<table border=\"0\" cellpadding=\"2\"
cellspacing=\"1\" width=\"100%\" class=\"tableGridList\"><tr><td
class=\"colHead\" align=\"center\">&nbsp;</td><td class=\"colHead\"
align=\"center\">Price</td><td class=\"colHead\"
align=\"center\">Beds</td><td class=\"colHead\"
align=\"center\">Baths</td><td class=\"colHead\"
align=\"center\">SqFt.</td></tr>";
panel.innerHTML += dataArray[index];
panel.innerHTML += "</table">;
}
</script>
</td>
</tr>
<tr>
<td><a href="#" onClick="javascript:changePage(0);">1</a> | <a
href="#" onClick="javascript:changePage(1);">2</a></td>
</tr>
</table>
</body>
</html>
 
M

McKirahan

Greg Scharlemann said:
Given some recent success on a simple form validation (mainly due to
the kind folks in this forum), I've tried to tackle something a bit
more difficult. I'm pulling data down from a database and populating a
simple table. I'd like the table to contain 10 entries per page and
have the option for the user to scroll through the pages of data
without having to go back to refresh the page (I've already pulled all
the info I need from the database). So, I've taken a stab at it and
this is probably not the best way to do it (so if you have a better
idea I'm open), but I think it will work. Right now I'm encountering
an 'Object Expected' error and I don't know how to interpret what it's
telling me.

[snip]

1) You're referenceing "panel" before the page has been loaded.

2) You have a typo on the line; ( "> ahould be >" ):

panel.innerHTML += "</table">;

3) Try this version:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dataArray.htm</title>
<script type="text/javascript">
var panel;
var dataArray = new Array();
dataArray[0] = "<tr valign='top' class='rowOff'
onMouseOver='this.className=\"rowOn\"'
onMouseOut='this.className=\"rowOff\"'>";
dataArray[0] += " <td class='grid' align='center'><a
class='inlineActionLink' href='detailinfo.php?MlsNum=531245&nomap=true'
title='Unable to locate on map'>Details</a></td>";
dataArray[0] += " <td class='tableContent' align='right'>129,900</td>";
dataArray[0] += " <td class='tableContent' align='center'>3</td>";
dataArray[0] += " <td class='tableContent' align='center'>3</td>";
dataArray[0] += " <td class='tableContent' align='center'>1,720</td>";
dataArray[0] += "</tr>";
dataArray[1] = "<tr valign='top' class='rowOff'
onMouseOver='this.className=\"rowOn\"'
onMouseOut='this.className=\"rowOff\"'>";
dataArray[1] += " <td class='grid' align='center'><a
class='inlineActionLink' href='detailinfo.php?MlsNum=513195&nomap=true'
title='Unable to locate on map'>Details</a></td>";
dataArray[1] += " <td class='tableContent' align='right'>124,500</td>";
dataArray[1] += " <td class='tableContent' align='center'>4</td>";
dataArray[1] += " <td class='tableContent' align='center'>3</td>";
dataArray[1] += " <td class='tableContent' align='center'>1,528</td>";
dataArray[1] += "</tr>";
function loadedPage() {
panel = document.getElementById('panel');
var what = "<table border='1' cellpadding='2' cellspacing='1'
width='100%' class='tableGridList'>";
what += "<tr>";
what += " <td class='colHead' align='center'>&nbsp;</td>";
what += " <td class='colHead' align='center'>Price</td>";
what += " <td class='colHead' align='center'>Beds</td>";
what += " <td class='colHead' align='center'>Baths</td>";
what += " <td class='colHead' align='center'>SqFt.</td>";
what += "</tr>";
what += dataArray[0];
what += "</table>";
panel.innerHTML = what;
}
function changePage(index) {
var what = "<table border='1' cellpadding='2' cellspacing='1'
width='100%' class='tableGridList'>";
what += "<tr>";
what += " <td class='colHead' align='center'>&nbsp;</td>";
what += " <td class='colHead' align='center'>Price</td>";
what += " <td class='colHead' align='center'>Beds</td>";
what += " <td class='colHead' align='center'>Baths</td>";
what += " <td class='colHead' align='center'>SqFt.</td>";
what += "</tr>";
what += dataArray[index];
what += "</table>";
panel.innerHTML = what;
}
</script>
</head>
<body onload="loadedPage()">
<table border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td width="100%" style="padding:2px;">
<div id="panel"></div>
</td>
</tr>
<tr>
<td>
<a href="#" onClick="javascript:changePage(0);">1</a> |
<a href="#" onClick="javascript:changePage(1);">2</a>
</td>
</tr>
</table>
</body>
</html>


I'd do one more thing:

Declaring an array that would hold just the values:

var data_Array = ]
"531245^129,900^3^3^1,720",
"513195^124,500^4^3^1,528"
];

Then construct the formatted dataArray() from it.
 
M

McKirahan

[snip]
(so if you have a better idea I'm open)


[snip]

Try this version:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> dataTable.htm</title>
<script type="text/javascript">
var dataArray = [
"531245^129,900^3^3^1,720",
"513195^124,500^4^3^1,528"
];
var dataTable = [
"<table border='1' cellpadding='2' cellspacing='1' width='100%'
class='tableGridList'>",
"<tr>",
" <td class='colHead' align='center'>&nbsp;</td>",
" <td class='colHead' align='center'>Price</td>",
" <td class='colHead' align='center'>Beds</td>",
" <td class='colHead' align='center'>Baths</td>",
" <td class='colHead' align='center'>SqFt.</td>",
"</tr>",
"<tr valign='top' class='rowOff' onMouseOver='this.className=\"rowOn\"'
onMouseOut='this.className=\"rowOff\"'>",
" <td class='grid' align='center'><a class='inlineActionLink'
href='detailinfo.php?MlsNum=#0&nomap=true' title='Unable to locate on
map'>Details</a></td>",
" <td class='tableContent' align='right'>#1</td>",
" <td class='tableContent' align='center'>#2</td>",
" <td class='tableContent' align='center'>#3</td>",
" <td class='tableContent' align='center'>#4</td>",
"</tr>",
"</table>"
];
function changePage(index) {
var dataBuild = "";
for (var i=0; i<dataTable.length; i++) {
dataBuild += dataTable;
}
var dataValue = dataArray[index].split("^");
for (var j=0; j<dataArray[index].length; j++) {
dataBuild = dataBuild.replace("#"+j,dataValue[j]);
}
document.getElementById("panel").innerHTML = dataBuild;
}
</script>
</head>
<body onload="changePage(0)">
<table border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td width="100%" style="padding:2px;">
<div id="panel"></div>
</td>
</tr>
<tr>
<td>
<a href="#" onClick="javascript:changePage(0);">1</a> |
<a href="#" onClick="javascript:changePage(1);">2</a>
</td>
</tr>
</table>
</body>
</html>
 
G

Greg Scharlemann

Internet Explorer is giving me a Object Expected error on line 50:

<body onload="changePage(0)">

What the heck is it looking for when it says Object Expected?
 
M

McKirahan

Greg Scharlemann said:
Internet Explorer is giving me a Object Expected error on line 50:

<body onload="changePage(0)">

What the heck is it looking for when it says Object Expected?

The JavaScript function "changePage()" is an "object";
did you change the spelling?

Did you try my version "as is"?
My line 50 is a "<td>" tag.
If you made any change then post your version.
 
R

RobG

Greg said:
Given some recent success on a simple form validation (mainly due to
the kind folks in this forum), I've tried to tackle something a bit
more difficult. I'm pulling data down from a database and populating a
simple table. I'd like the table to contain 10 entries per page and
have the option for the user to scroll through the pages of data
without having to go back to refresh the page (I've already pulled all
the info I need from the database). So, I've taken a stab at it and
this is probably not the best way to do it (so if you have a better
idea I'm open), but I think it will work. Right now I'm encountering
an 'Object Expected' error and I don't know how to interpret what it's
telling me.

Here's an isolated example of the code that I've been playing with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Why XHTML? Does it provide any useful benefits for your situation? If
not, you are better off to use HTML 4.01.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td width="100%" style="padding:2px;">
<div id="panel"></div>
<script type="text/javascript">
//<![CDATA[
var dataArray = new Array();
var panel = document.getElementById('panel');

This will cause an error (and almost certainly failure of your script).
You are attempting to get a reference to an element that doesn't exist
yet.
dataArray[0] = "<tr valign=\"top\" class=\"rowOff\"
onMouseOver=\"this.className='rowOn'\"
onMouseOut=\"this.className='rowOff'\"><td class=\"grid\"

When posting code, always wrap it manually at about 70 characters to
prevent news readers wrapping it automatically. It nearly always
introduces errors and make helping you a chore.

[...]
panel.innerHTML = "<table border=\"0\" cellpadding=\"2\"
cellspacing=\"1\" width=\"100%\" class=\"tableGridList\"><tr><td
class=\"colHead\" align=\"center\">&nbsp;</td><td class=\"colHead\"
align=\"center\">Price</td><td class=\"colHead\"
align=\"center\">Beds</td><td class=\"colHead\"
align=\"center\">Baths</td><td class=\"colHead\"
align=\"center\">SqFt.</td></tr>";

panel.innerHTML += dataArray[0];
panel.innerHTML +="</table>";

Using innerHTML this way is dangerous. incrementally writing bits of
the table to the document will nearly always fail. If you must use
innerHTML (and I can't think why you'd have to), create the HTML as a
single string then write the entire table at once.

It is much safer to use DOM modifying tables using script.

But why not create the the table in HTML? It seems you'd be better off
if the table was generated at the server. Your links can be to
subsequent pages with more data. If the user has scripting available,
the links can have onclick attributes that update the table without
getting a new page.

Your script is then vastly simpler and users without scripting (or with
a script engine that doesn't like your scrip) still get a page that
works. You will probably also reduce the size of your page.

Below is a sample script, all the detail is generated but it should give
you the idea. For extra data, you can create another script element
that loads new variables and adds to the page. If the amount of data is
less than say 5kB (and that's quite a bit of data), just put it all in
the page to start with.
//]]

function changePage(index) {
panel.innerHTML = "<table border=\"0\" cellpadding=\"2\"
cellspacing=\"1\" width=\"100%\" class=\"tableGridList\"><tr><td
class=\"colHead\" align=\"center\">&nbsp;</td><td class=\"colHead\"
align=\"center\">Price</td><td class=\"colHead\"
align=\"center\">Beds</td><td class=\"colHead\"
align=\"center\">Baths</td><td class=\"colHead\"
align=\"center\">SqFt.</td></tr>";
panel.innerHTML += dataArray[index];
panel.innerHTML += "</table">;
}
</script>
</td>
</tr>
<tr>
<td><a href="#" onClick="javascript:changePage(0);">1</a> | <a

'javascript:' is not needed when using script for intrinsic events and
the link should probably do something useful.

[...]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Table</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
#catalogue {
border-collapse: collapse;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
}
#catalogue td, #catalogue th {
text-align: right;
border-bottom: 1px solid #999999;
border-right: 1px solid #999999;
padding: 2px 5px 2px 5px;
}
#catalogue th {
width: 4em;
text-align: center;
}
#catalogue th:first-child, #catalogue td:first-child {
width: 5em;
text-align: left;
padding: 0 0px 0 5px;
}
..clickable {
cursor: pointer;
color: #2222ff;
text-decoration: underline;
}
#scriptLinks li {
display: inline;
list-style-type: none;
padding: 0 0 0 5px;
}
</style>
<script type="text/javascript">

var details0 = {
data0 : ['typeA','31,528','3','1','24'],
data1 : ['typeB','21,500','2','1','22'],
data2 : ['typeC','11,528','1','0','14']
};

var details1 = {
data0 : ['typeD','301,528','30','10','240'],
data1 : ['typeE','201,500','20','10','220'],
data2 : ['typeF','101,528','10','00','140']
};

function updateTable(id, dObj)
{
var tB = document.getElementById(id);
while (tB.firstChild) tB.removeChild(tB.firstChild);
var d, oR, oT, i=0, j, k;
while( (d = dObj['data' + i++]) ){
oR = document.createElement('tr');
for (j=0, k=d.length; j<k; j++){
oT = document.createElement('td');
oT.appendChild(document.createTextNode(d[j]));
if (!j) {
oT.onclick = showDetails;
oT.className = 'clickable';
}
oR.appendChild(oT);
}
tB.appendChild(oR);
}
}

function showDetails()
{
alert(this.firstChild.data + ': some details');
}

</script>
</head>
<body onload="updateTable('catDetails',details0);">

<table id="catalogue">
<tbody id="catHead">
<tr>
<th>&nbsp;</th>
<th>Price</th>
<th>Beds</th>
<th>Baths</th>
<th>Size<br>(sq. ft)</th>
</tr>
</tbody>
<tbody id="catDetails">
</tbody>
</table>
<ul id="scriptLinks">
<li>Show:
<li><a href="page0.html" onclick="
updateTable('catDetails',details0);
return false;
">Details 0</a>
<li><a href="page1.html" onclick="
updateTable('catDetails',details1);
return false;
">Details 1</a>
</ul>
</body>
</html>
 
G

Greg Scharlemann

The line wrapping made my script not work correctly. I modified it and
now it works. Thanks McKirahan.
 
G

Greg Scharlemann

Rob

I'll give this a shot, you make some interesting points. One site I
did run across doing the same technique that I'm shooting for is
Yahoo's Fantasy Football site. I looked at the source and tried to cut
and paste the stuff I thought I needed but it was way over my head.

Greg
 
D

Dr John Stockton

JRS: In article <[email protected]>
, dated Sun, 16 Oct 2005 11:21:44, seen in
Greg Scharlemann said:
Given some recent success on a simple form validation
... ...

Repeatedly changing the same innerHTML is untidy and might be
inefficient, although AIUI it will not be rendered until the code stops.

The body of an article should stand alone independent of the subject
line : so if the subject line is relevant it should be repeated or
restated in the body of the article.

You should read the newsgroup FAQ. Section 4.15 "How do I modify the
current page in a browser?" answers the subject question.

If you are prepared to assume that your page will only be used by
"DocDom" browsers, DynWrite could be much simplified (and it would be
well if the FAQ were to show that). However, it is still IMHO highly
beneficial to code dynamic writing like DynWrite("aID", Str) ,
however simple DynWrite becomes, for reasons of legibility.
 
D

Dr John Stockton

JRS: In article <[email protected]>, dated Sun, 16 Oct
2005 16:33:33, seen in McKirahan
var what = "<table border='1' cellpadding='2' cellspacing='1'
width='100%' class='tableGridList'>";

Code posted to Usenet should be executable code. Do not let your
posting agent wrap code : THAT IS YOUR JOB.


And try to get your spelling right : there are many here who have put
considerable effort into learning English as a second language, and it
is unhelpful to set a bad example.

what += "<tr>";
what += " <td class='colHead' align='center'>&nbsp;</td>";
what += " <td class='colHead' align='center'>Price</td>";

That's a tedious construction.

what = "<tr>" +
" <td class='colHead' align='center'>&nbsp;</td>" +
" <td class='colHead' align='center'>Price</td>" +

is perfectly satisfactory in all systems AFAIK (it's conceivable that
the array.join method might be faster, but ISTM unlikely to be
significantly so in any real case.
 
G

Greg Scharlemann

One thing I read online is that the support of the tbody tag is not
cross-browser friendly. That worries me... any idea of the browsers
that do not support or render tbody appropriatly?
 
G

Greg Scharlemann

I took what Rob put together and added some more rows to the tables.
One question, if I have a table of 3 rows and only 4 results, can I
shrink the second page (the display with only one row) to display
appropriatly? I get "undefined" results otherwise.

Here's an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> dataTable.htm</title>
<script type="text/javascript">
var dataArray = [
"531245^129,900^3^3^1,720^531246^130,900^3^3^1,800"
+ "^531246^150,100^3^2^1,910",
"513195^124,500^4^3^1,528"
];
var dataTable = [
"<table border='1' cellpadding='2' cellspacing='1' "
+ "width='100%' class='tableGridList'>",
"<tr>",
" <td class='colHead' align='center'>&nbsp;</td>",
" <td class='colHead' align='center'>Price</td>",
" <td class='colHead' align='center'>Beds</td>",
" <td class='colHead' align='center'>Baths</td>",
" <td class='colHead' align='center'>SqFt.</td>",
"</tr>",
"<tr valign='top' class='rowOff' onMouseOver='this.className="
+ "\"rowOn\"' onMouseOut='this.className=\"rowOff\"'>",
" <td class='grid' align='center'><a class='inlineActionLink'"
+ "href='detailinfo.php?MlsNum=#0&nomap=true' "
+ "title='Unable to locate on map'>Details</a></td>",
" <td class='tableContent' align='right'>$#1</td>",
" <td class='tableContent' align='center'>#2</td>",
" <td class='tableContent' align='center'>#3</td>",
" <td class='tableContent' align='center'>#4</td>",
"</tr>",
"<tr valign='top' class='rowOff' onMouseOver='this.className="
+ "\"rowOn\"' onMouseOut='this.className=\"rowOff\"'>",
" <td class='grid' align='center'><a class='inlineActionLink'"
+ "href='detailinfo.php?MlsNum=#5&nomap=true' "
+ "title='Unable to locate on map'>Details</a></td>",
" <td class='tableContent' align='right'>$#6</td>",
" <td class='tableContent' align='center'>#7</td>",
" <td class='tableContent' align='center'>#8</td>",
" <td class='tableContent' align='center'>#9</td>",
"</tr>",
"<tr valign='top' class='rowOff' onMouseOver='this.className="
+ "\"rowOn\"' onMouseOut='this.className=\"rowOff\"'>",
" <td class='grid' align='center'><a class='inlineActionLink'"
+ "href='detailinfo.php?MlsNum=#10&nomap=true' "
+ "title='Unable to locate on map'>Details</a></td>",
" <td class='tableContent' align='right'>$#11</td>",
" <td class='tableContent' align='center'>#12</td>",
" <td class='tableContent' align='center'>#13</td>",
" <td class='tableContent' align='center'>#14</td>",
"</tr>",
"</table>"
];
function changePage(index) {
var dataBuild = "";
for (var i=0; i<dataTable.length; i++) {
dataBuild += dataTable;
}
var dataValue = dataArray[index].split("^");
for (var j=0; j<dataArray[index].length; j++) {
dataBuild = dataBuild.replace("#"+j,dataValue[j]);
}
document.getElementById("panel").innerHTML = dataBuild;


}


</script>
</head>
<body onload="changePage(0)">
<table border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td width="100%" style="padding:2px;">
<div id="panel"></div>
</td>
</tr>
<tr>
<td>
<a href="#" onClick="javascript:changePage(0);">1</a> |
<a href="#" onClick="javascript:changePage(1);">2</a>
</td>
</tr>
</table>
</body>
</html>


Also. Dr. Stockton -
If you are prepared to assume that your page will only be used by
"DocDom" browsers, DynWrite could be much simplified (and it would be
well if the FAQ were to show that). However, it is still IMHO highly
beneficial to code dynamic writing like DynWrite("aID", Str) ,
however simple DynWrite becomes, for reasons of legibility.

I'm not following at all... can you dumb what you're saying down for me?
 
R

RobG

Greg said:
One thing I read online is that the support of the tbody tag is not
cross-browser friendly. That worries me... any idea of the browsers
that do not support or render tbody appropriatly?

It's preferred that you quote what you are replying to. You appear to be
using Google group's web interface. To quote what you are replying to,
don't use the 'reply' link at the bottom of the post. Click the 'show
options' link, then use the 'reply' link at the top of the message.

Support for the tbody tag is a requirement of HTML 4.01 (I'd guess that
it's been around since HTML 1 but I don't care to check). Any browser
that doesn't support is is not worth considering.

I think the issue you are referring to is in regard to the tbody element
and adding table rows in IE using DOM methods.

According to the HTML 4 specification, the tbody *tag* is optional, but
the tbody *element* is not. If the HTML source has a table with no
tbody tags, browsers will insert a tbody element where they feel it is
appropriate - the tbody element will exist whether the tags do or not.

When adding rows to a table using DOM, IE requires that you add the new
row to the tbody element, not the table element. Most other browsers
are happy to add the row to the table. It could well be argued that IE
is more 'correct' here, but the point is moot.

The situation is possibly muddied by the fact that the rows collection
is a property of the table object. It could be argued that the the
table should have a tbodies (tbodys?) collection, and the rows
collection should be a property of a tbody - but I don't like the
chances of that being adopted. :)

There are a number of solutions:

1. Add new rows based on a reference to an existing row, e.g.

existingRow.parentNode.appendChild(newRow);

Here existingRow.parentNode will refer to the (probably not in the
source code) tbody element

2. Use a reference to the tbody to start with.

3. Use the table's insertRow method:

<URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903>
 
M

McKirahan

Greg Scharlemann said:
I took what Rob put together and added some more rows to the tables.
One question, if I have a table of 3 rows and only 4 results, can I
shrink the second page (the display with only one row) to display
appropriatly? I get "undefined" results otherwise.
" <td class='tableContent' align='right'>$#1</td>",
" <td class='tableContent' align='right'>$#11</td>",
" <td class='tableContent' align='center'>#12</td>",
" <td class='tableContent' align='center'>#13</td>",
" <td class='tableContent' align='center'>#14</td>",
dataBuild = dataBuild.replace("#"+j,dataValue[j]);

If you have more than 9 replacements then it's easiest to
use 3 digits; because "#1" is found in "#11".

Thus,
" <td class='tableContent' align='right'>$#1</td>",
should be
" <td class='tableContent' align='right'>$#101</td>",
and change
dataBuild = dataBuild.replace("#"+j,dataValue[j]);
to
dataBuild = dataBuild.replace("#"+(100+j),dataValue[j]);
 
R

RobG

Greg said:
I took what Rob put together and added some more rows to the tables.

Not much of it.
One question, if I have a table of 3 rows and only 4 results, can I
shrink the second page (the display with only one row) to display
appropriatly? I get "undefined" results otherwise.

Here's an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> dataTable.htm</title>
<script type="text/javascript">
var dataArray = [
"531245^129,900^3^3^1,720^531246^130,900^3^3^1,800"
+ "^531246^150,100^3^2^1,910",
"513195^124,500^4^3^1,528"
];

Your data would be much better expressed as an array of arrays:

var dataArray =
[
['531245','129,900','3','3','1,720'],
['531246','130,900','3','3','1,800'],
['531246','150,100','3','2','1,910'],
['513195','124,500','4','3','1,528']
];

Now each value in the array is specified explicitly and you aren't
hoping one of your values contains a '^' character that will mess up
your later use of split().
var dataTable = [
"<table border='1' cellpadding='2' cellspacing='1' "
[...]

The use of an array here does not use any of the benefits of an array,
you may as well just concatenate the string. But why not use a loop to
build the rows based on the data that is needed?
"</tr>",
"</table>"
];
function changePage(index) {
var dataBuild = "";
for (var i=0; i<dataTable.length; i++) {
dataBuild += dataTable;
}


This simply concatenates the array, it can be replaced with:

var dataBuild = dataTable.join('');

var dataValue = dataArray[index].split("^");
for (var j=0; j<dataArray[index].length; j++) {
dataBuild = dataBuild.replace("#"+j,dataValue[j]);
}

Here the weakness of your method is demonstrated. Having constructed a
large string of dummy values, you now have to replace them with the real
ones using a series of regular expressions, the effect of which is to
garble the table content. It may also put something into the string
that is interpreted as HTML - results may be unpredictable.

Insert the correct values as you create the table and ensure that they
can't be misinterpreted as markup. Use a for or while loop to build the
string for each row, then you can write as many/few as you like.

You could also significantly reduce the amount of innerHTML if you make
better use of CSS = you could remove nearly all the class attributes.

document.getElementById("panel").innerHTML = dataBuild;


[...]
Also. Dr. Stockton -




I'm not following at all... can you dumb what you're saying down for me?

Read the FAQ.

Below is a version of your script using innerHTML. I still think it's
better to simply replace the content of the cells rather than writing
the entire table each time, but there you go. You can just add more
rows to the data array and add more 'changePage()' links to extend the
table. Modifying the call will change how many rows are displayed.

A better version would use 'previous' and 'next' links that didn't need
hard-coded values - I'll leave that up to you. I prefer to use double
quotes in HTML and single in script, so I've modified that.

I have not fixed your (numerous) XHTML validation errors.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> dataTable.htm</title>

<script type="text/javascript">

var dataArray =
[
['531245','129,900','3','3','1,720'],
['531246','130,900','3','3','1,800'],
['531246','150,100','3','2','1,910'],
['513195','124,500','4','3','1,528']
];

function buildRow(dArray, idx)
{
var dat = dArray[idx];
var s =
// TR tag
'<tr valign="top" class="rowOff" onMouseOver="'
+ 'this.className=\'rowOn\'" onMouseOut="'
+ 'this.className=\'rowOff\'">'
// 1st td tag
+ '<td class="grid" align="center"><a class="inlineActionLink"'
+ 'href="detailinfo.php?MlsNum='
+ dat[0] + '#0&nomap=true"'
+ 'title="Unable to locate on map">Details</a></td>';
// Next 4 td tags
for (var i=1, num=dat.length; i<num; ++i){
s += '<td class="tableContent" align="right">'
+ dat + '</td>';
}
// close TR tag
s += '</tr>';
return s;
}

function buildTable(startIdx, num)
{
var s =
// Open table tags + add header
'<table border="1" cellpadding="2" cellspacing="1"'
+ 'width="100%" class="tableGridList"><tr>'
+ '<td class="colHead" align="center">&nbsp;</td>'
+ '<td class="colHead" align="center">Price</td>'
+ '<td class="colHead" align="center">Beds</td>'
+ '<td class="colHead" align="center">Baths</td>'
+ '<td class="colHead" align="center">SqFt.</td></tr>'

// Add as many rows as have been asked (if data exists)
for (var i=0; i<num; i++){
if (dataArray[+startIdx + i]) {
s += buildRow(dataArray, +startIdx+i);
}
}

// Close the table
s += '</table>';
return s;
}

// idx is the start index in teh data array
// num is how many rows to show
function changePage(idx, num)
{
var s = buildTable(idx, num);
document.getElementById("panel").innerHTML = s;
}

</script>
</head>

<body onload="changePage(0, 3)">
<table border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td width="100%" style="padding:2px;">
<div id="panel"></div>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="changePage(0,3);">1</a> |
<a href="#" onclick="changePage(3,3);">2</a>
</td>
</tr>
</table>
</body>
</html>
 
D

Dr John Stockton

JRS: In article <[email protected]>
, dated Mon, 17 Oct 2005 14:29:21, seen in
Greg Scharlemann said:
Also. Dr. Stockton -


I'm not following at all... can you dumb what you're saying down for me?

Have you, as advised, read FAQ 4.15 yet?

In the code of your previous article, var dataTable is used only as
input to dataBuild += dataTable and is therefore pointless.

<URL:http://www.merlyn.demon.co.uk/js-other.htm>

Your output table is two-dimensional; therefore, your data array should
be too; or higher for a pile of Tables.

var dataArray = [
[ // Table 0
["531245", "129,900", "3", "3", "1,720"], // Row 0
["531246", "130,900", "3", "3", "1,800"], // Row 1
["531246", "150,100", "3", "2", "1,910"] // Row 2
],
[ // Table 1
["513195", "124,500", "4", "3", "1,528"] // Row 0
]
]

Now in function changePage(index) {
you begin
var TblData = dataArray[index]
var HTML = "<table ...>"
then
for (R=0; T<TblData.length; R++) {
var RowData = TblData[R]
var Ro = "<tr>"
for (C=0; C<RowData.length; C++) {
var ColDatum = RowData[C]
....
Ro += "<td>" + ... + "\/td" }
HTML += Ro + "<\/tr>" }
HTML += "<\/table>"
DynWrite("panel", HTML) }

Rather than those +=, you could first start var HTML = [], J = 0
then each time text is generated HTML[J++] = text
then DynWrite("panel", HTML.join())
which may be more efficient.

You'll need to complicate it a bit for your different types of table
entry.

You won't need all those class parts if you precede the Table with a
style for <td>.
 
T

Thomas 'PointedEars' Lahn

Greg said:
Internet Explorer is giving me a Object Expected error on line 50:

<body onload="changePage(0)">

What the heck is it looking for when it says Object Expected?

You get "Object Expected" errors in IE on several occasions, for example
here since a function cannot be called, i.e. the referred Function object
is was not declared, that is, it is *missing*. IE's error messages are
(like many M$ error msgs) seldom descriptive and thus almost never helpful
to the unexperienced[1]; use Moz/FF/Opera for JS debugging first.


PointedEars
___________
[1] There have been error messages reported saying *only*
"An error occured." (Yes, really? Tell me something I don't know!)
 
E

Evertjan.

Randy Webb wrote on 19 okt 2005 in comp.lang.javascript:
Calling Microsoft "M$" does *not* do anything other than make you look
bad.

Why would that be?
I rather like it,
so you are not speaking for everybody, Randy.
 
R

Randy Webb

Thomas 'PointedEars' Lahn said the following on 10/18/2005 5:35 PM:
Greg Scharlemann wrote:

Internet Explorer is giving me a Object Expected error on line 50:

<body onload="changePage(0)">

What the heck is it looking for when it says Object Expected?


You get "Object Expected" errors in IE on several occasions, for example
here since a function cannot be called, i.e. the referred Function object
is was not declared, that is, it is *missing*. IE's error messages are
(like many M$ error msgs) seldom descriptive and thus almost never helpful
to the unexperienced[1]; use Moz/FF/Opera for JS debugging first.

It seems that your dislike for MS has clouded your view/objectivity of
error messages in other UA's.

The error messages in Firefox are utterly useless to the "inexperienced"
person simply because it is not that easy to find.

Calling Microsoft "M$" does *not* do anything other than make you look bad.
 
G

Greg Scharlemann

I'm starting to lean more towards the tbody example. I don't like the
idea of two or three dimensional arrays (mainly for debugging purposes)
and including all of that html in the javascript function. If I do use
the tbody example that Rob outlined below, is there a way to duplicate
these two javascript statements that I had on each <tr> element?

onMouseOver="this.className='rowOn'"
onMouseOut="this.className='rowOff'"

Thanks for all the help...Greg
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,900
Latest member
Nell636132

Latest Threads

Top