DOM javascript working fine with IE but nothing happens with Firefox

[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.getEle mentById('uploa d_div');
var num = contador_upload ++;
var div = document.create Element("div");
var div_name = "filediv"+n um;
div.setAttribut e("id",div_name );

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

var tbody1 = document.create Element("tbody" );

var tr1 = document.create Element("<tr width='100%'
id='upload_tabl e"+num+"'>") ;
var td1 = document.create Element("<td width='13'>");
var strong1 = document.create Element("strong ");
var txtno = document.create TextNode(num+'. ');

strong1.appendC hild(txtno);

td1.appendChild (strong1);

var td2 = document.create Element("<td width='700' valign='middle'
class='grey_sma ll'>");
var div2 = document.create Element("<div id='file"+num+" '
class='showme'> ");
var iframe = document.create Element("<ifram e align='middle'
marginheight='0 ' scrolling='no' marginwidth='0' frameborder='0'
width='300' height='22' src='upload2.ph p?upload_id="+n um+"'>");
div2.appendChil d(iframe);

var div3 = document.create Element("<div id='waiting"+nu m+"'
class='hideme'> ");
var txtwaiting = document.create TextNode(' Subiendo imagen, espera
unos instantes...');
var br = document.create Element("br");

var imgwaiting = document.create Element('<img src="pics/
uploading.gif" width="220" height="19" align="absmiddl e">');
div3.appendChil d(txtwaiting);
div3.appendChil d(br);
div3.appendChil d(imgwaiting);

var div4 = document.create Element("<div id='end_upload" +num+"'
class='hideme'> ");
var table2 = document.create Element("<table width='100%'>") ;

var tbody2 = document.create Element("tbody" );

var tr2 = document.create Element("tr");

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

tr2.appendChild (td3);

var tr3 = document.create Element("tr");
var td4 = document.create Element("td");
var txttitle = document.create TextNode("Títul o:");

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

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

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

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

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

var txtdesc = document.create TextNode("Descr ipción Opcional:");

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

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

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

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

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

tr7.appendChild (td8);

tbody2.appendCh ild(tr2);
tbody2.appendCh ild(tr3);
tbody2.appendCh ild(tr4);
tbody2.appendCh ild(tr5);
tbody2.appendCh ild(tr6);
tbody2.appendCh ild(tr7);

table2.appendCh ild(tbody2);

div4.appendChil d(table2);

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

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

var txtempty = document.create TextNode(" ");

td9.appendChild (txtempty);

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

var imgphoto = document.create Element("<img src='pics/blank50x50.gif'
id='photo"+num+ "' name='photo"+nu m+"' width='50' height='50'
class='upload_b order'>");

td10.appendChil d(imgphoto);

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

tbody1.appendCh ild(tr1);

table1.appendCh ild(tbody1);

div.appendChild (table1);

ni.appendChild( div);

}

Thank you!

[Martin Honnen]

ApOG wrote:

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

var tr1 = document.create Element("<tr width='100%'
id='upload_tabl e"+num+"'>") ;
var td1 = document.create Element("<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/

[shimmyshack]

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.getEle mentById('uploa d_div');
var num = contador_upload ++;
var div = document.create Element("div");
var div_name = "filediv"+n um;
div.setAttribut e("id",div_name );

var table1 = document.create Element("<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....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]

On May 17, 3:56 am, ApOG <feinh...@viber agency.comwrote :

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.getEle mentById('uploa d_div');
var num = contador_upload ++;
var div = document.create Element("div");
var div_name = "filediv"+n um;
div.setAttribut e("id",div_name );

var table1 = document.create Element("<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....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]

On May 17, 3:56 am, ApOG <feinh...@viber agency.comwrote :

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.getEle mentById('uploa d_div');
var num = contador_upload ++;
var div = document.create Element("div");
var div_name = "filediv"+n um;
div.setAttribut e("id",div_name );

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

var tbody1 = document.create Element("tbody" );

var tr1 = document.create Element("<tr width='100%'
id='upload_tabl e"+num+"'>") ;

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

var strong1 = document.create Element("strong ");
var txtno = document.create TextNode(num+'. ');

strong1.appendC hild(txtno);

td1.appendChild (strong1);

var td2 = document.create Element("<td width='700' valign='middle'
class='grey_sma ll'>");

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

var iframe = document.create Element("<ifram e align='middle'
marginheight='0 ' scrolling='no' marginwidth='0' frameborder='0'
width='300' height='22' src='upload2.ph p?upload_id="+n um+"'>");

div2.appendChil d(iframe);

var div3 = document.create Element("<div id='waiting"+nu m+"'
class='hideme'> ");

var txtwaiting = document.create TextNode(' Subiendo imagen, espera
unos instantes...');
var br = document.create Element("br");

var imgwaiting = document.create Element('<img src="pics/
uploading.gif" width="220" height="19" align="absmiddl e">');

div3.appendChil d(txtwaiting);
div3.appendChil d(br);
div3.appendChil d(imgwaiting);

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

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

var tbody2 = document.create Element("tbody" );

var tr2 = document.create Element("tr");

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

tr2.appendChild (td3);

var tr3 = document.create Element("tr");
var td4 = document.create Element("td");
var txttitle = document.create TextNode("Títul o:");

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

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

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

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

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

var txtdesc = document.create TextNode("Descr ipción Opcional:");

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

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

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

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

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

tr7.appendChild (td8);

tbody2.appendCh ild(tr2);
tbody2.appendCh ild(tr3);
tbody2.appendCh ild(tr4);
tbody2.appendCh ild(tr5);
tbody2.appendCh ild(tr6);
tbody2.appendCh ild(tr7);

table2.appendCh ild(tbody2);

div4.appendChil d(table2);

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

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

var txtempty = document.create TextNode(" ");

td9.appendChild (txtempty);

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

var imgphoto = document.create Element("<img src='pics/blank50x50.gif'
id='photo"+num+ "' name='photo"+nu m+"' width='50' height='50'
class='upload_b order'>");

td10.appendChil d(imgphoto);

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

tbody1.appendCh ild(tr1);

table1.appendCh ild(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....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.

[vunet.us]

On May 16, 10:56 pm, ApOG <feinh...@viber agency.comwrote :

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.getEle mentById('uploa d_div');
var num = contador_upload ++;
var div = document.create Element("div");
var div_name = "filediv"+n um;
div.setAttribut e("id",div_name );

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

var tbody1 = document.create Element("tbody" );

var tr1 = document.create Element("<tr width='100%'
id='upload_tabl e"+num+"'>") ;

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

var strong1 = document.create Element("strong ");
var txtno = document.create TextNode(num+'. ');

strong1.appendC hild(txtno);

td1.appendChild (strong1);

var td2 = document.create Element("<td width='700' valign='middle'
class='grey_sma ll'>");

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

var iframe = document.create Element("<ifram e align='middle'
marginheight='0 ' scrolling='no' marginwidth='0' frameborder='0'
width='300' height='22' src='upload2.ph p?upload_id="+n um+"'>");

div2.appendChil d(iframe);

var div3 = document.create Element("<div id='waiting"+nu m+"'
class='hideme'> ");

var txtwaiting = document.create TextNode(' Subiendo imagen, espera
unos instantes...');
var br = document.create Element("br");

var imgwaiting = document.create Element('<img src="pics/
uploading.gif" width="220" height="19" align="absmiddl e">');

div3.appendChil d(txtwaiting);
div3.appendChil d(br);
div3.appendChil d(imgwaiting);

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

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

var tbody2 = document.create Element("tbody" );

var tr2 = document.create Element("tr");

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

tr2.appendChild (td3);

var tr3 = document.create Element("tr");
var td4 = document.create Element("td");
var txttitle = document.create TextNode("Títul o:");

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

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

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

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

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

var txtdesc = document.create TextNode("Descr ipción Opcional:");

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

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

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

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

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

tr7.appendChild (td8);

tbody2.appendCh ild(tr2);
tbody2.appendCh ild(tr3);
tbody2.appendCh ild(tr4);
tbody2.appendCh ild(tr5);
tbody2.appendCh ild(tr6);
tbody2.appendCh ild(tr7);

table2.appendCh ild(tbody2);

div4.appendChil d(table2);

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

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

var txtempty = document.create TextNode(" ");

td9.appendChild (txtempty);

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

var imgphoto = document.create Element("<img src='pics/blank50x50.gif'
id='photo"+num+ "' name='photo"+nu m+"' width='50' height='50'
class='upload_b order'>");

td10.appendChil d(imgphoto);

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

tbody1.appendCh ild(tr1);

table1.appendCh ild(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.getEle mentsByTagName( "body")[0];

// creates a <tableelement and a <tbodyelement
var tbl = document.create Element("table" );
var tblBody = document.create Element("tbody" );

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

for (var i = 0; i < 2; i++) {
// Create a <tdelement and a text node, make the
text
// node the contents of the <td>, and put the <tdat
// the end of the table row
var cell = document.create Element("td");
var cellText = document.create TextNode("cell is row "+j
+", column "+i);
cell.appendChil d(cellText);
row.appendChild (cell);
}

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

// put the <tbodyin the <table>
tbl.appendChild (tblBody);
// appends <tableinto <body>
body.appendChil d(tbl);
// sets the border attribute of tbl to 2;
tbl.setAttribut e("border", "2");
}

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

--
VUNET
www.worldincatalog.com

[RobG]

On May 17, 12:56 pm, ApOG <feinh...@viber agency.comwrote :

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.getEle mentById('uploa d_div');
var num = contador_upload ++;

Where is contador_upload defined?

var div = document.create Element("div");
var div_name = "filediv"+n um;
div.setAttribut e("id",div_name );

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

div.id = div_name;

var table1 = document.create Element("<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-Cor...#ID-2141741547 >

var tbody1 = document.create Element("tbody" );

var tr1 = document.create Element("<tr width='100%'
id='upload_tabl e"+num+"'>") ;

You can create the table with:

var table = document.create Element('table' );

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

var row = table.insertRow (-1);

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

var cell = row.insertCell(-1);

and so on. There's an example here:

<URL: http://developer.mozilla.org/en/docs...able_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