Problem dynamically adding data to an existing table ...

[Melissa Mussitsch]

I've done this before while creating a brand new table.
But the code below is not working and I keep getting the error:
"Internet Explorer cannot open the Internet site .....
Operation aborted"

Here is the code:

myBody=document.getElementsByTagName("body").item(0);
mytablebody = document.getElementById('product').getElementsByTagName("TBODY" )[0];

newrow=document.createElement("TR");
newrow.setAttribute("bgColor", "#EFECCB");

//Family
newcell=document.createElement("TD");
currenttext=document.createTextNode("Family");
newcell.appendChild(currenttext);
newcell.setAttribute("width","10");
newcell.setAttribute("align", "center");
newrow.appendChild(newcell);
//Product Description
newcell=document.createElement("TD");
currenttext=document.createTextNode("Product Description");
newcell.appendChild(currenttext);
newcell.setAttribute("align", "center");
newrow.appendChild(newcell);
mytablebody.appendChild(newrow);

It's pretty basic code. I put the TR, TD, TD in by hand and it worked fine.
I wanted to make sure it wasn't because I had some mismatching <TABLE> tags.

Any ideas?
Melissa Mussitsch

 

[Martin Honnen]

I've done this before while creating a brand new table.
But the code below is not working and I keep getting the error:
"Internet Explorer cannot open the Internet site .....
Operation aborted"

Here is the code:

myBody=document.getElementsByTagName("body").item(0);
mytablebody = document.getElementById('product').getElementsByTagName("TBODY" )[0];

newrow=document.createElement("TR");
newrow.setAttribute("bgColor", "#EFECCB");

//Family
newcell=document.createElement("TD");
currenttext=document.createTextNode("Family");
newcell.appendChild(currenttext);
newcell.setAttribute("width","10");
newcell.setAttribute("align", "center");
newrow.appendChild(newcell);
//Product Description
newcell=document.createElement("TD");
currenttext=document.createTextNode("Product Description");
newcell.appendChild(currenttext);
newcell.setAttribute("align", "center");
newrow.appendChild(newcell);
mytablebody.appendChild(newrow);

It's pretty basic code. I put the TR, TD, TD in by hand and it worked fine.
I wanted to make sure it wasn't because I had some mismatching <TABLE> tags.

Any ideas?

Are you sure that your code posted above causes the "error"? How do you
call that code? It seems more likely that you have some link causing
that message.

 

[Melissa Mussitsch]

Well after doing further research, I see that the error message is a
pretty standard one and could mean a number of things. I ended up
getting the code to write one row successfully. However, at the very
end, I still get this error. And the only thing left after these
statements is </FORM></BODY></HTML>!
For this project I've tried adding this code to an already enormous asp
page. I think I'm going to have to split it out to get it working and
then try to plug it back in. I don't get it when I pull that code back
out though.

I have this code called after variables and arrays are filled in and
some web form objects are already drawn on the page. I simply have my
<SCRIPT> tag and call the function to create the table and write a
couple rows (for now). When I remove these three lines from my code I
don't get the error:
1)<SCRIPT language=""JavaScript"">var
mybody=document.getElementsByTagName("body").item(0);mytable=document.cr
eateElement("TABLE");</SCRIPT>
2)<SCRIPT language=""JavaScript"">WriteTable(mytable,<%=iarrMax%>, '',
'');</SCRIPT>
3)<SCRIPT language=""JavaScript"">mybody.appendChild(mytable);</SCRIPT>

Of course WriteTable does most of the work.

Thank you.
Melissa M

 

[Melissa Mussitsch]

Ok - I've been able to simplify this and still get the error.

Again I have three lines:
<SCRIPT language="JavaScript">var
mybody=document.getElementsByTagName("body").item(0);mytable=document.cr
eateElement("TABLE");</SCRIPT>
<SCRIPT language="JavaScript">WriteProductList(mytable,
<%=iarrMax%>);</SCRIPT>
<SCRIPT language="JavaScript">mybody.appendChild(mytable);</SCRIPT>

Here is the code for WriteProductList:
function WriteProductList(mytable, iarrMax) {

var mytablebody;
var newrow;
var newcell;
var currenttext;

mytable.setAttribute("width","100%");
mytable.setAttribute("border","1");
mytable.setAttribute("id","productselect");
mytablebody=document.createElement("TBODY");

newrow=document.createElement("TR");

//Family
newcell=document.createElement("TD");
currenttext=document.createTextNode("Family");
newcell.appendChild(currenttext);
newrow.appendChild(newcell);
newrow.appendChild(newcell);

mytablebody.appendChild(newrow);
mytable.appendChild(mytablebody);
}

It's very simple in that it writes one row to the table.
Let me say that I am getting my row in the table.
But as soon as it gets to the "mybody.appendChild(mytable);" part, the
error appears. And without it, I don't get the row.

Does anyone see something obviously wrong?

Thank you.
Melissa M

 

[Melissa Mussitsch]

Ok - sorry for all the threads. I know it has to be something stupid
because I've ripped it all out and have a very simple ASP page and still
get the error. I've even copied an example from online. I've spent
hours on this - please let me know if you see something wrong!

<%Response.Buffer = True
%>

<html>
<head>
<title>Eval Center</title>

<SCRIPT language="JavaScript">
function WriteProductList() {

var mybody=document.getElementsByTagName("body").item(0);
mytable = document.createElement("TABLE");
mytablebody = document.createElement("TBODY");
for(j=0;j<2;j++) {
mycurrent_row=document.createElement("TR");
for(i=0;i<2;i++) {
mycurrent_cell=document.createElement("TD");
currenttext=document.createTextNode("cell is row "+j+", column
"+i);
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
}
mytablebody.appendChild(mycurrent_row);
}
mytable.appendChild(mytablebody);
mybody.appendChild(mytable);
mytable.setAttribute("border","2");
}
</SCRIPT>

</head>

<body>
<form>

<SCRIPT language="JavaScript">WriteProductList();</SCRIPT>
</form>

</body>
</html>

Thank you.
Melissa M

 

[RobG]

Ok - sorry for all the threads. I know it has to be something stupid
because I've ripped it all out and have a very simple ASP page and still

Ahh, yes, incredibly stupid in fact ... you'll kikc yourself.
I was going to write this at the very bottom, but I'll let you know
now:

Because you didn't specify an action on your form element, IE barfs.
Why is open to conjecture - either get rid of the form or add an
action:

<form action="">
...

A good reason to post code, 'cos your problem wasn't JS or ASP but HTML
and IE combined (Firefox was quite happy with the errant tag).

Even though your JS works fine, a couple of hints (please ignore if you
have already dealt with them):

var mybody=document.getElementsByTagName("body").item(0);

You should do feature detection before using getElements... and use an
alternative if it fails. There are plenty of examples in the archives.

mytable = document.createElement("TABLE");
mytablebody = document.createElement("TBODY");
for(j=0;j<2;j++) {
mycurrent_row=document.createElement("TR");

Use "var" to keep mycurrent_row local. It's probably trivial here,
but worth doing.

var mycurrent_row=document.createElement("TR");

for(i=0;i<2;i++) {
mycurrent_cell=document.createElement("TD");

same for mycurrent_cell and currenttext...

currenttext=document.createTextNode("cell is row "+j+", column
"+i);
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
}
mytablebody.appendChild(mycurrent_row);
}
mytable.appendChild(mytablebody);
mybody.appendChild(mytable);
mytable.setAttribute("border","2");

Using "setAttribute" destroys any attributes that the element already
has, so it's not considered nice. Again, probably trivial but may
cause you problems later if you use it twice on the same element. Try:

mytable.style.border = 'thin solid red';

For a border, you have to set all the attributes, either in one go as
above or individually:

mytable.style.borderWidth = 'thin';
mytable.style.borderStyle = 'solid';
mytable.style.borderColor = 'red';

It's probably better to do the style attributes before adding the row
to the table too:

mytable.style.border = 'thin solid red';
mybody.appendChild(mytable);

}
</SCRIPT>

</head>

<body>
<form>

The form element should have an action, even if it's action=""

<SCRIPT language="JavaScript">WriteProductList();</SCRIPT>
</form>

I guess you've put the table inside a form to help layout the form
elements - otherwise, there is no need for it.

Anyhow, all just advice, none of it will fix your problem.

Cheers, Rob.

 

[RobG]

RobG wrote:
[...]

Ahh, yes, incredibly stupid in fact ... you'll kikc yourself.
I was going to write this at the very bottom, but I'll let you know
now:

Because you didn't specify an action on your form element, IE barfs.
Why is open to conjecture - either get rid of the form or add an
action:

<form action="">
...

Ahhh, ooops!! I also moved calling the function to:

<body onload="WriteProductList();">

and got rid of the <script...> in the form - that was the *real* fix!

Sorry about that.

Rob

 

[Melissa Mussitsch]

Well I answered my own question.
Once I appended the table to my form it worked.

Thank you for directing me to the form, I would have never looked there.
And I will look again at your suggestions.

Thank you for all your time and help!
Melissa M

 

[Melissa Mussitsch]

Oh - Just for kicks I did test <SCRIPT
language="JavaScript">alert('hi');</SCRIPT> inside the form and it works
fine. So I guess it's not the <SCRIPT> tag itself but the dynamic
building of the tables.

I wish I knew specifically what it didn't like.
It seems to be appending the table to the body when I got the error. Do
you think I need to append the table to the form object instead?

Thank you.
Melissa M

 

[Melissa Mussitsch]

Ok. I'm still confused.
I'm working now just with my simple example.
I took the <form> totally out and as you mentioned, it gets rid of the
error.

However, I think that I do need the form. I may be able to get away
without it. Ultimately I'll need to be able to retrieve all values from
a different table. And if I traverse using DOM, perhaps I won't need
the form. But just in case, I tried (in my simple example) to add <form
action="" name="mainform" method="post"> and I get the error again.

So - I believe you're right in the <form> does not like the <script>
call to my table build inside it. I just confirmed in my other
application that I swore was working with all this - I ended the </form>
prior to call the <script> which is why it works. (I just got lucky
there)

I appreciate all your other suggestions above. I've taken most of this
dynamic table creation from the internet and love the flexibility and
power of it, but probably don't do it all the best way. I shift things
all around until it works and especially didn't realize there was a
better order to the attributes.

If you can think of anyway the <FORM> will allow the <SCRIPT>, please
let me know. Otherwise, I'll try to work without the form.

Thanks so much for your help! This just about killed me yesterday!

Thank you.
Melissa M

 

[RobG]

Ok. I'm still confused.
I'm working now just with my simple example.
I took the <form> totally out and as you mentioned, it gets rid of the
error. [...]
If you can think of anyway the <FORM> will allow the <SCRIPT>, please
let me know. Otherwise, I'll try to work without the form.

[...]

I have noticed that mixing tables and forms in IE has some
peculiarities not shared with other browsers. From memory I think you
need to obey nesting rules and not say start a form inside a cell and
end it inside another - but that may just have been the DTD I was
using.

The simple solution in this case is don't put <script> tags inside a
form - I can't think of any imperatives for them to be there. Or you
could build the entire form from the script using say a DIV as an
anchor for the form - as it is now, you are only saving two lines of
code by using the form tag as an anchor.

If you want to build the form when the page loads, use an onload in the
body tag to call a function script in the header - I always do it that
way anyway (and now I even have a reason for doing it!).

Any other scripting inside the form should be inside tags using
onclick, onblur, onchange, etc.

Anyhow, have fun trying things out. Maybe you should log it as a bug
in IE and see what happens...

Cheers, Rob.