Accessing Table Cells Within Nested Frames

[Chris New]

G'Day All

I am having trouble dynamically assigning a value to a table's cell
from one frame to another frame.

I've created a website that is primarily viewed in a frameset
consisting of 2 frames - a navigation frame (navFrame) at the top and
a contents frame (mainFrame) on the bottom. In all instances, the
mainFrame displays a single page except in one case, where it was
necessary to use a frameset consisting of a left frame (controlFrame)
and a right frame (tableFrame).

The tableFrame contains an HTML table used to display items that are
added or removed using the controlFrame through the use of JavaScript
functions. This used to be on a single page and all worked fine, but
it became necessary to break it out into frames since the tableFrame
required scrolling and I didn't want the controlFrame contents to
scroll out of sight.

In the controlFrame, there is a ListBox (cbSelection) and buttons to
perform things like ClearTable, SaveTable, etc. If I can get the
adding of data to the table done, the rest should fall into place and
this is where your help can get me throught it.

Initially, when all was on a single page, the following code performed
as expected:

.... Variable Declarations and Intializations ...
 
iIndex = document.Form1.cbSelection.selectedIndex
strItem = document.Form1.cbSelection.options[iIndex].text
strContent = document.Form1.cbSelection.options[iIndex].value;
 
strTableCell = "R" + iRow + "C" + iColumn;
document.getElementById(strTableCell).innerHTML = strItem;
 
strTableCell = "R" + iRow + "C" + (iColumn + 1);
document.getElementById(strTableCell).innerHTML = strContent;
 

After reading through the NG's to get an idea of how to proceed with
communicating across frames, I have tried (and failed to get working)
the following methods:

parent.document.frames["tableFrame"].getElementById(strTableCell).innerHTML
= strContent;
 

parent.document.frames.item('tableFrame').getElementById(strTableCell).innerHTML
= strContent;
 

parent.document.frames['tableFrame'].getElementById(strTableCell).innerHTML
= strContent;
 

parent.document.tableFrame.getElementById(strTableCell).innerHTML =
strContent;
 

top.mainFrame.tableFrame.getElementById(strTableCell).innerHTML =
strContent;
 

parent.tableFrame.getElementById(strTableCell).innerHTML = strContent;
 

window.mainFrame.tableFrame.getElementById(strTableCell).innerHTML =
strContent;
 

What am I doing wrong here? Am I somewhere in the ballpark with the
direction in which I'm trying to accomplish this task? Is there a
better way to do this?

Please post all answers to the newsgroup so that others might benefit
from your expertise as I am sure I'm not the only one to run into
this.
Cheers,
Chris.

[Chris New]

> > I am having trouble dynamically assigning a value to a table's cell

from one frame to another frame.

value? A text node or html markup?

Guess I should have clarified this - Entering Text in the table cells.

When a page design is a bit complex, then providing an url is best in
this newsgroup (and in other web design newsgroups). It saves so much
time to experts and regulars of newsgroups. I know that many regulars
and experts in this newsgroup can read the code of a page as well as you
can read a newspaper headlines.
This is a good point and it is well taken, but I do not have a WWW DNS
entry and my IP Address is dynamic which is why I tried to explain it
as best I could. Perhaps next time I should include a picture like:

_______________________________________________
( )
( navFrame )
(_______________________________________________)
( )
( mainFrame )
( ___________________________________________ )
( ( ) ) )
( ( ) ) )
( ( ) ) )
( ( ) ) )
( ( controlFrame ) tableFrame ) )
( ( ) ) )
( ( ) ) )
( ( ) ) )
( ( ) ) )
( ( ) ) )
( ( ) ) )
( (______________)____________________________) )
(_______________________________________________)
I encourage you to keep prefixing objects the way you do (and I have
adopted this code writing policy too):
i for integer, cb for combobox, str for string, etc...
This code writing policy helps tremendously debugging with software,
code maintenance, code reusability, code review by others, etc..

No need to encourage me in using Hungarian Notation. I am a strong
proponent in this style of coding and have been using and teaching it
for years. I believe in being able to read through code as if it were
"a story". I don't even shorten variable names, for example iCol, but
instead write out iColumn.

strTableCell = "R" + iRow + "C" + iColumn;
document.getElementById(strTableCell).innerHTML = strItem;

May I suggest here
document.getElementById(strTableCell).childNodes[0].nodeValue = strItem;
This will speed up parsing and rendering by at least 300% on all W3C web
standards compliant DOM 1 Character Data browsers: MSIE 5+, NS 6+, Opera
7.x, Konqueror 3, etc.

Thank-you very much for this information. Although I am aware that it
takes more time to parse using my original technique, I was surprised
to learn that a 300% increase was the benefit in your suggestion.
Knowledge is good and I am now putting it into practice.

 > parent.document.frames["tableFrame"].getElementById(strTableCell).innerHTML
 > = strContent;
 > 

Please try:
parent.frames["tableFrame"].document.getElementById(strTableCell).childNodes[0].nodeValue

And this was the answer I've been seeking. It appears I just had the
'document' and 'frames' components in the wrong place (aside from the
innerHTML/nodeValue).

Thanks again DU - you've been a great help!
Cheers,
Chris.

[DU]

Chris New wrote:

I am having trouble dynamically assigning a value to a table's cell
from one frame to another frame.

value? A text node or html markup?

Guess I should have clarified this - Entering Text in the table cells.

No prob. Your "str" prefix suggested it was TEXT_NODE, kinda answered
that question :)

When a page design is a bit complex, then providing an url is best in
this newsgroup (and in other web design newsgroups). It saves so much
time to experts and regulars of newsgroups. I know that many regulars
and experts in this newsgroup can read the code of a page as well as you
can read a newspaper headlines.

This is a good point and it is well taken, but I do not have a WWW DNS
entry and my IP Address is dynamic which is why I tried to explain it
as best I could. Perhaps next time I should include a picture like:

_______________________________________________
( )
( navFrame )
(_______________________________________________)
( )
( mainFrame )
( ___________________________________________ )
( ( ) ) )
( ( ) ) )
( ( ) ) )
( ( ) ) )
( ( controlFrame ) tableFrame ) )
( ( ) ) )
( ( ) ) )
( ( ) ) )
( ( ) ) )
( ( ) ) )
( ( ) ) )
( (______________)____________________________) )
(_______________________________________________)

I encourage you to keep prefixing objects the way you do (and I have
adopted this code writing policy too):
i for integer, cb for combobox, str for string, etc...
This code writing policy helps tremendously debugging with software,
code maintenance, code reusability, code review by others, etc..

No need to encourage me in using Hungarian Notation. I am a strong
proponent in this style of coding and have been using and teaching it
for years. I believe in being able to read through code as if it were
"a story". I don't even shorten variable names, for example iCol, but
instead write out iColumn.

I am also a strong proponent of meaningful, intuitive variable
identifiers. :)

strTableCell = "R" + iRow + "C" + iColumn;
document.getElementById(strTableCell).innerHT ML = strItem;
May I suggest here
document.getElementById(strTableCell).childNodes[0].nodeValue = strItem;
This will speed up parsing and rendering by at least 300% on all W3C web
standards compliant DOM 1 Character Data browsers: MSIE 5+, NS 6+, Opera
7.x, Konqueror 3, etc.

Thank-you very much for this information. Although I am aware that it
takes more time to parse using my original technique, I was surprised
to learn that a 300% increase was the benefit in your suggestion.
Knowledge is good and I am now putting it into practice.

On a fast machine, the performance gain is negligeable but on a slow
(< 600Mhz) machine, this is where the performance gain is most
noticeable and the most welcomed.

parent.document.frames["tableFrame"].getElementById(strTableCell).innerHTML
= strContent;

Please try:
parent.frames["tableFrame"].document.getElementById(strTableCell).childNodes[0].nodeValue

And this was the answer I've been seeking.

In your original post, you rightly mentioned that figuring out the DOM
logic was not evident and I think you have an important point here. Even
in books, the DOM logical view is not self-explanatory, easy to figure
out. I think comp.lang.javascript and other related web programming
newsgroups should build a DOM logical view which would serve as a
reliable reference, share it and put it in their respective FAQs so that
everyone can see it, consult it and refer others to it when needed.

I have several logical view images of the DOM event models (3), W3C DOM
2 interfaces, CSS2 box model, MSIE 5.x DHTML object model, etc.. These
are extremely useful. I'll upload them next week on my site in 1 section.

It appears I just had the 'document' and 'frames' components in the wrong place (aside from the
innerHTML/nodeValue).

Thanks again DU - you've been a great help!

Thank you for your nice comments: this is appreciated. :)
Glad I could help. :)

Cheers,
Chris.

take care

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/