Home     |     .Net Programming    |     cSharp Home    |     Sql Server Home    |     Javascript / Client Side Development     |     Ajax Programming

Ruby on Rails Development     |     Perl Programming     |     C Programming Language     |     C++ Programming     |     IT Jobs

Python Programming Language     |     Laptop Suggestions?    |     TCL Scripting     |     Fortran Programming     |     Scheme Programming Language


 
 
Cervo Technologies
The Right Source to Outsource

MS Dynamics CRM 3.0

Javascript / Client Side Development

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("Ttulo:");

        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("Descripcin 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 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/

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.

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

On May 17, 3:56 am, ApOG <feinh@viberagency.com> wrote:

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

On May 16, 10:56 pm, ApOG <feinh@viberagency.com> wrote:

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

On May 17, 12:56 pm, ApOG <feinh@viberagency.com> 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/docs/Gecko_DOM_Reference:Examples#Exa...


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

Add to del.icio.us | Digg this | Stumble it | Powered by Megasolutions Inc