Page 1 of 1

javascript code not working in ie but working in firefox

Posted: Wed Feb 04, 2009 8:25 am
by sukanya.paul
hi,
i had written a code for creating modules and sub modules dynamically. the problem is the code is working in mozilla but not in ie.. this is a big problem.can anyone help me solve it.

Code: Select all

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="js/menu.css">
<title>Employ Me - Creating Feature List</title>
<link href="images/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var addInput_count = 1;
var addSec_count = 1;
function addInput() {
var c = addInput_count++;
var parent = document.getElementById('myform')
var objBr = document.createElement('br');
var objNew = document.createElement('div');
objNew.setAttribute('name', 'mod_div_' + c);
objNew.setAttribute('id', 'mod_div_' + c);
var mod_id = 'mod_div_' + c ;
var objInput1 = document.createElement('input');
objInput1.setAttribute('type', 'text');
objInput1.setAttribute('style','margin-left:50px;');
objInput1.setAttribute('name', 'module_' + c);
var objB = document.createElement('button');
objB.setAttribute('type', 'button');
objB.setAttribute('name', 'addSec');
objB.setAttribute('style', 'margin-left:5px;');
objB.setAttribute('value', c);
objB.setAttribute('onclick', 'alert("hello");');
objB.appendChild(document.createTextNode('add sub module'));
var objC = document.createElement('button');
objC.setAttribute('type', 'button');
objC.setAttribute('name', 'remMod');
objC.setAttribute('style', 'margin-left:5px;');
objC.setAttribute('value', c);
objC.setAttribute('onclick', 'this.parentNode.parentNode.removeChild(this.parentNode);');
objC.appendChild(document.createTextNode('Remove Module'));
objNew.appendChild(document.createElement('br'));
 
var myText = document.createTextNode("Add Module:");
var font = document.createElement("font");
font.setAttribute('style', 'color:#000066;font-size:10px;font-weight:normal;');
font.appendChild(myText);
objNew.appendChild(font);
objNew.appendChild(objInput1);
objNew.appendChild(objB);objNew.appendChild(objC);
objNew.appendChild(document.createElement('br'));
objNew.appendChild(document.createElement('br'));
parent.appendChild(objNew);
}
function removeElement(divNum) {
  var d = document.getElementById('myform');
  var olddiv = document.getElementById('mod_div_'+divNum);
  d.removeChild(olddiv);
}
function addSec(c) {
var count=0;
var s = addSec_count++;
var parent1 = document.getElementById('mod_div_' + c)
var objNewsec = document.createElement('div');
objNewsec.setAttribute('name', 'sec_div_' + c+'_'+s);
objNewsec.setAttribute('id', 'sec_div_' + c+'_'+s);
var objC = document.createElement('button');
objC.setAttribute('type', 'button');
objC.setAttribute('name', 'addSec');
objC.setAttribute('value', s);
objC.setAttribute('onclick', 'javascript&#058;addSubSec(this.value);');
objC.appendChild(document.createTextNode('add sub section'));
var myText = document.createTextNode("Add Sub Module:");
var font = document.createElement("font");
font.setAttribute('style', 'color:#000066;font-size:10px;font-weight:normal;');
font.appendChild(myText);
objNewsec.appendChild(font);
var objInput2 = document.createElement('input');
objInput2.setAttribute('type', 'text');
objInput2.setAttribute('name', 'Section-'+c +'_'+s);
objInput2.setAttribute('style','margin-left:75px;');
objNewsec.appendChild(objInput2);
objNewsec.appendChild(document.createElement('br'));
parent1.appendChild(objNewsec);
}
</script>
 
</head>
<body  leftmargin="2" topmargin="0" marginheight="2" marginwidth="0">
 
<table width="101%" height="50%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F6F7F2">
<!-- First Row -->
<tr>
<!-- Second Row End -->
    <td height="425" valign="top" bgcolor="f6f7f2"><div align="center">
        <table width="100%" cellpadding="0" cellspacing="0">
          <tr>
            <td align="center"><span class="bigfnt">
            Preparing Feature List </span></td>
          </tr>
        </table>
<br />      </div>
    <table width="97%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#D0CDAE" >
      <tr>
          <td align="center" >
          <form method="POST" action="form_dyn.php" onSubmit="return check()">
            <table width="80%" border="0" cellspacing="0" cellpadding="0">
               <tr><td colspan="2">&nbsp;</td></tr>
              <tr>
                <td valign="top" class="fields">Project Name : </td>
                <td><input type="text" name="txtproj_name" id="txtproj_name" /><br /></td>
              </tr>
              <tr><td colspan="2">&nbsp;</td></tr>
              <tr>
                <td valign="top" class="fields">Scope of Project</td>
                <td><textarea name="txtproj_scope" id="txtproj_scope" rows="10" cols="50" ></textarea></td>
              </tr>
              <tr><td colspan="2">&nbsp;</td></tr>
              </tr>
              <tr>
              <td colspan="2">
              <div style="border:thin solid #000000; overflow:scroll; width:800px; height:300px;">
      <input name="moreMods" type="button" id="moreMods" onclick="addInput();" value="Add Module" /><br /><br />
      <div id="myform"></div>
</div>
              </td>
              </tr>
              <tr><td colspan="2">&nbsp;</td></tr>
              <tr>
                <td colspan="2" align="center"><input type="submit" name="submit" value="submit" /></td>
              </tr>
              <tr><td colspan="2">&nbsp;</td></tr>
            </table>
            </form>
          </td>
      </tr>
    </table></td></tr>
    <tr>
  <td height="15" valign="top" bgcolor="f6f7f2"><?php //include("footer.php") ?></td>
</tr>
</table>
</body>
 
</html>
 
 
Thanks in advance,
Sukanya

Re: javascript code not working in ie but working in firefox

Posted: Wed Feb 04, 2009 8:52 am
by sergio-pro
Hi

A couple of fixes made working events in generated buttons. Was that the only problem?

Code: Select all

 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <link rel="stylesheet" href="js/menu.css">
    <title>Employ Me - Creating Feature List</title>
    <link href="images/styles.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
        var addInput_count = 1;
        var addSec_count = 1;
        function addInput() {
            var c = addInput_count++;
            var parent = document.getElementById('myform');
            var objBr = document.createElement('br');
            var objNew = document.createElement('div');
            objNew.setAttribute('name', 'mod_div_' + c);
            objNew.setAttribute('id', 'mod_div_' + c);
            var mod_id = 'mod_div_' + c ;
            var objInput1 = document.createElement('input');
            objInput1.setAttribute('type', 'text');
            objInput1.setAttribute('style', 'margin-left:50px;');
            objInput1.setAttribute('name', 'module_' + c);
            var objB = document.createElement('button');
            objB.setAttribute('type', 'button');
            objB.setAttribute('name', 'addSec');
            objB.setAttribute('style', 'margin-left:5px;');
            objB.setAttribute('value', c);
            objB.onclick = function(event) {alert('hello')};
            objB.appendChild(document.createTextNode('add sub module'));
            var objC = document.createElement('button');
            objC.setAttribute('type', 'button');
            objC.setAttribute('name', 'remMod');
            objC.setAttribute('style', 'margin-left:5px;');
            objC.setAttribute('value', c);
            objC.onclick = function (event) {this.parentNode.parentNode.removeChild(this.parentNode);};
            objC.appendChild(document.createTextNode('Remove Module'));
            objNew.appendChild(document.createElement('br'));
 
            var myText = document.createTextNode("Add Module:");
            var font = document.createElement("font");
            font.setAttribute('style', 'color:#000066;font-size:10px;font-weight:normal;');
            font.appendChild(myText);
            objNew.appendChild(font);
            objNew.appendChild(objInput1);
            objNew.appendChild(objB);
            objNew.appendChild(objC);
            objNew.appendChild(document.createElement('br'));
            objNew.appendChild(document.createElement('br'));
            parent.appendChild(objNew);
        }
        function removeElement(divNum) {
            var d = document.getElementById('myform');
            var olddiv = document.getElementById('mod_div_' + divNum);
            d.removeChild(olddiv);
        }
        function addSec(c) {
            var count = 0;
            var s = addSec_count++;
            var parent1 = document.getElementById('mod_div_' + c);
            var objNewsec = document.createElement('div');
            objNewsec.setAttribute('name', 'sec_div_' + c + '_' + s);
            objNewsec.setAttribute('id', 'sec_div_' + c + '_' + s);
            var objC = document.createElement('button');
            objC.setAttribute('type', 'button');
            objC.setAttribute('name', 'addSec');
            objC.setAttribute('value', s);
            objC.setAttribute('onclick', 'addSubSec(this.value);');
            objC.appendChild(document.createTextNode('add sub section'));
            var myText = document.createTextNode("Add Sub Module:");
            var font = document.createElement("font");
            font.setAttribute('style', 'color:#000066;font-size:10px;font-weight:normal;');
            font.appendChild(myText);
            objNewsec.appendChild(font);
            var objInput2 = document.createElement('input');
            objInput2.setAttribute('type', 'text');
            objInput2.setAttribute('name', 'Section-' + c + '_' + s);
            objInput2.setAttribute('style', 'margin-left:75px;');
            objNewsec.appendChild(objInput2);
            objNewsec.appendChild(document.createElement('br'));
            parent1.appendChild(objNewsec);
        }
    </script>
 
</head>
<body leftmargin="2" topmargin="0" marginheight="2" marginwidth="0">
 
<table width="101%" height="50%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F6F7F2">
    <!-- First Row -->
    <tr>
        <!-- Second Row End -->
        <td height="425" valign="top" bgcolor="f6f7f2">
            <div align="center">
                <table width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td align="center"><span class="bigfnt">
            Preparing Feature List </span></td>
                    </tr>
                </table>
                <br/></div>
            <table width="97%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#D0CDAE">
                <tr>
                    <td align="center">
                        <form method="POST" action="form_dyn.php" onSubmit="return check()">
                            <table width="80%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td colspan="2">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td valign="top" class="fields">Project Name :</td>
                                    <td><input type="text" name="txtproj_name" id="txtproj_name"/><br/></td>
                                </tr>
                                <tr>
                                    <td colspan="2">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td valign="top" class="fields">Scope of Project</td>
                                    <td><textarea name="txtproj_scope" id="txtproj_scope" rows="10"
                                                  cols="50"></textarea></td>
                                </tr>
                                <tr>
                                    <td colspan="2">&nbsp;</td>
                                </tr>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <div style="border:thin solid #000000; overflow:scroll; width:800px; height:300px;">
                                            <input name="moreMods" type="button" id="moreMods" onclick="addInput();"
                                                   value="Add Module"/><br/><br/>
 
                                            <div id="myform"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">&nbsp;</td>
                                </tr>
                                <tr>
                                    <td colspan="2" align="center"><input type="submit" name="submit" value="submit"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">&nbsp;</td>
                                </tr>
                            </table>
                        </form>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td height="15" valign="top" bgcolor="f6f7f2"><?php //include("footer.php") ?></td>
    </tr>
</table>
</body>
 
</html>
 
 
 

Re: javascript code not working in ie but working in firefox

Posted: Wed Feb 04, 2009 7:07 pm
by JAB Creations
Download and install IE8 for your system IE and run IE6 as system IE in a Virtual PC copy of XP (you cna get IE 4, 5.0, 5.5, and 7.0 to run as standalone but I have not seen 6.0 run as standalone even though you'll see people advertise hey this is a standalone IE6, they're not).

Then run your code through IE8 with the debugger. It's actually exceptionally helpful and will complain when IE doesn't understand something from the 21st century.