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\"> </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\"> </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> 31  4079 
"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'> </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'> </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.
"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'> </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>
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?
"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.
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\"> </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\"> </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> </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
The line wrapping made my script not work correctly. I modified it and
now it works. Thanks McKirahan.
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
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.
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'> </td>";
what += " <td class='colHead' align='center'>Price</td>";
That's a tedious construction.
what = "<tr>" +
" <td class='colHead' align='center'> </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.
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?
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'> </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?
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
"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]);
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"> </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
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.
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!)
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
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)
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> </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
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> </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
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>.
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)
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.
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
"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.
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.
"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.
Rob ...
What's the easiest way to add an extra column or two to the table that
you built?
Thanks, greg
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
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> </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> This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Ben |
last post by:
Hi,
One ASP.NET transactional page conducts a long transaction in a button
click function.
I want to display the transaction progress info in label control
without refreshing page.
It is...
|
by: shoonya |
last post by:
can i change the url of any page from abc.php?foo=test1 --> abc.php?foo=test2
without refreshing the page?
shoonya
|
by: viral123 |
last post by:
Hi all
I have created one dropdown list box which contains all the employee name. By selecting the name from that list, it returns the details of that particular employee from the database.
It...
|
by: madhu7sudan |
last post by:
hi
In a whole page i have one box and in that box there are many name ( like 1000) and i have display only 10 names and a link button more
if i press on that linkbutton it shold display the...
|
by: cleary1981 |
last post by:
Hi, I am trying to improve the usabilty of an app I have written and it would be great if I could refresh the content of my select boxes without refreshing the whole page.
I am sure this could be...
| | |
by: greggui9029 |
last post by:
Hi,
I have some querytables using OLE DB provider in Excel workbook. Is there any way to connect to the external data programmly without refreshing querytables? i.e. I don't want to refresh Excel...
|
by: manuitpro |
last post by:
Hi All,
I have page with many tabs, in one of the tab i have a form (only a input box) and i want to show some output on the same tab view based on the user input. (bvy using php function)
I...
|
by: athar258 |
last post by:
hi all,
I am developing a web application related to the share market, what i want to accomplish is that i want to present the user share market data that will be updated every 40 seconds. but i...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
| | |
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...
| |
