Refreshing DIV contents in Tables :-(

Dgandhi · Dec 6, 2000

I have a "refresh" problem when I use the <DIV> tag in Tables using NS 4.0.Any help would be greatly appreciated.

I put a DIV element in the table as follows:
<td><DIV class=someClass ID="total"></DIV></td>

Then, I attempt to change the value of the table cell as:
document.layers["total"].document.write(result);

The table cell containing the DIV does get updated (by the fact that the background color resizes as per the width of the new total), but the value doesn't show up. However, if I resize the window, the characters show up.I've spent lots of hours trying to work around this one without much luck.Please help!!!

hoolz · Dec 6, 2000

I've learned from experience that class tags doubled with ids dont work well together in netscape. if its possible in your situation, try merging the class and id values into one, which may be some tedious work, and then just use the id tag, which netscape works better with.

hope this helps!

hoolz hurry up and wait!

aim screenname: phentalmyst

Dgandhi · Dec 6, 2000

Unfortunately, merging the class and the id values didn't work either. It has something to do with using the DIV tag within Tables. I can change the DIV contents outside the table, but not within it. Here's a simple example that can be used to reproduce the problem (NS 4.0 specific):

<HTML>
<HEAD>
<TITLE>DIV & Tables...</TITLE>

<STYLE TYPE="text/css">
.tc {position:relative; layer-background-color:yellow;}
</STYLE>

<SCRIPT language="JavaScript">

function setTotal(val) {
document.layers["total"].document.open();
document.layers["total"].document.write(val);
document.layers["total"].document.close();
}

</SCRIPT>

<table border="1" bgcolor="Silver">
<th>Total</th>
<tr>
<td><DIV class="tc" ID="total">???</DIV></td>
</tr>
</table>

<FORM name=form1>
<INPUT type="text" name="txt1">
<INPUT type="button" name="btn1" value="Enter new total and click here" onClick="setTotal(document.form1.txt1.value)">
</FORM>

</BODY>
</HTML>

hoolz · Dec 6, 2000

hm, im honestly having trouble with the code you sent me in regards to it working in IE. im guessing this is just an app that updates the total as you add to it? hurry up and wait!

aim screenname: phentalmyst

Dgandhi · Dec 6, 2000

The example code that I submited earlier is for Netscape ONLY. That simplified example does the following:
1. Let's the user type in a value in the text field.
2. When the button is clicked, it attempts to change the table cell's value to that in the text field (by modifying the contents of the DIV container within that table cell).

I realize it is not obvious, but if you try it out, it may make more sense. A similar code for IE works. You'd have to replace the logic in setTotal() with something like:
document.all["total"].innerHTML = val;

I really appreciate your active participation in this thread. This has been bugging me for quite some time.

GIGN · Dec 6, 2000

What about setting style property of the <td>?

Is there any particular reason why you need a div in there?
It's only so you can change it's value right?

Please understand I do not know how to write to a layer, I have never done that. This is for NN though I guess, is there some equivalent for IE, because I get told that document.all.divName.document is not an object.

tanderso · Dec 6, 2000

Give me more code to work with. Include a snippet of the exact table/div code. What is the value of "result"?
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.

http://www.oac-design.com

Dgandhi · Dec 7, 2000

bangers: Yes, the only reason for the DIV tag is to be able to change the value. Is there any other way to change the value of a table cell? Please (please!) let me know if there is an alternative. Also, even if I use a class on the <td> itself, there is no way for me to access the contents of the <td>. For IE, you'll have to use document.all["total"].innerHTML to access its value (see code snippet below).

Tom: Thanks for the offer. If you could simply cut & paste the code listed above and try it on NS 4.* you'll get the idea. If you also want to run it on IE, please replace the setTotal() function with the following snippet:

function setTotal(val) {
if (document.layers) {
document.layers["total"].document.open();
document.layers["total"].document.write(val);
document.layers["total"].document.close();
} else if (document.all) {
document.all["total"].innerHTML = val;
}
}

When you run it, you'll see a table with a header and 1 cell. You'll also see a text field along with a button. Enter a value in the text field and click the button. The code will attempt to set the value of the table cell. You'll not see the new value although you'll see that the background in the table cell has changed to accomodate the new value. Then simply re-size the window. You'll see that the value appears in the table cell.

hoolz · Dec 7, 2000

well, i wrote a SIMILAR working version for IE, except I replaced the table cell with a text box for it to be updated. this is the closest ive come to a solution so far.

im trying!

<html>

<head>
<title>test</title>
<script language="javascript">

</script>

</head>

<body>

<form name="form1">
<table>
<tr>
<td>Total</td>
</tr>
<tr>
<td><input type="text" size="5" name="total"></td>
</tr>
</table>

<br><br>
<input type="text" value="enter total here" size="20" name="txt" onFocus="this.value=''">
<br><br>
<input type="button" value="Submit" onClick="formUpdate();">

</form>

</body>

</html>
hurry up and wait!

aim screenname: phentalmyst

hoolz · Dec 7, 2000

ok, i think ive got this figured out, but it may take a bit more work for ya if go this way. SPAN tags, and you have to absolute position them.

so instead of:

<table border="1" bgcolor="Silver">
<th>Total</th>
<tr>
<td><DIV class="tc" ID="total">???</DIV></td>
</tr>
</table>

try:

<table border="1" bgcolor="Silver">
<th>Total</th>
<tr>
<td><span id="total" style="position: absolute; left: 400px; top: 50px;">???</span></td>
</tr>
</table>

..and of course...you can adjust the settings as you wish.

hurry up and wait!

aim screenname: phentalmyst

tanderso · Dec 7, 2000

Sorry I didn't post sooner, but I actually remembered this morning that Netscape requires absolute positioning for some reason to write to the layer. So you could do something like this:

Code:

<HTML>
<HEAD>
<TITLE>DIV & Tables...</TITLE>

<STYLE TYPE=&quot;text/css&quot;>
.tc {position:absolute; top:38; left:15; layer-background-color:yellow;}
</STYLE>

<SCRIPT language=&quot;JavaScript&quot;>

function setTotal(val) {
   if (document.layers) {
      document.layers[&quot;total&quot;].document.open();
      document.layers[&quot;total&quot;].document.write(val);
      document.layers[&quot;total&quot;].document.close();
   } else if (document.all) {
      document.all[&quot;total&quot;].innerHTML = val;
   }
}

</SCRIPT>

</HEAD>

<table width=&quot;100&quot; border=&quot;1&quot; bgcolor=&quot;Silver&quot;>
<th>Total</th>
<tr>
   <td width=&quot;100&quot;><DIV class=&quot;tc&quot; ID=&quot;total&quot;>???</DIV>&nbsp;</td>
</tr>
</table>

<FORM name=form1>
<INPUT type=&quot;text&quot; name=&quot;txt1&quot;>
<INPUT type=&quot;button&quot; name=&quot;btn1&quot; value=&quot;Enter new total and click here&quot; onClick=&quot;setTotal(document.form1.txt1.value)&quot;>
</FORM>

</HTML>

Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.

http://www.oac-design.com

Dgandhi · Dec 7, 2000

Many thanks for everybody's active participation. Yes, absolute positioning works, but if I have a table where multiple elements in a column need to be updated, it makes it difficult to position them just right. On the other hand, if I use text fields, they'll work too, but then the user may think s/he can enter values to it as opposed to a display-only data. Is there a way to create "buttons" with no borders?
My problem is this:
* I have a table of about 20-50 rows with several columns.
* One of the columns contains the current value for that data element.
* I need to refresh the current value periodically as it changes. I'm using a hidden JavaApplet to inform me when the value(s) change.
* I was almost close with "relative" positioning of the DIV elements in that it works on IE and "almost" works on NS. Of course, on NS, you have to resize the window to see that the data has changed :-(

I don't know my table size ahead of them (i.e., it is created by a servlet or via JSP Tags, haven't designed that yet). Not only that, I don't know what else is on that page (a banner, some more text, etc.) so I can't do absolute positioning. Looks like I'm out of luck. I DO SINCERELY APPRECIATE ALL THE FEEDBACK AND THE WILLINGNESS TO HELP OUT. Thanks a lot!

tanderso · Dec 7, 2000

No border, readonly textarea:

Code:

<textarea style=&quot;position:absolute; left:0px; top:0px; width:320px; height:120px; background-color:#FFFFFF; border:0; font: bold 8pt/10pt arial,helvetica;&quot; readonly></textarea>

It scrolls, so you can make it an absolute size.
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.

http://www.oac-design.com

iza · Dec 8, 2000

does <textarea ... readonly> works in both browsers ? only the 4+ versions or earlier versions as well ?? (then why do i always use that onfocus=blur() complicated method !!!!)

YogeshPancholi · Dec 8, 2000

dgandhi, I too have had similar frustrations while refreshing DIVs within TDs in NS4. I too have not found a working solution.

In my case, I use JavaScript to do client-side validation on user entries into form fields. Any omitted/erroneous fields have their label text turn red. All the fields and their associated label text are in their own table cell (ie. TD). All worked fine in IE, but NS4 was a different kettle of fish. Like you, I too tried the various permutations to dynamically update the text in NS but none of it worked. Finally, I had to resort to the absolute positioning method. In my case, I know my page and form size so it is somewhat easier for me to give the label text absolute x & y co-ordinates.

I realize this response does not help you in any way, but I guess I'm merely sharing my experiences and frustrations. To further depress you, now that NS6 is out it uses a different DOM. It has abandoned layers, and has adopted something resembling IE's 'ALL' DOM. To detect NS6, you check for document.getElementById. Check out

http://www.webreference.com/js/column72/

for further information on NS6.

Finally, I have trawled through many newsgroups and resource websites, but have not found an elegant way to dynamically update contents within TDs in NS4. If anyone does have an answer I'd appreciate them sharing it with us.

Yogesh Pancholi

"If a pig loses its voice, is it disgruntled?"

Dgandhi · Dec 8, 2000

I tried something that's funky but it partially worked:

I created an absolute <DIV> within a relative <DIV>

.tc {position:relative; layer-background-color:green;}
.tcAbs {position:absolute; layer-background-color:yellow;}
...
<td>
<DIV class="tc" ID="total2">
<DIV class="tcAbs" ID="totalAbs">
????????????
</DIV>
</DIV>
</td>

I'm not reproducing all of the code here, but the code to modify the table cell's value was changed to (on NS):
document.layers["total2"].document.layers["totalAbs"].document.write(val);

It does show the correct values as long as the values occupy less than the initial size of the <DIV> container. At least, that's a good beginning. HOWEVER, if I resize the window, things get messed up! So, the question is, what does resizing the window do? If I resize the window twice, my DIV layers dissappear.

I can post the modified code here, but didnt' want to take up unnecessary bandwidth. BTW, I haven't tried the no-border text field (yet). That may be the solution to this headache.

tanderso · Dec 8, 2000

Yes, the readonly attribute works in both browsers.

Neat trick with the layer embedded in a layer. When you resize, you have to refresh the page or the layers get screwed up. In your body tag (I don't know if this is the right syntax, but you get the idea) do onResize=reload(); That should rewrite the layers in the correct positions.
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.

http://www.oac-design.com

iza · Dec 11, 2000

thanx tom

msteggo · Dec 11, 2000

Tom, how do you compensate for the onLoad() problem with the NN4.0* browsers?

tanderso · Dec 11, 2000

What onLoad problem?
Sincerely,

Tom Anderson
CEO, Order amid Chaos, Inc.

http://www.oac-design.com

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Refreshing DIV contents in Tables :-(

Programmer

IS-IT--Management

Programmer

IS-IT--Management

Programmer

Programmer

IS-IT--Management

Programmer

IS-IT--Management

IS-IT--Management

IS-IT--Management

Programmer

IS-IT--Management

Programmer

Programmer

Programmer

IS-IT--Management

Programmer

Programmer

IS-IT--Management

Similar threads

Log in

Part and Inventory Search

Sponsor