Problems with getElementsByTagName in FF, Data island problem??

[daffy_dowden]

I think I've encountered something called a data island in FF. I've no real idea what this is or how to get around this.

Basically, whilst cloning a new row via the DOM, I try and manipulate a couple of links in a td element being cloned as part of the row, this uses getElementsByTagName method. The following code in IE gives length = 2, whereas in FF it gives length = 0


var newField = newFields.childNodes[0].childNodes[0];

var links = newField.getElementsByTagName('A');
alert('links length: '+links.length)

links[1].onclick = function() {NewRow('dest','row'+num,1);}



I've cleaned the whitespace out and changed any firstChild to childNodes[0] (I read somewhere this can cause a problem in FF) but I'm now pretty confused as to what I can do to fix the problem.

Anyone got any ideas?

Cheers,
Richard

[daffy_dowden]

I'm still stumped on this (after a long break from it) but I'm now not so sure whether its to do with getElementsByTagName, but maybe how FF stores XML nodes instead?
Maybe a fresh post on the subject would be a better idea.

Here's my full function. Any help/tips/anything! is greatly appreciated! :p

This is called in order to create a new row or to copy an existing row. A user chooses to copy a row by clicking on the copy row button in the final cell on a row, whereas a new row is created when they submit an existing one.


function NewRow(tid, cid, copy)
{
counter++;
var newFields = $(cid).cloneNode(true);
newFields.id = "row"+counter;
newFields.style.display = 'block';
Element.cleanWhitespace(newFields);

var newField = newFields.childNodes[0].childNodes[0]; //returns FORM node
//alert('newField nodename: '+newField.nodeName);
//alert('newField length: '+newField.length);
alert('nodename: '+newField.firstChild.nodeName)

for (var l=0;l<newField.length;l++)
{
newField[l].id = "row" + counter + "_" + l;
}
var num = counter; //creates variable for counter with local scope

var links = newField.getElementsByTagName('A');

alert('links length: '+links.length);

for(var k=0;k<links.length;k++){alert(links[1].onclick);}

links[1].onclick = function() {NewRow('dest','row'+num,1);}

if (copy==1) {
var dd = newField.getElementsByTagName('SELECT');
var cd = $(cid).getElementsByTagName('SELECT');
for (var m=0; m<cd.length; m++) {
dd[m].selectedIndex = cd[m].selectedIndex;
}
}
$(tid).parentNode.appendChild(newFields);

send();
}

I'm using prototype library so the $ function is just equivalent to document.getElementById()

[liorean]

Think you could show us this code in action? It's hard to debug DOM code without seeing the page itself.

[Kor]

I guess this is the problem:

var newField = newFields.childNodes[0].childNodes[0];


the childNode reference work different in IE and in Moz. Moz counts every empty space between two tags (so called "gaps") as possible textNodes - thus childNodes, while IE counts only some of them.

There are some solutions to overpass the problem, but in your case probably the esiest way is to refere directly the objects by their tagName, not as childNodes.

var newField = newFields.getElementsByTagName('form')[0]; //returns FORM node

You may also use nodeValue to check whether a childNode is a tag or not or you may use a "gaps cleaner" (a function called onload to virtually clear the gaps)

[daffy_dowden]

Cheers Kor! :thumbsup:
but I'm still getting the error "links[1] has no properties"
Any ideas?

[daffy_dowden]

Hey Liorean,

Here's the full page as requested. I've omitted the css but included the prototype library just incase. The prototype library is really just used for sumitting database queries and execution. I hope this helps. Many Thanks!

4536

[liorean]

That you're having problems with that code doesn't surprise me in the least...

My suspicion is that the real problem is that you have your form opening tag in a tr where it isn't allowed. The DOM inspector shows the form element is the base for the following node tree:<FORM name="num"/>

Try put the form opening and closing tags somewhere where they are allowed to appear.


(There are also quite a lot of other problems with your markup. Try attaching a DOCTYPE and passing it through the validator (http://validator.w3.org/).)

[daffy_dowden]

lol, I'm new to all this! but you're right I really need to buy a decent book on DOM scripting / Ajax, and learn from the start.
The thing is if I move the form tag, so I have a single one for all rows (right?) then how can I submit just a single row?
I'm tempted to scrap all of this and do it in Flash, which I'm more comfortable with, it's just not as accessible.
Anyway, I'll give your comments a shot and get back to you. Cheers! Rich