DOM javascript working fine with IE but nothing happens with Firefox

A

ApOG

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!
 
M

Martin Honnen

ApOG said:
var table1 = document.createElement("<table width='100%'
class='table0' border='0'>");
Click to expand...
var tr1 = document.createElement("<tr width='100%'
id='upload_table"+num+"'>");


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

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

shimmyshack

ApOG said:
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'>");
Click to expand...

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

shimmyshack

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'>");
Click to expand...

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

shimmyshack

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!
Click to expand...



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

vunet.us

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!
Click to expand...

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'>");
 
R

RobG

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++;
Click to expand...

Where is contador_upload defined?

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

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'>");
Click to expand...

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

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

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

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'>");
Click to expand...

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Only one table shows up with the information 2
DOM Scripting Not Working In IE 9
Javascript and Dynamic Table 2
help with DOM and IE 12
Need help with DOM 1
IE events on the fly 1
Adding rows to a table, works in Firefox, but not IE 26
calculations using createElement input text boxes in a table 2

Members online

Total: 35 (members: 2, guests: 33)
Robots: 321

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,011
Latest member
AjaUqq1950

Latest Threads

Top