Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > DOM javascript working fine with IE but nothing happens with Firefox

Reply
Thread Tools

DOM javascript working fine with IE but nothing happens with Firefox

 
 
ApOG
Guest
Posts: n/a
 
      05-17-2007
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(td;

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!

 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      05-17-2007
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/
 
Reply With Quote
 
 
 
 
shimmyshack
Guest
Posts: n/a
 
      05-17-2007

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

 
Reply With Quote
 
shimmyshack
Guest
Posts: n/a
 
      05-17-2007
On May 17, 3:56 am, ApOG <(E-Mail Removed)> 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....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.

 
Reply With Quote
 
shimmyshack
Guest
Posts: n/a
 
      05-17-2007
On May 17, 3:56 am, ApOG <(E-Mail Removed)> 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(td;
>
> 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....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.

 
Reply With Quote
 
vunet.us@gmail.com
Guest
Posts: n/a
 
      05-17-2007
On May 16, 10:56 pm, ApOG <(E-Mail Removed)> 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(td;
>
> 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

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      05-17-2007
On May 17, 12:56 pm, ApOG <(E-Mail Removed)> 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-Cor...#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/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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
re module: Nothing to repeat, but no sre_constants.error: nothing torepeat ? Devin Jeanpierre Python 2 02-14-2012 01:33 PM
Javascript tabindex forcing working fine in Firefox but not IE, HELP please! ScottRoot2@gmail.com HTML 2 01-10-2007 04:14 AM
What happens when type conversion between signed and unsigned happens? NM C++ 6 09-20-2006 05:39 PM
submitting <FORM> but nothing happens!! Torben Birk HTML 2 09-05-2006 01:26 PM
IE6 not aplying style to DOM created buttons...??? (FireFox working fine) neousr@googlemail.com Javascript 3 11-12-2005 02:06 PM



Advertisments