javascript code not working in ie but working in firefox

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
sukanya.paul
Forum Newbie
Posts: 9
Joined: Tue Dec 02, 2008 4:16 am

javascript code not working in ie but working in firefox

Post 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
User avatar
sergio-pro
Forum Commoner
Posts: 88
Joined: Sat Dec 27, 2008 12:26 pm

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

Post 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>
 
 
 
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

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

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