Problem dynamically adding data to an existing table ...

Discussion in 'Javascript' started by Melissa Mussitsch, Nov 17, 2004.

  1. 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
    Melissa Mussitsch, Nov 17, 2004
    #1
    1. Advertising

  2. Melissa Mussitsch wrote:

    > 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.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Nov 17, 2004
    #2
    1. Advertising

  3. 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

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
    Melissa Mussitsch, Nov 17, 2004
    #3
  4. 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

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
    Melissa Mussitsch, Nov 17, 2004
    #4
  5. 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

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
    Melissa Mussitsch, Nov 17, 2004
    #5
  6. Melissa Mussitsch

    RobG Guest

    Melissa Mussitsch wrote:
    > 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, Nov 18, 2004
    #6
  7. Melissa Mussitsch

    RobG Guest

    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. :p

    Rob
    RobG, Nov 18, 2004
    #7
  8. 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

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
    Melissa Mussitsch, Nov 18, 2004
    #8
  9. 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

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
    Melissa Mussitsch, Nov 18, 2004
    #9
  10. 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

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
    Melissa Mussitsch, Nov 18, 2004
    #10
  11. Melissa Mussitsch

    RobG Guest

    Melissa Mussitsch wrote:
    > 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.
    RobG, Nov 18, 2004
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.

Share This Page