By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,068 Members | 1,734 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,068 IT Pros & Developers. It's quick & easy.

Changing Data without Refreshing Page

P: n/a
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>

Oct 16 '05 #1
Share this Question
Share on Google+
31 Replies


P: n/a
"Greg Scharlemann" <gr**************@gmail.com> wrote in message
news:11**********************@z14g2000cwz.googlegr oups.com...
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.

Oct 16 '05 #2

P: n/a
"McKirahan" <Ne**@McKirahan.com> wrote in message
news:l5********************@comcast.com...
"Greg Scharlemann" <gr**************@gmail.com> wrote in message
news:11**********************@z14g2000cwz.googlegr oups.com...


[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[i];
}
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>
Oct 16 '05 #3

P: n/a
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?

Oct 16 '05 #4

P: n/a
"Greg Scharlemann" <gr**************@gmail.com> wrote in message
news:11**********************@g43g2000cwa.googlegr oups.com...
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.
Oct 17 '05 #5

P: n/a
Greg Scharlemann wrote:
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>
--
Rob
Oct 17 '05 #6

P: n/a
The line wrapping made my script not work correctly. I modified it and
now it works. Thanks McKirahan.

Oct 17 '05 #7

P: n/a
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

Oct 17 '05 #8

P: n/a
JRS: In article <11**********************@z14g2000cwz.googlegroups .com>
, dated Sun, 16 Oct 2005 11:21:44, seen in news:comp.lang.javascript,
Greg Scharlemann <gr**************@gmail.com> posted :
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.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Oct 17 '05 #9

P: n/a
JRS: In article <l5********************@comcast.com>, dated Sun, 16 Oct
2005 16:33:33, seen in news:comp.lang.javascript, McKirahan
<Ne**@McKirahan.com> posted :
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.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Oct 17 '05 #10

P: n/a
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?

Oct 17 '05 #11

P: n/a
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[i];
}
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?

Oct 17 '05 #12

P: n/a
Greg Scharlemann wrote:
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>
--
Rob
Oct 18 '05 #13

P: n/a
"Greg Scharlemann" <gr**************@gmail.com> wrote in message
news:11**********************@g47g2000cwa.googlegr oups.com...
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]);
Oct 18 '05 #14

P: n/a
Greg Scharlemann wrote:
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[i];
}
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 -

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?


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[i] + '</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>

--
Rob
Oct 18 '05 #15

P: n/a
JRS: In article <11**********************@g47g2000cwa.googlegroups .com>
, dated Mon, 17 Oct 2005 14:29:21, seen in news:comp.lang.javascript,
Greg Scharlemann <gr**************@gmail.com> posted :

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?


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[i] 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>.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Oct 18 '05 #16

P: n/a
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.
PointedEars
___________
[1] There have been error messages reported saying *only*
"An error occured." (Yes, really? Tell me something I don't know!)
Oct 18 '05 #17

P: n/a
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.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Oct 18 '05 #18

P: n/a
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.
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Oct 18 '05 #19

P: n/a
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

RobG wrote:
...
<!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>
--
Rob


Oct 19 '05 #20

P: n/a
Greg Scharlemann wrote:

Please don't top post. 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.
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)
The arrays are easier to work with than your carrot-delimited array. You
can also declare it this way:

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

As server-generated code, it should be no more difficult than your
original. 200 rows of the above is about 10kB, smaller than a small GIF.

I find it much simpler to read and play with than:

var dataArray = [
"531245129,9003^31,720531246^130,9003^31,800"
+ "^531246150,1003^21,910",
"513195124,5004^31,528"
];
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'"
The easiest way is to get IE to support 'hover' on elements other than A
and to use that. Ha ha...

An alternative is to put mouseover/out events on the tbody and handle
them - mouseover/outs from the TRs will bubble up:

<script type="text/javascript">

function doEvent(e)
{
var e = e || window.event;
var tgt = e.target || e.srcElement;
tgt = getRow(tgt);
if('mouseover' == e.type){
tgt.className = 'rowOn';
} else if ('mouseout' == e.type){
tgt.className = 'rowOff';
}
}

function getRow(el)
{
while (el.parentNode
&& 'tr' != el.nodeName.toLowerCase()
&& 'tbody' != el.nodeName.toLowerCase()){
el = el.parentNode;
}
return ('tr' == el.nodeName.toLowerCase())? el : false;
}
</script>
Inside the table:

<tbody id="catDetails" onmouseover="doEvent(event);"
onmouseout="doEvent(event);">

Thanks for all the help...Greg


Anyhow, here's a version that should fit the bill:

<!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 0 0 5px;}
..clickable
{cursor: pointer; color: #2222ff;text-decoration: underline;}
#scriptLinks li
{display: inline;list-style-type: none;padding: 0 0 0 5px;}
..rowOn
{background-color: #e5e5e5;}
..rowOff
{background-color: #ffffff;}
</style>
<script type="text/javascript">

var details = [
['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'],
['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']
];

/*
* id is the id of the table body holding the rows
* dObj is the data array
* direction is:
* smaller than -1 for 'go to start',
* -1 for 'back one set'
* 1 for 'forward one set'
* bigger than 1 for 'go to end'
*/
function updateTable(id, dObj, direction)
{
if (!document.getElementById) return;
var tBod = document.getElementById(id);
var tRow, tRows = tBod.rows;
var rCount = tRows.length;

// Get the index of the first element to display
// using the id of the first row
var idx = tRows[0].id.split('-')[1];
if ( direction < -1 ) {
idx = 0;
} else if (direction > 1) {
idx = (dObj.length - rCount) || 0;
} else {
idx -= -rCount*direction;
}

// If there aren't any array values at that index,
// we've run out of data
if(!dObj[idx]) {
if (direction > 0) return false;
idx = 0;
}

// Update the row id with the new start index
tRows[0].id = tRows[0].id.split('-')[0] + '-' + idx;

// Update each cell in each row with data
var cell, c, i, j, k, x;

for (i=0; i<rCount; ++i){
tRow = tRows[i];
c=0;
for (j=0, k=tRow.childNodes.length; j<k; j++){
cell = tRow.childNodes[j];
if ('td' == cell.nodeName.toLowerCase()){
x = (dObj[idx]);
cell.innerHTML = (!x)? '-' : (0==c)? updateURL(x[c]) : x[c];
++c;
}
}
idx++;
}
return false;
}

function updateURL(x)
{
return '<a class="inlineActionLink" href="detailinfo.php?MlsNum='
+ x + '&nomap=true" title="Unable to locate on map">'
+ 'Details</a>';
}
function doEvent(e)
{
var e = e || window.event;
var tgt = e.target || e.srcElement;
tgt = getRow(tgt);
if('mouseover' == e.type){
tgt.className = 'rowOn';
} else if ('mouseout' == e.type){
tgt.className = 'rowOff';
}
}

function getRow(el)
{
while (el.parentNode
&& 'tr' != el.nodeName.toLowerCase()
&& 'tbody' != el.nodeName.toLowerCase()){
el = el.parentNode;
}
return ('tr' == el.nodeName.toLowerCase())? el : false;
}

</script>

</head>
<body>

<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" onmouseover="doEvent(event);"
onmouseout="doEvent(event);">
<tr id="row-0">
<td><a class="inlineActionLink"
href="detailinfo.php?MlsNum=531245&nomap=true"
title="Unable to locate on map">Details</a></td>
<td>129,900</td><td>3</td><td>3</td><td>1,720</td>
</tr><tr>
<td><a class="inlineActionLink"
href="detailinfo.php?MlsNum=531246&nomap=true"
title="Unable to locate on map">Details</a></td>
<td>130,900</td><td>3</td><td>3</td><td>1,800</td>
</tr><tr>
<td><a class="inlineActionLink"
href="detailinfo.php?MlsNum=531246&nomap=true"
title="Unable to locate on map">Details</a></td>
<td>150,100</td><td>3</td><td>2</td><td>1,910</td>
</tr>
</tbody>
</table>
<ul id="scriptLinks">
<li><a href="page0.html" onclick="
return updateTable('catDetails',details,-2);
">First</a>
<li><a href="page0.html" onclick="
return updateTable('catDetails',details,-1);
">Previous</a>
<li><a href="page1.html" onclick="
return updateTable('catDetails',details,1);
">Next</a>
<li><a href="page3.html" onclick="
return updateTable('catDetails',details,2);
">Last</a>
</ul>

</body>
</html>

--
Rob
Oct 19 '05 #21

P: n/a
JRS: In article <Xn*******************@194.109.133.242>, dated Tue, 18
Oct 2005 22:17:47, seen in news:comp.lang.javascript, Evertjan.
<ex**************@interxnl.net> posted :
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.


Using any "false word", such as Micro$oft or Microsloth or Winders,
complicates searching with automated tools. It is childish, being
intended to simulate cleverness.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
The Big-8 newsgroup management is attempting to legitimise its questionable
practices while retaining its elitist hegemony. Read <URL:news:news.groups>.
Oct 19 '05 #22

P: n/a
Dr John Stockton wrote on 19 okt 2005 in comp.lang.javascript:
JRS: In article <Xn*******************@194.109.133.242>, dated Tue, 18
Oct 2005 22:17:47, seen in news:comp.lang.javascript, 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.


Using any "false word", such as Micro$oft or Microsloth or Winders,


I did not know them all, nice collection.
In Dutch "foutlook" is often used, exagerating mistakes made by Outlook.
complicates searching with automated tools. It is childish, being
intended to simulate cleverness.


Ah, John so you agree, it does more than "not anything other than" make you
look bad, if only the complicating of searching by automated tools.
Further, "M$" seems to make people mad [some other effect again], and I
agree that MS does more than just collecting money.

But saying that an utterance that one does not like,
only makes the utterer look bad, is incorrect.
It disregards the implyed effect needlesly
and if you want to address that effect
there are better ways than denial.
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Oct 19 '05 #23

P: n/a
JRS: In article <11**********************@g43g2000cwa.googlegroups .com>
, dated Tue, 18 Oct 2005 19:44:51, seen in news:comp.lang.javascript,
Greg Scharlemann <gr**************@gmail.com> posted :
Lines: 128
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

RobG wrote:
...


If you do not want to be kill-filed by a number of the regular experts,
you should comply with standard Usenet posting convention.

In particular, this includes not quoting more than needs to be quoted,
and putting responses after what they refer to.

For more, see the newsgroup FAQ; for a full treatment, follow Sig line 2
and look round there.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME
Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
Web <URL:http://www.merlyn.demon.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.
Oct 19 '05 #24

P: n/a
Just a quick note out to the folks who helped me change the data on my
webpage without refreshing... I appreciate all of the input.

You can see the work implemented at: http://www.perfectlocale.com

Greg

Oct 23 '05 #25

P: n/a
"Greg Scharlemann" <gr**************@gmail.com> wrote in message
news:11*********************@g14g2000cwa.googlegro ups.com...
Just a quick note out to the folks who helped me change the data on my
webpage without refreshing... I appreciate all of the input.

You can see the work implemented at: http://www.perfectlocale.com

Greg


"Sorry, your browser is not
compatible with our maps."

You might have an intro page that would let visitors
now what you've got; as it is, it's downright unfriendly.

Oct 23 '05 #26

P: n/a
McKirahan wrote:
You might have an intro page that would let visitors
now what you've got; as it is, it's downright unfriendly.


What browser are you using?

I might redirect to a different page if the browser doesn't support
Google Maps... Thanks for the idea.

Oct 24 '05 #27

P: n/a
"Greg Scharlemann" <gr**************@gmail.com> wrote in message
news:11*********************@g43g2000cwa.googlegro ups.com...
McKirahan wrote:
You might have an intro page that would let visitors
now what you've got; as it is, it's downright unfriendly.


What browser are you using?

I might redirect to a different page if the browser doesn't support
Google Maps... Thanks for the idea.


Under IE5.5 I get that message.

Under NS6.2 w/JavaScript disabled I get no map and it doesn't
fit on the page; (1024x768). It stops at "La" in the word "Last".

Under FF1.0.7 it's fine; but:

1) Clicking "Find a home in NoDa" (what's NoDa?") shows a map
with pins in Charlotte but no listings.

2) The text boxes are too small to fully see amounts over 999999.


Oct 24 '05 #28

P: n/a
Rob ...

What's the easiest way to add an extra column or two to the table that
you built?

Thanks, greg

Oct 25 '05 #29

P: n/a

Gregory,

it's Marcel. I was looking for some code for the database project I
have a work and I ran into your posting. How are you doing man? :)
--
Code_Hungry
------------------------------------------------------------------------
Code_Hungry's Profile: http://www.highdots.com/forums/m1234
View this thread: http://www.highdots.com/forums/t3031925

Oct 28 '05 #30

P: n/a
Code_Hungry said the following on 10/27/2005 7:13 PM:
Gregory,

it's Marcel. I was looking for some code for the database project I
have a work and I ran into your posting. How are you doing man? :)

Code_Hungry
------------------------------------------------------------------------
Code_Hungry's Profile: http://www.highdots.com/forums/m1234
View this thread: http://www.highdots.com/forums/t3031925


Is there anything in that site (I didn't see any at a quick glance) to
inform it's unknowing user's that they are *not* posting to a private
forum but they are posting to Usenet? comp.lang.javascript in particular?

And no, I don't need to go to highdots to view this thread, I can see it
just fine in my news reader.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Oct 28 '05 #31

P: n/a

Greg Scharlemann wrote:
What's the easiest way to add an extra column or two to the table that
you built?


I think I did it:

<!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: center;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 0 0 5px;}
..clickable
{cursor: pointer; color: #2222ff;text-decoration: underline;}
#scriptLinks li
{display: inline;list-style-type: none;padding: 0 0 0 5px;}
..rowOn
{background-color: #e5e5e5;}
..rowOff
{background-color: #ffffff;}
</style>
<script type="text/javascript">
var details = [
['1','531245','129,900','3','3','1,720','<img src="image.jpg">'],
['2','531247','130,900','3','3','1,800','<img src="image.jpg">'],
['3','531248','150,100','3','2','1,910','<img src="image.jpg">'],
['4','531249','124,500','4','3','1,528','<img src="image.jpg">'],
['5','531250','129,900','3','3','1,720','<img src="image.jpg">'],
['6','531251','130,900','3','3','1,800','<img src="image.jpg">'],
['7','531252','150,100','3','2','1,910','<img src="image.jpg">'],
['8','531153','124,500','4','3','1,528','<img src="image.jpg">']
];
/*
* id is the id of the table body holding the rows
* dObj is the data array
* direction is:
* smaller than -1 for 'go to start',
* -1 for 'back one set'
* 1 for 'forward one set'
* bigger than 1 for 'go to end'
*/
function updateTable(id, dObj, direction)
{
if (!document.getElementById) return;
var tBod = document.getElementById(id);
var tRow, tRows = tBod.rows;
var rCount = tRows.length;
// Get the index of the first element to display
// using the id of the first row
var idx = tRows[0].id.split('-')[1];
if ( direction < -1 ) {
idx = 0;
} else if (direction > 1) {
idx = (dObj.length - rCount) || 0;
} else {
idx -= -rCount*direction;
}
// If there aren't any array values at that index,
// we've run out of data
if(!dObj[idx]) {
if (direction > 0) return false;
idx = 0;
}
// Update the row id with the new start index
tRows[0].id = tRows[0].id.split('-')[0] + '-' + idx;
// Update each cell in each row with data
// I added cell d thinking that would handle adding
// the number in the first column, but the details link remained
var cell, c, d, i, j, k, x;
for (i=0; i<rCount; ++i){
tRow = tRows[i];
d=0;
for (j=0, k=tRow.childNodes.length; j<k; j++){
cell = tRow.childNodes[j];
if ('td' == cell.nodeName.toLowerCase()){
x = (dObj[idx]);
cell.innerHTML = (!x)? '-' : (1==d)? updateURL(x[d]) : x[d];
++d;
}
}
idx++;
}
return false;

}
function updateURL(x)
{
return '<a class="inlineActionLink" href="detailinfo.php?MlsNum='
+ x + '&nomap=true" title="Unable to locate on map">'
+ 'Details</a>';
}
function doEvent(e)
{
var e = e || window.event;
var tgt = e.target || e.srcElement;
tgt = getRow(tgt);
if('mouseover' == e.type){
tgt.className = 'rowOn';
} else if ('mouseout' == e.type){
tgt.className = 'rowOff';
}
}

function getRow(el)
{
while (el.parentNode
&& 'tr' != el.nodeName.toLowerCase()
&& 'tbody' != el.nodeName.toLowerCase()){
el = el.parentNode;
}
return ('tr' == el.nodeName.toLowerCase())? el : false;
}
</script>
</head>
<body>
<table id="catalogue">
<tbody id="catHead">
<tr>
<th>number</th>
<th>&nbsp;</th>
<th>Price</th><th>Beds</th><th>Baths</th><th>Size<br>(sq. ft)</th>
<th>image</th>
</tr>
</tbody>
<tbody id="catDetails" onmouseover="doEvent(event);"
onmouseout="doEvent(event);">
<tr id="row-0">
<td>1</td>
<td><a class="inlineActionLink"
href="detailinfo.php?MlsNum=531245&nomap=true"
title="Unable to locate on map">Details</a></td>
<td>129,900</td><td>3</td><td>3</td><td>1,720</td>
<td><img src="image.jpg"></td>
</tr><tr>
<td>2</td>
<td><a class="inlineActionLink"
href="detailinfo.php?MlsNum=531246&nomap=true"
title="Unable to locate on map">Details</a></td>
<td>130,900</td><td>3</td><td>3</td><td>1,800</td>
<td><img src="image.jpg"></td>
</tr><tr>
<td>3</td>
<td><a class="inlineActionLink"
href="detailinfo.php?MlsNum=531246&nomap=true"
title="Unable to locate on map">Details</a></td>
<td>150,100</td><td>3</td><td>2</td><td>1,910</td>
<td><img src="image.jpg"></td>
</tr>
</tbody>
</table>
<ul id="scriptLinks">
<li><a href="page0.html" onclick="
return updateTable('catDetails',details,-2);
">First</a>
<li><a href="page0.html" onclick="
return updateTable('catDetails',details,-1);
">Previous</a>
<li><a href="page1.html" onclick="
return updateTable('catDetails',details,1);
">Next</a>
<li><a href="page3.html" onclick="
return updateTable('catDetails',details,2);
">Last</a>
</ul>
</body>
</html>

Oct 28 '05 #32

This discussion thread is closed

Replies have been disabled for this discussion.