473,378 Members | 1,391 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,378 software developers and data experts.

DOM javascript working fine with IE but nothing happens with Firefox

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!

May 17 '07 #1
6 1953
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/
May 17 '07 #2

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.

May 17 '07 #3
On May 17, 3:56 am, ApOG <feinh...@viberagency.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.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.

May 17 '07 #4
On May 17, 3:56 am, ApOG <feinh...@viberagency.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.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....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.

May 17 '07 #5
On May 16, 10:56 pm, ApOG <feinh...@viberagency.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.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 <tableelement and a <tbodyelement
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 <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.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 <tbodyin the <table>
tbl.appendChild(tblBody);
// appends <tableinto <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 '07 #6
On May 17, 12:56 pm, ApOG <feinh...@viberagency.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.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

May 17 '07 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

14
by: maxfloden | last post by:
I have added a Button control (also tried LinkButton with same result) and some code to the click event to my web form in vb.net/vs.net. When I test it from a browser (IE6) the button shows up...
0
by: mark | last post by:
Hello, I have an Access 2000 database with a hyperlink field. The field stores links to .jpg files stored on my hard disk. *When I click on the link, nothing happens!!* When I create a link to...
7
by: Coder | last post by:
Hi I have the following code in java script, it is not giving proper output in FIREFOX but running fine in IE... can anybody help me out to make this run in FIREFOX . <script...
1
by: puginews | last post by:
Hi, I have a webpage with a dropdownlist on it. I fill the dropdownlist with data from database. This works fine. Now I want to create an onchange event (selectedindexchanged), I doubleclick on...
11
by: minnesotti | last post by:
Hi there, I subscribed to a photographic pictures-hosting website which is heavy on JavaScript. My preferred latest browser Mozilla Firefox does not work with it -- no pictures are displayed and...
2
by: fedorpawel | last post by:
I want to redirect the user to the current month such as November2006.html, but only if the month exists in pubMon array. This code works correctely in IE but stopped working in the new Firefox. In...
1
by: web20tester | last post by:
Hi all, I am new to javascript. I have this script working fine in IE but cannot work in firefox. Really appreciate on any guidance. search0.js function Search(str) { var...
14
by: sourav08 | last post by:
Hi, I have validate a text field with onchange event which throw error message, if not satisfied the condition and set the mouse cursor on the same field using document.focus(). It is...
2
by: sateeshchandrasanga | last post by:
Hi All, My HTML code is working fine in Firefox.But its not displaying any thing in IE.Can you help me in this problem.And in Google crown its displaying but not properly. ...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.