Changing Data without Refreshing Page

R

RobG

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;
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>
 
D

Dr John Stockton

JRS: In article <[email protected]>, dated Tue, 18
Oct 2005 22:17:47, seen in Evertjan.
Randy Webb wrote on 19 okt 2005 in comp.lang.javascript:

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.
 
E

Evertjan.

Dr John Stockton wrote on 19 okt 2005 in comp.lang.javascript:
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.
 
D

Dr John Stockton

JRS: In article <[email protected]>
, dated Tue, 18 Oct 2005 19:44:51, seen in
Greg Scharlemann said:
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

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.
 
M

McKirahan

Greg Scharlemann said:
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.
 
G

Greg Scharlemann

McKirahan said:
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.
 
M

McKirahan

Greg Scharlemann said:
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.
 
G

Greg Scharlemann

Rob ...

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

Thanks, greg
 
R

Randy Webb

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

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.
 
G

Greg Scharlemann

Greg said:
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;
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>
 

Ask a Question

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

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

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top