DOM - get element in Iframe from parent document

[Henrik Stidsen]

I am trying to access a table in an iframe via javascript. It sounds
easy - but it won´t work...

The iframe is added to the document via someContainerEl ement.innerHTML
= "<iframe... >", it has name and ID and its visible in my DOM explorer
just as the table I need is it. The table is added from ASP.NET via
Response.Write( ).

I have tried both window.frames[], document.getEle mentById and even
document.getEle mentsByTagName, nothing has worked when the iframe is
involved...

It seems I cannot get af reference to the table in the iframe from the
parent document... ??

[Randy Webb]

Henrik Stidsen said the following on 5/1/2006 8:22 AM:

I am trying to access a table in an iframe via javascript. It sounds
easy - but it won´t work...
And as they say "Then you must not be doing something right" :)
The iframe is added to the document via someContainerEl ement.innerHTML
= "<iframe... >", it has name and ID and its visible in my DOM explorer
just as the table I need is it. The table is added from ASP.NET via
Response.Write( ).
It's irrelevant that it is added in ASP.NET, but, if you have ASP.NET
then why are you adding it to the document using client side scripting?
Just insert it with ASP.
I have tried both window.frames[], document.getEle mentById and even
document.getEle mentsByTagName, nothing has worked when the iframe is
involved...
It takes a combination :)
It seems I cannot get af reference to the table in the iframe from the
parent document... ??

window.frames['IFrameName'].document.getEl ementById('Tabl eID');

If that doesn't work, post a URL to a sample page that shows the behavior.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Henrik Stidsen]

>> I am trying to access a table in an iframe via javascript. It sounds

easy - but it won´t work...

And as they say "Then you must not be doing something right" :)
And yet, it works when the table is added directly to the parent
document and not in the iframe - so something must be right somewhere
:)
It's irrelevant that it is added in ASP.NET, but, if you have ASP.NET
then why are you adding it to the document using client side scripting?
Just insert it with ASP.
Its an old script being updated for a new world - I wish I could, but I
can´t (as in, it takes too much work...)
I have tried both window.frames[], document.getEle mentById and even
document.getEle mentsByTagName, nothing has worked when the iframe is
involved... It takes a combination :)
Been there, done that - didn´t work either :(
It seems I cannot get af reference to the table in the iframe from the
parent document... ??

window.frame s['IFrameName'].document.getEl ementById('Tabl eID');
No luck...
If that doesn't work, post a URL to a sample page that shows the behavior.

Unfortunately not possible at the moment...

I have a feeling that this ends with a lot of recoding...

[Randy Webb]

Henrik Stidsen said the following on 5/1/2006 8:41 AM:

I am trying to access a table in an iframe via javascript. It sounds
easy - but it won´t work...

And as they say "Then you must not be doing something right" :)
And yet, it works when the table is added directly to the parent
document and not in the iframe - so something must be right somewhere
:)

Well, something is still wrong and it is something else in your code
causing the problems.

It's irrelevant that it is added in ASP.NET, but, if you have ASP.NET
then why are you adding it to the document using client side scripting?
Just insert it with ASP.

Its an old script being updated for a new world - I wish I could, but I
can´t (as in, it takes too much work...)

I am not sure I buy into that one, but, ok.

I have tried both window.frames[], document.getEle mentById and even
document.getEle mentsByTagName, nothing has worked when the iframe is
involved...

It takes a combination :)

Been there, done that - didn´t work either :(
It seems I cannot get af reference to the table in the iframe from the
parent document... ??

window.frames['IFrameName'].document.getEl ementById('Tabl eID');

No luck...

Then something else in your code is breaking it.
If that doesn't work, post a URL to a sample page that shows the behavior.

Unfortunately not possible at the moment...

Why? Just a sample page. Or, sample code here.
I have a feeling that this ends with a lot of recoding...

It will, eventually, lead to recoding. It is not a matter of if, but when.
This script block:

<script type="text/javascript">
function newScriptElemen t(){
alert(window.fr ames['myIframe'].document.getEl ementById('myTa ble').innerHTML );
}
function addIFrame(){
document.getEle mentById('someC ontainer').inne rHTML =
'<iframe src="blank2.htm l" name="myIframe" ></iframe>';
}
</script>

With this HTML:

<button onclick="addIFr ame()">Add IFrame</button>
<button onclick="newScr iptElement()">G et Table</button>
<div id="someContain er"></div>

I added the IFrame using innerHTML and then got the table innerHTML from
blank2.html:

<table id="myTable">
<tbody>
<tr>
<td>My Table</td>
</tr>
</tbody>
</table>

That leads to the thought that something else in your page is screwing
it up.
--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Henrik Stidsen]

>That leads to the thought that something else in your page is screwing

it up.

That seems to be the problem :(

I have tried to call a function from the page in the iframe with the
table object as argument and it stille doesn´t work...
doStuffToTable( document.getEle mentById('table thingy');

In a .js file "attached" to the parent page:
function doStuffToTable( t)
{
alert(t.id);
}

That much works just fine...

Then I call a function in the old code that writes to the table, adds
rows and cells, but the table is still empty...
I quess its something in the old code that can't handle DOM working
with the iframe = even more "research" in old confusing code, less
actual work...

[Randy Webb]

Henrik Stidsen said the following on 5/1/2006 9:31 AM:

That leads to the thought that something else in your page is screwing
it up.

That seems to be the problem :(

I have tried to call a function from the page in the iframe with the
table object as argument and it stille doesn´t work...
doStuffToTable( document.getEle mentById('table thingy');

In a .js file "attached" to the parent page:
function doStuffToTable( t)
{
alert(t.id);
}

That much works just fine...

Then I call a function in the old code that writes to the table, adds
rows and cells, but the table is still empty...

How does it add rows and cells? innerHTML or appendChild? innerHTML
doesn't work real well with IE and in IE you have to appendChild to the
TBODY instead of the Table element. Or, you could use insertRow and
insertCell. But insertRow, in IE, is downright crazy:

<URL:
http://msdn.microsoft. com/library/default.asp?url =/workshop/author/dhtml/reference/methods/insertrow.asp>

Yuck!

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Henrik Stidsen]

It uses insertRow and insertCell to build the table...

Since yesterday I have found out more about the problem.

The page in the iframe calls a function on the parent page. Argument is
an object, document.getEle mentById('myTab le'), which works fine. From
the parent function I am able to alert the id of the object. So far so
good.
Next step is to change som properties on the table and delete some rows
(actually, changing their ID and setting visibillity to none). After
this, I cannot get myTable via document.getEle mentById so I try this as
a backup:

var tmpTbl = document.getEle mentById('listm ultitable');
if(tmpTbl == null)
{
var iframes = document.getEle mentsByTagName( 'iframe');
var tables;
for(i = 0; i < iframes.length; i++)
{
tables =
iframes[i].document.getEl ementsByTagName ('table');
for(j = 0; j < tables.length; j++)
{
if(tables[j].id == 'listmultitable '){newTbl =
tables[j]; j = tables.lenght; i = iframes.length; }
}
}
}

And well, tmpTbl is still null after this :/

I use the same function at another place in the app where its not in an
iframe and there is no problems at all there :(

[Dag Sunde]

"Henrik Stidsen" <he***********@ gmail.com> skrev i melding
news:11******** **************@ e56g2000cwe.goo glegroups.com.. .

It uses insertRow and insertCell to build the table...

Since yesterday I have found out more about the problem.

The page in the iframe calls a function on the parent page. Argument is
an object, document.getEle mentById('myTab le'), which works fine. From
the parent function I am able to alert the id of the object. So far so
good.
Next step is to change som properties on the table and delete some rows
(actually, changing their ID and setting visibillity to none). After
this, I cannot get myTable via document.getEle mentById so I try this as
a backup:

var tmpTbl = document.getEle mentById('listm ultitable');
if(tmpTbl == null)
{
var iframes = document.getEle mentsByTagName( 'iframe');
var tables;
for(i = 0; i < iframes.length; i++)
{
tables =
iframes[i].document.getEl ementsByTagName ('table');
for(j = 0; j < tables.length; j++)
{
if(tables[j].id == 'listmultitable '){newTbl =
tables[j]; j = tables.lenght; i = iframes.length; }
}
}
}

And well, tmpTbl is still null after this :/

I use the same function at another place in the app where its not in an
iframe and there is no problems at all there :(

Your *backup* method sets 'newTbl', NOT 'tmpTbl'...

Could that be your problem?

--
Dag.

[Henrik Stidsen]

Dag Sunde wrote:

Your *backup* method sets 'newTbl', NOT 'tmpTbl'... Could that be your problem?

It could have been the problem - but now i've changed it to:
if(tmpTbl == null){ tbl = ntbl; } else { tbl = null; }

tbl being a "global" variable, ntbl being the object passed as argument
to this function. It gets me about 5 centimeters further in the
script...

It seems to me that the problem is that the table is not added to the
DOM tree or the DOM tree that the javascript uses is not updated when I
change the id of the table in the iframe. Could that maybe be the
problem ?
I use the developer toolbar for IE and the DOM tree that it has is
updated correctly.