HTTPRequest problems updating 'hidden' objects?

[Gunnar]

I am finding some unusual behavior with techniques I am using to
show/hide/update data without having to refresh the page. I'm quite
sure it's developer ignorance on my part and would be grateful for any
suggestions.

My page has 10 tables with their visibility controlled by the user
making a menu selection. For example, selecting menu_1 calls a
function which displays table_1 by setting table_1's style display:
block and hides tables 2-10 by setting their respective styles to
display: none. Everything in this simple navigational approach works
as expected.

I am also using the HTTPRequest object to update relevant objects on
the page based on user input. The problem I am seeing is when the
HTTPRequest object is used to update DOM objects contained within the
"invisible" tables -- or more accurately within those tables having
their style display:none. I have tried using both the HTTPRequest
object's synchronous and asynchronous approach and am seeing the same
results.

I've tested when all of the tables are "visible" by setting their style
settings to display:block and HTTPRequest calls work as expected.

The other twist in my example is that these HTTPRequest calls are each
making a SQL query and updating a chart object within the table, which
may take about 500ms each to return. My initial impression is that it
looks as if the page is being rendered too fast because any more than
three charts on a page is when the charts start getting misplaced on
the page. Again, everything works fine when all tables are visible.

Is this a known problem with HTTPRequest, or do I need to migrate my
coding techniques to the 21th century?

[RobG]

Gunnar wrote:

I am finding some unusual behavior with techniques I am using to
show/hide/update data without having to refresh the page. I'm quite
sure it's developer ignorance on my part and would be grateful for any
suggestions.

My page has 10 tables with their visibility controlled by the user
making a menu selection. For example, selecting menu_1 calls a
function which displays table_1 by setting table_1's style display:
block and hides tables 2-10 by setting their respective styles to
display: none.
You will do better to toggle between '' and 'none'. In CSS 2, the
default value for the display property of a table is 'table'. Some
browsers do not implement CSS 2, others do. Setting display to ''
allows it to return to the default or whatever it has been set to by
some style rule.

<URL:http://www.w3.org/TR/CSS21/visuren.html#propdef-display>

IE will be happy with - display: block - for a table, but some other
browsers will not.
Everything in this simple navigational approach works as expected.

I am also using the HTTPRequest object to update relevant objects on
the page based on user input. The problem I am seeing is when the
HTTPRequest object is used to update DOM objects contained within the
"invisible" tables -- or more accurately within those tables having
their style display:none. I have tried using both the HTTPRequest
object's synchronous and asynchronous approach and am seeing the same
results.

Do you have a small test case? Do you get the same behaviour if you
modify the tables using, say, an onclick event rather than HTTPRequest?
How are you modifying the tables (hopefully not using innerHTML)?

The following works for me in IE and Firefox whether the table is
visible or not when modified:
<input type="button" value="hide/show table" onclick="
var t = document.getElementById('tableX');
t.style.display = ('none' == t.style.display)? '' : 'none';
">
<input type="button" value="Add a row" onclick="
var oRow = document.getElementById('tableX').rows[1];
var nRow = oRow.cloneNode(true);
oRow.parentNode.insertBefore(nRow, oRow.nextSibling);
">

<table id="tableX">
<tr><td>cell0</td><td>cell</td><td>cell</td></tr>
<tr><td>cell1</td><td>cell</td><td>cell</td></tr>
<tr><td>cell2</td><td>cell</td><td>cell</td></tr>
</table>

[...]

--
Rob