DOM javascript working fine with IE but nothing happens with Firefox

Discussion in 'Javascript' started by ApOG, May 17, 2007.

  1. ApOG

    ApOG Guest

    Hello everyone, I have this javascript code working perfectly with IE,
    but with firefox nothing happens when running the function...

    function add_div_field () {

    var ni = document.getElementById('upload_div');
    var num = contador_upload++;
    var div = document.createElement("div");
    var div_name = "filediv"+num;
    div.setAttribute("id",div_name);

    var table1 = document.createElement("<table width='100%'
    class='table0' border='0'>");

    var tbody1 = document.createElement("tbody");

    var tr1 = document.createElement("<tr width='100%'
    id='upload_table"+num+"'>");


    var td1 = document.createElement("<td width='13'>");


    var strong1 = document.createElement("strong");
    var txtno = document.createTextNode(num+'.');

    strong1.appendChild(txtno);

    td1.appendChild(strong1);

    var td2 = document.createElement("<td width='700' valign='middle'
    class='grey_small'>");


    var div2 = document.createElement("<div id='file"+num+"'
    class='showme'>");


    var iframe = document.createElement("<iframe align='middle'
    marginheight='0' scrolling='no' marginwidth='0' frameborder='0'
    width='300' height='22' src='upload2.php?upload_id="+num+"'>");


    div2.appendChild(iframe);

    var div3 = document.createElement("<div id='waiting"+num+"'
    class='hideme'>");


    var txtwaiting = document.createTextNode(' Subiendo imagen, espera
    unos instantes...');
    var br = document.createElement("br");

    var imgwaiting = document.createElement('<img src="pics/
    uploading.gif" width="220" height="19" align="absmiddle">');


    div3.appendChild(txtwaiting);
    div3.appendChild(br);
    div3.appendChild(imgwaiting);

    var div4 = document.createElement("<div id='end_upload"+num+"'
    class='hideme'>");


    var table2 = document.createElement("<table width='100%'>");

    var tbody2 = document.createElement("tbody");

    var tr2 = document.createElement("tr");

    var td3 = document.createElement("<td height='10'>");

    tr2.appendChild(td3);

    var tr3 = document.createElement("tr");
    var td4 = document.createElement("td");
    var txttitle = document.createTextNode("Título:");

    td4.appendChild(txttitle);
    tr3.appendChild(td4);

    var tr4 = document.createElement("tr");
    var td5 = document.createElement("td");

    var inputTitle = document.createElement("<input type='text'
    name='title["+num+"]' id='title["+num+"]'>");
    var inputTitleName = "title["+num+"]";

    td5.appendChild(inputTitle);
    tr4.appendChild(td5);

    var tr5 = document.createElement("tr");
    var td6 = document.createElement("td");

    var txtdesc = document.createTextNode("Descripción Opcional:");

    td6.appendChild(txtdesc);
    tr5.appendChild(td6);

    var tr6 = document.createElement("tr");
    var td7 = document.createElement("td");

    var inputDesc = document.createElement("<textarea id='desc["+num+"]'
    name='desc["+num+"]' cols='40' rows='4'>");
    var inputDescName = "desc["+num+"]";

    td7.appendChild(inputDesc);
    tr6.appendChild(td7);

    var tr7 = document.createElement("tr");
    var td8 = document.createElement("<td height='10'>");

    tr7.appendChild(td8);

    tbody2.appendChild(tr2);
    tbody2.appendChild(tr3);
    tbody2.appendChild(tr4);
    tbody2.appendChild(tr5);
    tbody2.appendChild(tr6);
    tbody2.appendChild(tr7);

    table2.appendChild(tbody2);

    div4.appendChild(table2);

    td2.appendChild(div2);
    td2.appendChild(div3);
    td2.appendChild(div4);

    var td9 = document.createElement("<td width='21'>");

    var txtempty = document.createTextNode(" ");

    td9.appendChild(txtempty);

    var td10 = document.createElement("<td width='189'>");

    var imgphoto = document.createElement("<img src='pics/blank50x50.gif'
    id='photo"+num+"' name='photo"+num+"' width='50' height='50'
    class='upload_border'>");

    td10.appendChild(imgphoto);

    tr1.appendChild(td1);
    tr1.appendChild(td2);
    tr1.appendChild(td10);

    tbody1.appendChild(tr1);

    table1.appendChild(tbody1);

    div.appendChild(table1);

    ni.appendChild(div);

    }

    Thank you!
     
    ApOG, May 17, 2007
    #1
    1. Advertising

  2. Re: DOM javascript working fine with IE but nothing happens withFirefox

    ApOG wrote:

    > var table1 = document.createElement("<table width='100%'
    > class='table0' border='0'>");


    > var tr1 = document.createElement("<tr width='100%'
    > id='upload_table"+num+"'>");
    >
    >
    > var td1 = document.createElement("<td width='13'>");


    With the W3C DOM the createElement method takes a string with the tag
    name of the element. Passing in a complete start tag with attributes is
    not supported, that is something that IE/Win supports but other
    implementations do not support.


    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, May 17, 2007
    #2
    1. Advertising

  3. ApOG

    shimmyshack Guest

    ApOG wrote:
    > Hello everyone, I have this javascript code working perfectly with IE,
    > but with firefox nothing happens when running the function...
    >
    > function add_div_field () {
    >
    > var ni = document.getElementById('upload_div');
    > var num = contador_upload++;
    > var div = document.createElement("div");
    > var div_name = "filediv"+num;
    > div.setAttribute("id",div_name);
    >
    > var table1 = document.createElement("<table width='100%'
    > class='table0' border='0'>");
    >


    ----8<---snipped--8<------

    see the difference in createElement between firefox and IE.
    http://developer.mozilla.org/en/docs/DOM:document.createElement
    http://msdn2.microsoft.com/en-us/library/ms536389.aspx

    the usual advice is steer clear of the microsoft website when learning
    new methods

    Instead use
    http://developer.mozilla.org and
    http://www.w3.org
    then once your code works in standards based browsers, hack the code
    (if needed) to work in M$ IE6+
    IMHO You were using functionality helpfully provided by M$ and
    unsupported by any known standard.
     
    shimmyshack, May 17, 2007
    #3
  4. ApOG

    shimmyshack Guest

    On May 17, 3:56 am, ApOG <> wrote:
    > Hello everyone, I have this javascript code working perfectly with IE,
    > but with firefox nothing happens when running the function...
    >
    > function add_div_field () {
    >
    > var ni = document.getElementById('upload_div');
    > var num = contador_upload++;
    > var div = document.createElement("div");
    > var div_name = "filediv"+num;
    > div.setAttribute("id",div_name);
    >
    > var table1 = document.createElement("<table width='100%'
    > class='table0' border='0'>");


    --------snipped-------
    apologies if this post appears twice.

    You are another victim of msdn I am afraid, you are using M$
    proprietary features of createElement.

    Rule number 1: stay away from micro$oft website when learning new
    methods.
    Instead use
    http://developer.mozilla.org/
    in particular this link
    http://developer.mozilla.org/en/docs/DOM:document.createElement

    and
    http://www.w3.org/
    in particular these pages
    http://www.w3.org/TR/DOM-Level-2-Core/core.html
    http://www.w3.org/TR/DOM-Level-3-Core/core.html

    since you cannot rely on microsoft methods to be compliant with
    standards, you should code first for firefox and other browsers which
    attempt a stab at standards, and hack your code to work in IE if it
    doesn't already.
     
    shimmyshack, May 17, 2007
    #4
  5. ApOG

    shimmyshack Guest

    On May 17, 3:56 am, ApOG <> wrote:
    > Hello everyone, I have this javascript code working perfectly with IE,
    > but with firefox nothing happens when running the function...
    >
    > function add_div_field () {
    >
    > var ni = document.getElementById('upload_div');
    > var num = contador_upload++;
    > var div = document.createElement("div");
    > var div_name = "filediv"+num;
    > div.setAttribute("id",div_name);
    >
    > var table1 = document.createElement("<table width='100%'
    > class='table0' border='0'>");
    >
    > var tbody1 = document.createElement("tbody");
    >
    > var tr1 = document.createElement("<tr width='100%'
    > id='upload_table"+num+"'>");
    >
    > var td1 = document.createElement("<td width='13'>");
    >
    > var strong1 = document.createElement("strong");
    > var txtno = document.createTextNode(num+'.');
    >
    > strong1.appendChild(txtno);
    >
    > td1.appendChild(strong1);
    >
    > var td2 = document.createElement("<td width='700' valign='middle'
    > class='grey_small'>");
    >
    > var div2 = document.createElement("<div id='file"+num+"'
    > class='showme'>");
    >
    > var iframe = document.createElement("<iframe align='middle'
    > marginheight='0' scrolling='no' marginwidth='0' frameborder='0'
    > width='300' height='22' src='upload2.php?upload_id="+num+"'>");
    >
    > div2.appendChild(iframe);
    >
    > var div3 = document.createElement("<div id='waiting"+num+"'
    > class='hideme'>");
    >
    > var txtwaiting = document.createTextNode(' Subiendo imagen, espera
    > unos instantes...');
    > var br = document.createElement("br");
    >
    > var imgwaiting = document.createElement('<img src="pics/
    > uploading.gif" width="220" height="19" align="absmiddle">');
    >
    > div3.appendChild(txtwaiting);
    > div3.appendChild(br);
    > div3.appendChild(imgwaiting);
    >
    > var div4 = document.createElement("<div id='end_upload"+num+"'
    > class='hideme'>");
    >
    > var table2 = document.createElement("<table width='100%'>");
    >
    > var tbody2 = document.createElement("tbody");
    >
    > var tr2 = document.createElement("tr");
    >
    > var td3 = document.createElement("<td height='10'>");
    >
    > tr2.appendChild(td3);
    >
    > var tr3 = document.createElement("tr");
    > var td4 = document.createElement("td");
    > var txttitle = document.createTextNode("Título:");
    >
    > td4.appendChild(txttitle);
    > tr3.appendChild(td4);
    >
    > var tr4 = document.createElement("tr");
    > var td5 = document.createElement("td");
    >
    > var inputTitle = document.createElement("<input type='text'
    > name='title["+num+"]' id='title["+num+"]'>");
    > var inputTitleName = "title["+num+"]";
    >
    > td5.appendChild(inputTitle);
    > tr4.appendChild(td5);
    >
    > var tr5 = document.createElement("tr");
    > var td6 = document.createElement("td");
    >
    > var txtdesc = document.createTextNode("Descripción Opcional:");
    >
    > td6.appendChild(txtdesc);
    > tr5.appendChild(td6);
    >
    > var tr6 = document.createElement("tr");
    > var td7 = document.createElement("td");
    >
    > var inputDesc = document.createElement("<textarea id='desc["+num+"]'
    > name='desc["+num+"]' cols='40' rows='4'>");
    > var inputDescName = "desc["+num+"]";
    >
    > td7.appendChild(inputDesc);
    > tr6.appendChild(td7);
    >
    > var tr7 = document.createElement("tr");
    > var td8 = document.createElement("<td height='10'>");
    >
    > tr7.appendChild(td8);
    >
    > tbody2.appendChild(tr2);
    > tbody2.appendChild(tr3);
    > tbody2.appendChild(tr4);
    > tbody2.appendChild(tr5);
    > tbody2.appendChild(tr6);
    > tbody2.appendChild(tr7);
    >
    > table2.appendChild(tbody2);
    >
    > div4.appendChild(table2);
    >
    > td2.appendChild(div2);
    > td2.appendChild(div3);
    > td2.appendChild(div4);
    >
    > var td9 = document.createElement("<td width='21'>");
    >
    > var txtempty = document.createTextNode(" ");
    >
    > td9.appendChild(txtempty);
    >
    > var td10 = document.createElement("<td width='189'>");
    >
    > var imgphoto = document.createElement("<img src='pics/blank50x50.gif'
    > id='photo"+num+"' name='photo"+num+"' width='50' height='50'
    > class='upload_border'>");
    >
    > td10.appendChild(imgphoto);
    >
    > tr1.appendChild(td1);
    > tr1.appendChild(td2);
    > tr1.appendChild(td10);
    >
    > tbody1.appendChild(tr1);
    >
    > table1.appendChild(tbody1);
    >
    > div.appendChild(table1);
    >
    > ni.appendChild(div);
    >
    > }
    >
    > Thank you!




    ***nb: google groups is playing up again - this is so boring, I
    apologise if there end up being 3 posts or something:
    --------snipped-------
    apologies if this post appears twice.

    You are another victim of msdn I am afraid, you are using M$
    proprietary features of createElement.

    Rule number 1: stay away from micro$oft website when learning new
    methods.
    Instead use
    http://developer.mozilla.org/
    in particular this link
    http://developer.mozilla.org/en/docs/DOM:document.createElement

    and
    http://www.w3.org/
    in particular these pages
    http://www.w3.org/TR/DOM-Level-2-Core/core.html
    http://www.w3.org/TR/DOM-Level-3-Core/core.html

    since you cannot rely on microsoft methods to be compliant with
    standards, you should code first for firefox and other browsers which
    attempt a stab at standards, and hack your code to work in IE if it
    doesn't already.
     
    shimmyshack, May 17, 2007
    #5
  6. ApOG

    Guest

    On May 16, 10:56 pm, ApOG <> wrote:
    > Hello everyone, I have this javascript code working perfectly with IE,
    > but with firefox nothing happens when running the function...
    >
    > function add_div_field () {
    >
    > var ni = document.getElementById('upload_div');
    > var num = contador_upload++;
    > var div = document.createElement("div");
    > var div_name = "filediv"+num;
    > div.setAttribute("id",div_name);
    >
    > var table1 = document.createElement("<table width='100%'
    > class='table0' border='0'>");
    >
    > var tbody1 = document.createElement("tbody");
    >
    > var tr1 = document.createElement("<tr width='100%'
    > id='upload_table"+num+"'>");
    >
    > var td1 = document.createElement("<td width='13'>");
    >
    > var strong1 = document.createElement("strong");
    > var txtno = document.createTextNode(num+'.');
    >
    > strong1.appendChild(txtno);
    >
    > td1.appendChild(strong1);
    >
    > var td2 = document.createElement("<td width='700' valign='middle'
    > class='grey_small'>");
    >
    > var div2 = document.createElement("<div id='file"+num+"'
    > class='showme'>");
    >
    > var iframe = document.createElement("<iframe align='middle'
    > marginheight='0' scrolling='no' marginwidth='0' frameborder='0'
    > width='300' height='22' src='upload2.php?upload_id="+num+"'>");
    >
    > div2.appendChild(iframe);
    >
    > var div3 = document.createElement("<div id='waiting"+num+"'
    > class='hideme'>");
    >
    > var txtwaiting = document.createTextNode(' Subiendo imagen, espera
    > unos instantes...');
    > var br = document.createElement("br");
    >
    > var imgwaiting = document.createElement('<img src="pics/
    > uploading.gif" width="220" height="19" align="absmiddle">');
    >
    > div3.appendChild(txtwaiting);
    > div3.appendChild(br);
    > div3.appendChild(imgwaiting);
    >
    > var div4 = document.createElement("<div id='end_upload"+num+"'
    > class='hideme'>");
    >
    > var table2 = document.createElement("<table width='100%'>");
    >
    > var tbody2 = document.createElement("tbody");
    >
    > var tr2 = document.createElement("tr");
    >
    > var td3 = document.createElement("<td height='10'>");
    >
    > tr2.appendChild(td3);
    >
    > var tr3 = document.createElement("tr");
    > var td4 = document.createElement("td");
    > var txttitle = document.createTextNode("Título:");
    >
    > td4.appendChild(txttitle);
    > tr3.appendChild(td4);
    >
    > var tr4 = document.createElement("tr");
    > var td5 = document.createElement("td");
    >
    > var inputTitle = document.createElement("<input type='text'
    > name='title["+num+"]' id='title["+num+"]'>");
    > var inputTitleName = "title["+num+"]";
    >
    > td5.appendChild(inputTitle);
    > tr4.appendChild(td5);
    >
    > var tr5 = document.createElement("tr");
    > var td6 = document.createElement("td");
    >
    > var txtdesc = document.createTextNode("Descripción Opcional:");
    >
    > td6.appendChild(txtdesc);
    > tr5.appendChild(td6);
    >
    > var tr6 = document.createElement("tr");
    > var td7 = document.createElement("td");
    >
    > var inputDesc = document.createElement("<textarea id='desc["+num+"]'
    > name='desc["+num+"]' cols='40' rows='4'>");
    > var inputDescName = "desc["+num+"]";
    >
    > td7.appendChild(inputDesc);
    > tr6.appendChild(td7);
    >
    > var tr7 = document.createElement("tr");
    > var td8 = document.createElement("<td height='10'>");
    >
    > tr7.appendChild(td8);
    >
    > tbody2.appendChild(tr2);
    > tbody2.appendChild(tr3);
    > tbody2.appendChild(tr4);
    > tbody2.appendChild(tr5);
    > tbody2.appendChild(tr6);
    > tbody2.appendChild(tr7);
    >
    > table2.appendChild(tbody2);
    >
    > div4.appendChild(table2);
    >
    > td2.appendChild(div2);
    > td2.appendChild(div3);
    > td2.appendChild(div4);
    >
    > var td9 = document.createElement("<td width='21'>");
    >
    > var txtempty = document.createTextNode(" ");
    >
    > td9.appendChild(txtempty);
    >
    > var td10 = document.createElement("<td width='189'>");
    >
    > var imgphoto = document.createElement("<img src='pics/blank50x50.gif'
    > id='photo"+num+"' name='photo"+num+"' width='50' height='50'
    > class='upload_border'>");
    >
    > td10.appendChild(imgphoto);
    >
    > tr1.appendChild(td1);
    > tr1.appendChild(td2);
    > tr1.appendChild(td10);
    >
    > tbody1.appendChild(tr1);
    >
    > table1.appendChild(tbody1);
    >
    > div.appendChild(table1);
    >
    > ni.appendChild(div);
    >
    > }
    >
    > Thank you!


    Try using this technique instead:

    function start() {
    // get the reference for the body
    var body = document.getElementsByTagName("body")[0];

    // creates a <table> element and a <tbody> element
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");

    // creating all cells
    for (var j = 0; j < 2; j++) {
    // creates a table row
    var row = document.createElement("tr");

    for (var i = 0; i < 2; i++) {
    // Create a <td> element and a text node, make the
    text
    // node the contents of the <td>, and put the <td> at
    // the end of the table row
    var cell = document.createElement("td");
    var cellText = document.createTextNode("cell is row "+j
    +", column "+i);
    cell.appendChild(cellText);
    row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblBody.appendChild(row);
    }

    // put the <tbody> in the <table>
    tbl.appendChild(tblBody);
    // appends <table> into <body>
    body.appendChild(tbl);
    // sets the border attribute of tbl to 2;
    tbl.setAttribute("border", "2");
    }

    This must be the problem in Firefox: document.createElement("<td
    width='21'>");

    --
    VUNET
    www.worldincatalog.com
     
    , May 17, 2007
    #6
  7. ApOG

    RobG Guest

    On May 17, 12:56 pm, ApOG <> wrote:
    > Hello everyone, I have this javascript code working perfectly with IE,
    > but with firefox nothing happens when running the function...
    >
    > function add_div_field () {
    >
    > var ni = document.getElementById('upload_div');
    > var num = contador_upload++;


    Where is contador_upload defined?


    > var div = document.createElement("div");
    > var div_name = "filediv"+num;
    > div.setAttribute("id",div_name);


    setAttribute is problematic in some browsers, just set the property
    directly:

    div.id = div_name;


    > var table1 = document.createElement("<table width='100%'
    > class='table0' border='0'>");


    The argument to createElement is supposed to be a tag name, not a
    string of HTML.

    <URL: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-2141741547 >


    > var tbody1 = document.createElement("tbody");
    >
    > var tr1 = document.createElement("<tr width='100%'
    > id='upload_table"+num+"'>");


    You can create the table with:

    var table = document.createElement('table');

    then skip the tbody and just insert rows into the table:

    var row = table.insertRow(-1);


    >
    > var td1 = document.createElement("<td width='13'>");


    var cell = row.insertCell(-1);

    and so on. There's an example here:

    <URL: http://developer.mozilla.org/en/doc...ples#Example_8:_Using_the_DOM_Table_Interface
    >



    There are likely many more things to fix - you should look for
    patterns in your code and run some loops or clones to reduce all those
    lines of near identical code.


    --
    Rob
     
    RobG, May 17, 2007
    #7
    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.
Similar Threads
  1. Replies:
    0
    Views:
    609
  2. Torben Birk
    Replies:
    2
    Views:
    547
    Torben Birk
    Sep 5, 2006
  3. Replies:
    2
    Views:
    1,479
    Adrienne Boswell
    Jan 10, 2007
  4. Devin Jeanpierre
    Replies:
    2
    Views:
    529
    Devin Jeanpierre
    Feb 14, 2012
  5. Replies:
    3
    Views:
    167
    Thomas 'PointedEars' Lahn
    Nov 12, 2005
Loading...

Share This Page