943,515 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Issues with javascript in IE6
Ad:
Permalink
Aug 27th, 2009
0

Issues with javascript in IE6

Expand Post »
My issue may be similar to daved83's issue where my script works as designed in firefox but when used in IE6 (the only IE i have tried so far but matters because it will only be used on IE6 at this stage)

his was in AJAX and I am new to JavaScript and didnt understand his code that well.

The dynamic dropdown is supposed to come under the already populated table but in IE6 it removes the table and only populates the dynamic content.

here is my code

html Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script type="text/javascript">
  5. // <![CDATA[
  6.  
  7.   function generate()
  8.   {
  9.       var sms = ''
  10.  
  11.      var impact = document.sms.impacted.value;
  12.      var status = document.sms.status.value;
  13.      var action = document.sms.action.value;
  14.      var BR = '\n';
  15.      sms = sms + '<table name="table2" width="500" border="0" align="center"> ';
  16.      sms = sms + '<tr> <td> ';
  17.      sms = sms + '<textarea name="template" rows="10" cols="55"> ';
  18.      sms = sms + 'Service Impacted: '+ impact + BR;
  19.      sms = sms + 'Service Status  : '+ status + BR;
  20.      sms = sms + 'Next Action     : '+ action + BR;
  21.      sms = sms + '</textarea> ';
  22.      sms = sms + '</td> </tr> </table> ';
  23.  
  24.      document.getElementById('sms').innerHTML=sms;
  25.      //document.getElementById('blank').innerHTML='';
  26.   }
  27.  
  28.   function noComms()
  29.   {
  30.   		var service = document.sms.impacted.value;
  31.   		var istatus = 'Loss of '+service+' to site';
  32.  
  33.   		var status = document.sms.status.value;
  34.  
  35.   		status = istatus;
  36.   }
  37. // ]]>
  38. </script> 
  39. <link href="scripts/imt.css" rel="stylesheet" type="text/css" /> 
  40. </head> 
  41. <body> 
  42. <script type="text/javascript"> 
  43. <!--
  44.  
  45. --> 
  46. </script> 
  47.  
  48. <div id="page"> 
  49.     <div id="wrapper"> 
  50.         <div id="header"> </div> 
  51.         <div id="topSpacer"> </div> 
  52.         <div id="body"> &nbsp;
  53.         	<h2 align="center"> The Fault logging assistant</h2> 
  54.         	<h3 align="center"> </h3> 
  55. 						<form name="sms" action=""> 
  56. 						 <table name="table" width="500" border="0" align="center"> 
  57. 						  <tr align="center"> 
  58. 						   <td colspan="2"> 
  59. 						    <h3> SMS Template Generator</h3> 
  60. 						   </td> 
  61. 						  </tr> 
  62. 						  <tr> 
  63. 						   <td> <strong> Service Impacted: </strong> </td> 
  64. 						   <td> 
  65. 						    <select name="impacted"> 
  66. 						     <option value=""> -- Please Select --</option> 
  67. 						     <option value="data"> Data</option> 
  68. 						     <option value="voice"> Voice</option> 
  69. 						    </select> 
  70. 						   </td> 
  71. 						  </tr> 
  72. 						  <tr> 
  73. 						   <td> <strong> Service Status: </strong> </td> 
  74. 						   <td> 
  75. 						    <input type="text" name="status" value=""> 
  76. 						   </td> 
  77. 						  </tr> 
  78. 						  <tr> 
  79. 						    <td> </td> 
  80. 						    <!-- <td> <input type="radio" name="noComms" onchange="noComms()"> Click for loss of comms to site!</td>  -->
  81. 						  </tr> 
  82. 						  <tr> 
  83. 						   <td> <strong> Next Action: </strong> </td> 
  84. 						   <td> 
  85. 						    <input type="text" name="action" value=""> 
  86. 						   </td> 
  87. 						  </tr>  
  88. 						   <td> <input type="button" name="button" value="Generate" onClick="generate()"> 
  89. 						  <tr> 
  90. 						  </tr> 
  91. 						  <tr> 
  92. 						   <td colspan="2"> 
  93. 							 <br/>     
  94. 						   <br /> 
  95. 						   </td> 
  96. 						  </tr> 
  97. 						 </table> 
  98. 						</form> 
  99. 						&nbsp;
  100.         </div> 
  101.         <div id="body"> 
  102.         	<span id="sms"> </span> 
  103.         </div> 
  104.         <div id="bottomSpacer"> </div> 
  105.         <div id="footer"> 
  106.         	SMS Template Generator V-1.0    Designed By xxxx xxxxxx.  2009
  107.         </div>       
  108.     </div> 
  109. </div> 
  110. </body> 
  111. </html>

Is there a way to fix this for IE6?
Similar Threads
Reputation Points: 19
Solved Threads: 15
Junior Poster
leviathan185 is offline Offline
105 posts
since May 2009
Permalink
Aug 27th, 2009
0

Re: Issues with javascript in IE6

Hi Lev,

i've made a lite modification inside your function and preserved all of your implemented lines:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="./scripts/imt.css" media="all"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta http-equiv="Content-Style-Type" content="text/css" />
  9. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  10. <title>www.daniweb.com</title>
  11. <link rel="stylesheet" type="text/css" href="./scripts/imt.css" media="all" />
  12. <script type="text/javascript">
  13. // <![CDATA[
  14.  
  15. function generate( ) {
  16.    var form = document.getElementById("sms");
  17.    try {
  18.       var table = form.children[ 0 ];
  19.       var textArea = document.createElement( "textarea" );
  20.       textArea.rows = "10";
  21.       textArea.cols = "55";
  22.       textArea.id = "template";
  23.       textArea.name = "template"; 
  24.       var text = { 
  25. impacted : "Service Impacted: ", _status : "Service Status: ", _action : "Next Action: " };
  26.          for ( var val in text ) {
  27.          textArea.appendChild( document.createTextNode( text[ val ] + form[ val ].value + "\n" ));
  28.          } 
  29.       var newTable = table.cloneNode( 0 );
  30.       var tBody = document.createElement( "tbody" );
  31.       newTable.appendChild( tBody );
  32.       var row = tBody.insertRow( -1 );
  33.       row.insertCell( -1 ).appendChild((( document.createDocumentFragment()).appendChild( textArea )));
  34.       form.replaceChild( newTable, table );
  35.    } catch( e ) {
  36. // Your implemented lines: 
  37.    var sms = ''
  38.    var impact = document.sms.impacted.value;
  39.    var status = document.sms.status.value;
  40.    var action = document.sms.action.value;
  41.    var BR = '\n';
  42.    sms = sms + '<table name="table2" width="500" border="0" align="center">';
  43.    sms = sms + '<tr><td>';
  44.    sms = sms + '<textarea name="template" rows="10" cols="55">';
  45.    sms = sms + 'Service Impacted: '+ impact + BR;
  46.    sms = sms + 'Service Status  : '+ status + BR;
  47.    sms = sms + 'Next Action     : '+ action + BR;
  48.    sms = sms + '</textarea>';
  49.    sms = sms + '</td></tr></table>';
  50.    form.innerHTML= sms;
  51.    }
  52. }
  53.  
  54.   function noComms()
  55.   {
  56.         var service = document.sms.impacted.value;
  57.         var istatus = 'Loss of '+service+' to site';
  58.  
  59.         var status = document.sms.status.value;
  60.  
  61.         status = istatus;
  62.   } 
  63.  
  64. // ]]>
  65. </script>
  66. </head>
  67. <body>
  68. <div id="page">
  69. <div id="wrapper">
  70. <div id="header"></div> <!-- div :: #header -->
  71.  
  72. <div id="topSpacer"></div> <!-- div :: #topSpacer -->
  73.  
  74. <div id="body"> 
  75. <h2 align="center">The Fault logging assistant</h2>
  76. <h3 style="text-align : center"></h3>
  77. <form id="sms" name="sms" action="#" onsubmit="return false;">
  78. <table id="table" frame="box" rules="all" width="500" border="0" align="center">
  79.                     <tr align="center">
  80.                      <td colspan="2">
  81.                       <h3>SMS Template Generator</h3>
  82.                      </td>
  83.                     </tr>
  84.                     <tr>
  85.                      <td><strong>Service Impacted: </strong></td>
  86.                      <td>
  87.                       <select id="impacted" name="impacted" size="1">
  88.                        <option value="">-- Please Select --</option>
  89.                        <option value="data">Data</option>
  90.                        <option value="voice">Voice</option>
  91.                       </select>
  92.                      </td>
  93.                     </tr>
  94.                     <tr>
  95.                      <td><strong>Service Status: </strong></td>
  96.                      <td>
  97.                       <input type="text" id="_status" name="_status" value="" />
  98.                      </td>
  99.                     </tr>
  100.                     <tr>
  101.                       <td></td>
  102.                       <!-- <td><input type="radio" name="noComms" onchange="noComms()">Click for loss of comms to site!</td> -->
  103.                     </tr>
  104.                     <tr>
  105.                      <td><strong>Next Action: </strong></td>
  106.                      <td>
  107.                       <input type="text" id="_action" name="_action" value="" />
  108.                      </td>
  109.                     </tr> 
  110.                      <td><input type="button" name="button" value="Generate" onClick="generate()">
  111.                     <tr>
  112.                     </tr>
  113.                     <tr>
  114.                      <td colspan="2">
  115.                       <br/>    
  116.                      <br />
  117.                      </td>
  118.                     </tr>
  119.                    </table>
  120.                   </form>
  121.                   &nbsp;
  122.         </div>
  123.         <div id="bOdy">
  124. <!-- 
  125. *******************
  126. ~ Conflicting id's 
  127. *******************
  128.    [ div ] : #body 2x 
  129.    [ form, span ] : #sms 2x 
  130. --> 
  131. <span id="sMs"></span>
  132.         </div>
  133.         <div id="bottomSpacer"></div>
  134.         <div id="footer">
  135.            SMS Template Generator V-1.0    Designed By xxxx xxxxxx.  2009
  136.         </div>      
  137.     </div>
  138. </div>
  139. </body>
  140. </html>
  141.  

hope it grabs what you need...
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 27th, 2009
0

Re: Issues with javascript in IE6

Click to Expand / Collapse  Quote originally posted by essential ...
Hi Lev,

i've made a lite modification inside your function and preserved all of your implemented lines:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="./scripts/imt.css" media="all"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta http-equiv="Content-Style-Type" content="text/css" />
  9. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  10. <title>www.daniweb.com</title>
  11. <link rel="stylesheet" type="text/css" href="./scripts/imt.css" media="all" />
  12. <script type="text/javascript">
  13. // <![CDATA[
  14.  
  15. function generate( ) {
  16.    var form = document.getElementById("sms");
  17.    try {
  18.       var table = form.children[ 0 ];
  19.       var textArea = document.createElement( "textarea" );
  20.       textArea.rows = "10";
  21.       textArea.cols = "55";
  22.       textArea.id = "template";
  23.       textArea.name = "template"; 
  24.       var text = { 
  25. impacted : "Service Impacted: ", _status : "Service Status: ", _action : "Next Action: " };
  26.          for ( var val in text ) {
  27.          textArea.appendChild( document.createTextNode( text[ val ] + form[ val ].value + "\n" ));
  28.          } 
  29.       var newTable = table.cloneNode( 0 );
  30.       var tBody = document.createElement( "tbody" );
  31.       newTable.appendChild( tBody );
  32.       var row = tBody.insertRow( -1 );
  33.       row.insertCell( -1 ).appendChild((( document.createDocumentFragment()).appendChild( textArea )));
  34.       form.replaceChild( newTable, table );
  35.    } catch( e ) {
  36. // Your implemented lines: 
  37.    var sms = ''
  38.    var impact = document.sms.impacted.value;
  39.    var status = document.sms.status.value;
  40.    var action = document.sms.action.value;
  41.    var BR = '\n';
  42.    sms = sms + '<table name="table2" width="500" border="0" align="center">';
  43.    sms = sms + '<tr><td>';
  44.    sms = sms + '<textarea name="template" rows="10" cols="55">';
  45.    sms = sms + 'Service Impacted: '+ impact + BR;
  46.    sms = sms + 'Service Status  : '+ status + BR;
  47.    sms = sms + 'Next Action     : '+ action + BR;
  48.    sms = sms + '</textarea>';
  49.    sms = sms + '</td></tr></table>';
  50.    form.innerHTML= sms;
  51.    }
  52. }
  53.  
  54.   function noComms()
  55.   {
  56.         var service = document.sms.impacted.value;
  57.         var istatus = 'Loss of '+service+' to site';
  58.  
  59.         var status = document.sms.status.value;
  60.  
  61.         status = istatus;
  62.   } 
  63.  
  64. // ]]>
  65. </script>
  66. </head>
  67. <body>
  68. <div id="page">
  69. <div id="wrapper">
  70. <div id="header"></div> <!-- div :: #header -->
  71.  
  72. <div id="topSpacer"></div> <!-- div :: #topSpacer -->
  73.  
  74. <div id="body"> 
  75. <h2 align="center">The Fault logging assistant</h2>
  76. <h3 style="text-align : center"></h3>
  77. <form id="sms" name="sms" action="#" onsubmit="return false;">
  78. <table id="table" frame="box" rules="all" width="500" border="0" align="center">
  79.                     <tr align="center">
  80.                      <td colspan="2">
  81.                       <h3>SMS Template Generator</h3>
  82.                      </td>
  83.                     </tr>
  84.                     <tr>
  85.                      <td><strong>Service Impacted: </strong></td>
  86.                      <td>
  87.                       <select id="impacted" name="impacted" size="1">
  88.                        <option value="">-- Please Select --</option>
  89.                        <option value="data">Data</option>
  90.                        <option value="voice">Voice</option>
  91.                       </select>
  92.                      </td>
  93.                     </tr>
  94.                     <tr>
  95.                      <td><strong>Service Status: </strong></td>
  96.                      <td>
  97.                       <input type="text" id="_status" name="_status" value="" />
  98.                      </td>
  99.                     </tr>
  100.                     <tr>
  101.                       <td></td>
  102.                       <!-- <td><input type="radio" name="noComms" onchange="noComms()">Click for loss of comms to site!</td> -->
  103.                     </tr>
  104.                     <tr>
  105.                      <td><strong>Next Action: </strong></td>
  106.                      <td>
  107.                       <input type="text" id="_action" name="_action" value="" />
  108.                      </td>
  109.                     </tr> 
  110.                      <td><input type="button" name="button" value="Generate" onClick="generate()">
  111.                     <tr>
  112.                     </tr>
  113.                     <tr>
  114.                      <td colspan="2">
  115.                       <br/>    
  116.                      <br />
  117.                      </td>
  118.                     </tr>
  119.                    </table>
  120.                   </form>
  121.                   &nbsp;
  122.         </div>
  123.         <div id="bOdy">
  124. <!-- 
  125. *******************
  126. ~ Conflicting id's 
  127. *******************
  128.    [ div ] : #body 2x 
  129.    [ form, span ] : #sms 2x 
  130. --> 
  131. <span id="sMs"></span>
  132.         </div>
  133.         <div id="bottomSpacer"></div>
  134.         <div id="footer">
  135.            SMS Template Generator V-1.0    Designed By xxxx xxxxxx.  2009
  136.         </div>      
  137.     </div>
  138. </div>
  139. </body>
  140. </html>
  141.  

hope it grabs what you need...

Ha ha I cant beleive I made such a noob mistake giving 2 elements the same ID

Thank you so much essential, the code you have provided will also give me something to learn as well. Cheers
Reputation Points: 19
Solved Threads: 15
Junior Poster
leviathan185 is offline Offline
105 posts
since May 2009
Permalink
Aug 28th, 2009
0

Re: Issues with javascript in IE6

You are always welcome
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Rookie having problem with 2 consecutive Ajax calls: 1st message lost
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Html includes with javascript.





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC