Forum Moderators: open

Message Too Old, No Replies

getElementsById is null error in iframe

DOM, iframe, parent, child

         

Minuteman

5:53 pm on Jan 3, 2010 (gmt 0)

10+ Year Member



I moved a script (that was working) into an iframe and can't seem to figure out how to get it working again. I am getting a null error.

The script in the iframe is AJAX and creates a dropdown.

In the php part of the AJAX have an "onmousover " event that runs this problem, error generating function below:

function changeText2(){
var arrlength = arguments.length/3;
var arrlengthsc = arrlength+arrlength;
var c = "c";
var sc = "sc";

for( var i = 0; i < arrlength; i++ ) {

document.getElementById(c+arguments[i]).innerHTML = arguments[arrlength+i];

if(arguments[arrlengthsc+i]){
document.getElementById(sc+arguments[i]).parentNode = arguments[arrlengthsc+i];
}
}
}

I get a "document.getElementById(c + arguments[i]) is null" error message from FireBug.

I can alert arrlength fine.
I can alert arguments[i] (which is the "60" part of the id name) through 1 iteration fine (until I reach the error)
var iter1 = arguments[i];
alert(iter1);

I don't understand that as I can see the value in the source code.Here is a section of source code that the script is supposed to replace the c60 and sc60 values

<td align='left' width='50%' valign='top'><ul><li><font id="u60" size="2"><strong><a href="/mysite/index.php/104/60">Accessories</a></strong></font><i><small>(<font id="c60">7</font>)</small></i><i><small>(<font id="sc60">7</font>)</small></i></li>

I tried taking the id'd values from above and moving them onto the iframe page (thinking the function was perhaps looking on the wrong page) with this ...
echo '<font id="c60">7</font><font id="sc60">7</font>';
and get the same null error.

So if someone can help get rid of the error message so I can then go on and get it to update the parent page (or are they related issues?) I would be greatly appreciative.

Thanks in advance.

Minuteman

7:00 pm on Jan 3, 2010 (gmt 0)

10+ Year Member



The ONLY thing better than getting a problem solved through a forum is getting the problem solved yourself (becuase thats how we learn) and paasing on the answer...

here it is...

<script type="text/javascript">

function changeText2(){
var arrlength = arguments.length/3;
var arrlengthsc = arrlength+arrlength;
var c = "c";
var sc = "sc";

for( var i = 0; i < arrlength; i++ ) {
parent.document.getElementById(c+arguments[i]).innerHTML = arguments[arrlength+i];

if(arguments[arrlengthsc+i]){
parent.document.getElementById(sc+arguments[i]).innerHTML = arguments[arrlengthsc+i];
}
}
}

In plain English... the "document" of the getElementsById func needed to be actually pointed at the parent document. Afyter seeing some syntax examples that were similar I played around and finally got 1st, different error message the 2nd the first on to work.

On to the next challemge ...