user1184697
Reputation:
IE shows run time error for innerHTML
I have a jsp page in which rows are created dynamically to a table using java script. It is working fine in all the browsers except IE. In IE it is showing the error Unknown run time error..
I have attached the java script function
function addrow(tableID) {
try{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount-1);
var mystring1='<td class="formlabel"><h4>Type </h4></td><td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td><td class="formgap"></td><td class="formlabel"><h4>Description </h4></td><td class="formfield"><textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea></td>';
row.innerHTML =mystring1;
}catch(e) {
alert(e);
}
}
HTML part
<table id="table1" width="792" border="0">
<tr class="rowdiv">
<td class="formlabel"><h4>Type </h4></td>
<td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td>
<td class="formgap"></td>
<td class="formlabel"><h4>Description </h4></td>
<td class="formfield"><textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea></td>
</tr>
<tr class="rowdiv">
<td width="170" class="formlabel"> </td>
<td class="formfield"> </td>
<td class="formgap"></td>
<td class="formlabel"> </td>
<td class="formfield"><h6 onclick="addrow('table1')">Add policy</h6></td>
</tr>
</table>
Actually I already tried to add a table into a row using a second function..
var mystring2='<td><table width="200" border="1" class="tableborder" align="center"><tr class="rowdiv"><td width="799" class="formheader" ><h4>Comany Details</h4></td></tr><tr><td width="799"><table id="table'+rowCount+'" width="792" border="0"><tr class="rowdiv"><td width="170" class="formlabel"><h4>Company ID </h4></td><td width="205" class="formfield"> </td><td width="20" class="formgap"></td><td width="170" class="formlabel"><h4>Company Name </h4></td><td width="205" class="formfield"><input type="text" name="type" id="type" size="30"/></td></tr><tr class="rowdiv"><td width="170" class="formlabel"><h4>Address </h4></td><td width="205" class="formfield"><textarea name="textarea" id="textarea" cols="28" rows="2"></textarea></td><td width="20" class="formgap"></td><td width="170" class="formlabel"><h4>Phone Number </h4></td><td width="205" class="formfield"><h6><input type="text" name="type2" id="type2" size="30"/></h6></td></tr><tr class="rowdiv"><td width="170" class="formlabel"><h4>Fax Number </h4></td><td class="formfield"><input type="text" name="type3" id="type3" size="30"/></td><td class="formgap"></td><td width="170" class="formlabel"><h4>E Mail </h4></td><td class="formfield"><input type="text" name="type5" id="type5" size="30"/></td></tr><tr class="rowdiv"><td class="formlabel"><h4>Web Site </h4></td><td class="formfield"><input type="text" name="type7" id="type7" size="30"/></td><td class="formgap"></td><td class="formlabel"> </td><td class="formfield"> </td></tr><tr class="rowdiv"><td class="formlabel"><h4>Type </h4></td><td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td><td class="formgap"></td><td class="formlabel"><h4>Description </h4></td><td class="formfield"><textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea></td></tr><tr class="rowdiv"><td width="170" class="formlabel"> </td><td class="formfield"> </td><td class="formgap"></td><td class="formlabel"> </td><td class="formfield"><h6 onclick="addrow('+"'table"+rowCount+"'"+')"><a href="#">Add row</a></h6></td></tr></table></td></tr> </table></td>';
All these codes are working in chrome and firefox..
Upvotes: 3
Views: 7006
Answers (9)
shareef
Reputation: 9581
My problem was it worked in firefox and did not work in IE know am using multipe tables and forms inside each other ...
General solution
Use JQuery it can solve such issues between browsers in my case i faced this error and replaced with the $('#'+loc).html(ddl) line instead of innerHTML and it worked
function buildDDL(){
if (http_request.readyState == 4)
{
var ddl = http_request.responseText;
ddl = ddl.replace(/[\n]/g, '');
if(ddl != 'SESSION_EXPIRED'){
$('#'+loc).html(ddl);
//document.getElementById(loc).innerHTML = ddl;
}else{
location.href = 'errorPage.jsp?status='+ddl;
}
http_request = false;
}
}
If you're wondering about functionality, then jQuery's html() performs the same intended functionality as innerHTML, but it also performs checks for cross-browser compatibility.
For this reason, always use jQuery's html() instead of innerHTML where possible.
Upvotes: 0
Sarin Jacob Sunny
Reputation: 2138
I have created a script through which you can add inner tables into a column of the table.
I have used the concepts of @DragonPrince and @Bui Cuong for devoloping my answer.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script language="javascript">
function addtabletesting(tableID) {
var table1 = document.getElementById(tableID);
var rowCount1 = table1.rows.length;
var row1 = table1.insertRow(rowCount1-1);
var td1 = document.createElement("TD");
/*
creating a new row row1 andadded a column td1
*/
var table2= document.createElement("TABLE");
var rowCount2 = table2.rows.length;
var row2 = table2.insertRow(rowCount2);
var td2 = document.createElement("TD");
/*
Created a new table table2 added row2 and td2.
*/
td2.innerHTML = "<h4>my new column in new inner table </h4>";
row1.appendChild(td1);
td1.appendChild(table2);
row2.appendChild(td2);
/*
Added td1 into row1, table2 into td1, and td2 into row2.
*/
}
</script>
</head>
<body>
<table id="testtable1" border="1">
<tr><td width="150">old table row 1 column 1</td></tr>
<tr><td>old table row 2 column 1</td></tr>
<tr><td> <a onclick="addtabletesting('testtable1')" >Add table</a> </td></tr>
</table>
</body>
</html>
Check it. Currently its just simply adding a inner table only. You can modify it so that you will be able to make it as you want.
Check the following detailed answer.
Body part
<body>
<br/>
<a onclick="show_prompt()" >Add Multiple Companies</a>
<br/>
<table border="0" align="left" class="totalbodycontainer"> <%-- table in which entire body content is written --%>
<tr>
<td class="totalbodycontainer">
<div class="boxdiv" align="center" >
<div class="formmainheader" > <h2 >Add Company</h2> </div>
<form action="registration" >
<table id="sarinaddrow" border="0" align="center"><tr><td>
<table width="200" border="1" class="tableborder" align="center">
<tr class="rowdiv"> <td width="799" class="formheader" ><h4> Comany Details</h4></td></tr>
<tr>
<td width="799">
<table id="table1" width="792" border="0">
<tr class="rowdiv">
<td width="170" class="formlabel"><h4> Company ID </h4></td>
<td width="205" class="formfield"> </td>
<td width="20" class="formgap"></td>
<td width="170" class="formlabel"><h4> Company Name </h4></td>
<td width="205" class="formfield"><input type="text" name="type" id="type" size="30" />
</td>
</tr>
<tr class="rowdiv">
<td width="170" class="formlabel"><h4>Address </h4></td>
<td width="205" class="formfield"><textarea name="textarea" id="textarea" cols="28" rows="2"></textarea></td>
<td width="20" class="formgap"></td>
<td width="170" class="formlabel"><h4>Phone Number </h4></td>
<td width="205" class="formfield"><h6>
<input type="text" name="type2" id="type2" size="30"/>
</h6></td>
</tr>
<tr class="rowdiv">
<td width="170" class="formlabel"><h4>Fax Number </h4></td>
<td class="formfield"><input type="text" name="type3" id="type3" size="30"/></td>
<td class="formgap"></td>
<td width="170" class="formlabel"><h4>E Mail </h4></td>
<td class="formfield"><input type="text" name="type5" id="type5" size="30"/></td>
</tr>
<tr class="rowdiv">
<td class="formlabel"><h4>Web Site </h4></td>
<td class="formfield"><input type="text" name="type7" id="type7" size="30"/></td>
<td class="formgap"></td>
<td class="formlabel"> </td>
<td class="formfield"> </td>
</tr>
<tr class="rowdiv">
<td class="formlabel"><h4>Product Type </h4></td>
<td class="formfield"><input type="text" name="type7" id="type8" size="30"/></td>
<td class="formgap"></td>
<td class="formlabel"><h4>Description </h4></td>
<td class="formfield"><textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea></td>
</tr>
<tr class="rowdiv">
<td width="170" class="formlabel"> </td>
<td class="formfield"> </td>
<td class="formgap"></td>
<td class="formlabel"> </td>
<td class="formfield"><h6><a onclick="addproduct('table1')">Add product</a></h6></td>
</tr>
</table>
</td></tr> </table>
</td></tr>
<tr> <td class="formlabel"><h6 ><a onclick="addcompany('sarinaddrow',1)">Add Company</a></h6></td></tr> </table>
</form>
<p></p>
</div></td></tr></table>
</body>
Scripts
<script language="javascript">
var sarintableno=1;
function addpolicy(tableID) {
try{
var mystring=null;
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row1 = table.insertRow(rowCount-1);
var td1 = document.createElement("TD"); //td1
td1.className="formlabel";
td1.innerHTML='<h4>Product Type </h4>';
row1.appendChild(td1);
var td2 = document.createElement("TD"); //td2
td2.className="formfield";
mystring='<input type="text" name="type7" id="type8" size="30"/>';
td2.innerHTML=mystring;
row1.appendChild(td2);
var td3 = document.createElement("TD"); //td3
td3.className="formgap";
row1.appendChild(td3);
var td4 = document.createElement("TD"); //td4
td4.className="formlabel";
td4.innerHTML='<h4>Description </h4>';
row1.appendChild(td4);
var td5 = document.createElement("TD"); //td5
td5.className="formfield";
mystring='<textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea>';
td5.innerHTML=mystring;
row1.appendChild(td5);
}catch(e) {
alert(e);
}
}
function addcompany(tableID,companyno) {
try{
var xxx=0; var mytext1=null;
for( xxx=0;xxx<companyno;xxx++ ){
sarintableno++;
var table1 = document.getElementById(tableID); // t1
var rowCount1 = table1.rows.length;
var row1 = table1.insertRow(rowCount1-1); //add tr1
var td1 = document.createElement("TD"); //add td1
row1.appendChild(td1);
var table2= document.createElement("TABLE");//t2
td1.appendChild(table2);
var rowCount2 = table2.rows.length;
var row2 = table2.insertRow(rowCount2); //tr2
var td2 = document.createElement("TD"); //td2
row2.appendChild(td2);
rowCount2 = table2.rows.length;
var row3 = table2.insertRow(rowCount2); //tr3
var td3 = document.createElement("TD"); //td3
row3.appendChild(td3);
var table3= document.createElement("TABLE");//t3
td3.appendChild(table3);
var rowCount3 = table3.rows.length;
var row4 = table3.insertRow(rowCount3); //tr4
var td4 = document.createElement("TD"); //td4
row4.appendChild(td4);
var td5 = document.createElement("TD"); //td5
row4.appendChild(td5);
var td6 = document.createElement("TD"); //td6
row4.appendChild(td6);
var td7 = document.createElement("TD"); //td7
row4.appendChild(td7);
var td8 = document.createElement("TD"); //td8
row4.appendChild(td8);
var rowCount3 = table3.rows.length;
var row5 = table3.insertRow(rowCount3); //tr5
var td9 = document.createElement("TD"); //td9
row5.appendChild(td9);
var td10 = document.createElement("TD"); //td10
row5.appendChild(td10);
var td11 = document.createElement("TD"); //td11
row5.appendChild(td11);
var td12 = document.createElement("TD"); //td12
row5.appendChild(td12);
var td13 = document.createElement("TD"); //td13
row5.appendChild(td13);
var rowCount3 = table3.rows.length;
var row6 = table3.insertRow(rowCount3); //tr6
var td14 = document.createElement("TD"); //td14
row6.appendChild(td14);
var td15 = document.createElement("TD"); //td15
row6.appendChild(td15);
var td16 = document.createElement("TD"); //td16
row6.appendChild(td16);
var td17 = document.createElement("TD"); //td17
row6.appendChild(td17);
var td18 = document.createElement("TD"); //td18
row6.appendChild(td18);
var rowCount3 = table3.rows.length;
var row7 = table3.insertRow(rowCount3); //tr7
var td19 = document.createElement("TD"); //td19
row7.appendChild(td19);
var td20 = document.createElement("TD"); //td20
row7.appendChild(td20);
var td21 = document.createElement("TD"); //td21
row7.appendChild(td21);
var td22 = document.createElement("TD"); //td22
row7.appendChild(td22);
var td23 = document.createElement("TD"); //td23
row7.appendChild(td23);
var rowCount3 = table3.rows.length;
var row8 = table3.insertRow(rowCount3); //tr7
var td24 = document.createElement("TD"); //td24
row8.appendChild(td24);
var td25 = document.createElement("TD"); //td25
row8.appendChild(td25);
var td26 = document.createElement("TD"); //td26
row8.appendChild(td26);
var td27 = document.createElement("TD"); //td27
row8.appendChild(td27);
var td28 = document.createElement("TD"); //td28
row8.appendChild(td28);
var rowCount3 = table3.rows.length;
var row9 = table3.insertRow(rowCount3); //tr7
var td29 = document.createElement("TD"); //td24
row9.appendChild(td29);
var td30 = document.createElement("TD"); //td25
row9.appendChild(td30);
var td31 = document.createElement("TD"); //td26
row8.appendChild(td31);
var td32 = document.createElement("TD"); //td27
row9.appendChild(td32);
var td33 = document.createElement("TD"); //td28
row9.appendChild(td33);
/* styles and inner htmls */
table2.className="tableborder";
table2.setAttribute("width","200");
table2.setAttribute("border","1");
table2.setAttribute("allign","center");
row2.className="rowdiv";
td2.className="formheader";
td2.setAttribute("width","799");
td2.innerHTML="<h4>Comany Details</h4>";
td3.setAttribute("width","799");
table3.setAttribute("width","792");
table3.setAttribute("border","0");
table3.setAttribute("id","table"+sarintableno);
row4.className="rowdiv";
td4.className="formlabel";
td4.setAttribute("width","170");
td4.innerHTML="<h4>Company ID </h4>";
td5.className="formfield";
td5.setAttribute("width","205");
td5.innerHTML=" ";
td6.className="formgap";
td6.setAttribute("width","20");
td7.className="formlabel";
td7.setAttribute("width","170");
td7.innerHTML="<h4>Company Name </h4>";
td8.className="formfield";
td8.setAttribute("width","205");
td8.innerHTML='<input type="text" name="type" id="type" size="30" />';
row5.className="rowdiv";
td9.className="formlabel";
td9.setAttribute("width","170");
td9.innerHTML="<h4>Address </h4>";
td10.className="formfield";
td10.setAttribute("width","205");
td10.innerHTML='<textarea name="textarea" id="textarea" cols="28" rows="2"></textarea>';
td11.className="formgap";
td11.setAttribute("width","20");
td12.className="formlabel";
td12.setAttribute("width","170");
td12.innerHTML="<h4>Phone Number </h4>";
td13.className="formfield";
td13.setAttribute("width","205");
td13.innerHTML='<h6><input type="text" name="type2" id="type2" size="30"/></h6>';
row6.className="rowdiv";
td14.className="formlabel";
td14.setAttribute("width","170");
td14.innerHTML="<h4>Fax Number </h4>";
td15.className="formfield";
td15.setAttribute("width","205");
td15.innerHTML='<input type="text" name="type3" id="type3" size="30"/>';
td16.className="formgap";
td16.setAttribute("width","20");
td17.className="formlabel";
td17.setAttribute("width","170");
td17.innerHTML="<h4>E Mail </h4>";
td18.className="formfield";
td18.setAttribute("width","205");
td18.innerHTML='<input type="text" name="type5" id="type5" size="30"/>';
row7.className="rowdiv";
td19.className="formlabel";
td19.setAttribute("width","170");
td19.innerHTML="<h4>Web Site </h4>";
td20.className="formfield";
td20.setAttribute("width","205");
td20.innerHTML='<input type="text" name="type7" id="type7" size="30"/>';
td21.className="formgap";
td21.setAttribute("width","20");
td22.className="formlabel";
td22.setAttribute("width","170");
td22.innerHTML="<h4> </h4>";
td23.className="formfield";
td23.setAttribute("width","205");
td23.innerHTML=' ';
row8.className="rowdiv";
td24.className="formlabel";
td24.setAttribute("width","170");
td24.innerHTML="<h4>Product Type </h4>";
td25.className="formfield";
td25.setAttribute("width","205");
td25.innerHTML='<input type="text" name="type7" id="type8" size="30"/>';
td26.className="formgap";
td26.setAttribute("width","20");
td27.className="formlabel";
td27.setAttribute("width","170");
td27.innerHTML="<h4>Description </h4>";
td28.className="formfield";
td28.setAttribute("width","205");
td28.innerHTML='<textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea>';
row9.className="rowdiv";
td29.className="formlabel";
td29.setAttribute("width","170");
td29.innerHTML=" ";
td30.className="formfield";
td30.setAttribute("width","205");
td30.innerHTML=' ';
td31.className="formgap";
td31.setAttribute("width","20");
td31.innerHTML=" ";
td32.className="formlabel";
td32.setAttribute("width","170");
td32.innerHTML=" ";
td33.className="formfield";
td33.setAttribute("width","205");
mytext1='<h6><a onclick="addproduct('+"'table"+sarintableno+"'"+');">Add product</a></h6>';
td33.innerHTML=mytext1;
}
}catch(e) {
alert(e);
}
}
function show_prompt()
{
var name=prompt("Please enter the number of companies ","2");
if (name!=null && name!="")
{
addcompany('sarinaddrow',name);
}
}
</script>
Upvotes: 1
Bui Cuong
Reputation: 149
try this. It should works. I tested in both IE and Firefox:
function addrow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount - 1);
var td1 = document.createElement("TD");
td1.innerHTML = "<h4>Type </h4>";
var td2 = document.createElement("TD");
td2.innerHTML='<input type="text" name="type7" id="type8" size="30"/>';
var td3 = document.createElement("TD");
td3.innerHTML = '<h4>Description </h4>';
var td4 = document.createElement("TD");
td4.innerHTML = '<textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea>';
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
}
Upvotes: 1
DragonPrince
Reputation: 61
For IE while creating a table dynamically u must always create a table row
document.createElement('tr');
Had de same issue once. It got solved once i added this
Upvotes: 1
Oybek
Reputation: 7243
Never ever! Never use this kind of approach. This is very incorrect to concat a string and append as innerHTML. The better way is to use the native JavaScript DOM api for dom manipulation.
Here the example of a working fiddle.
EDIT
I've tested it in IE9 but it should work in other IE versions too. The reason you cannot do it is that XHTML specification prohibit modifying the innerHTML property of certain tags. One of them is select tag. You cannot modify the internal options with innerHTML. As I see this is applicable to table either.
Starting here, this is a very good point to refer to some library that has established itself as reliable dom manipulator. For example jQuery.
If you want something to be done well, do it using jQuery.
Upvotes: 1
Rob W
Reputation: 348972
This error shows up, because several elements' innerHTML property, including <tr> are read-only [source] (Tested in IE 6-8). To solve this issue, the best way is to use the insertCell method:
An universal "lazy" method: (demo: http://jsfiddle.net/VLjhW/2/)
// Variables mystring2, rowCount and table as defined in the question.
var tmp = document.createElement('div'); // <-- Placeholder
tmp.innerHTML = '<table><tr>' + mystring2 + '</tr></table>';
var row = tmp.firstChild.rows[0]; // <-- Created "real" row
var newrow = table.insertRow(table.rows.length); // <-- New dummy row
newrow.parentNode.replaceChild(row, newrow); // <-- Replace dummy with real row
Another method:
Demo: http://jsfiddle.net/VLjhW/
// Array of innerHTML properties for each cell
var cells = ['<h4>Type </h4>',
'<input type="text" name="type7" id="type8" size="30"/>',
'',
'<h4>Description </h4></td>',
'<textarea name="textarea2" id="textarea2" cols="28" rows="2"></textarea>'];
// Array of `class=` attributes for each cell
var cellClasses = ['formlabel', 'formfield', 'formgap', 'formlabel', 'formfield'];
var table = document.getElementById('t1'); // <-- table
var tr = table.insertRow(table.rows.length-1); // <-- Last row
for (var i=0; i<cells.length; i++) {
var td = tr.insertCell(i); // <-- Insert cell
td.className = cellClasses[i]; // <-- Set class attribute
td.innerHTML = cells[i]; // <-- Set innerHTML
}
Upvotes: 4
Amit
Reputation: 388
You can try creating a div in the row and try setting this HTML to div's HTML. So if the div with unique id can be created then you can easily update its content by changing its innerHTML.
Upvotes: 1
Ravindra Gullapalli
Reputation: 9158
you can use innerText like this
try{
row.innerHTML =mystring1;
}catch(e){
row.innerText =mystring1;
row.style.display='table-row';
}
Upvotes: 0
Anthony Grist
Reputation: 38345
As I commented on your other, related question: IDs on elements need to be unique. It's possible that Internet Explorer is refusing to set the innerHTML because you'd end up with DOM elements with IDs that aren't unique, whereas Firefox and Chrome aren't being quite so restrictive.
Upvotes: 1
Related Questions
- unable to set property 'innerHTML' of undefined or null reference. IE
- Why am I getting this Javascript runtime error?
- IE innerHTML error
- Why does IE give unexpected errors when setting innerHTML
- IE Error : Unable to set value of the property 'innerHTML': object is null or undefined
- document.getElementById().innerHTML fails with 'Unknown Error' in IE
- Internet Explorer innerHTML "Object doesn't support this property or method"
- javascript error in IE
- JS Error in Internet Explorer
- How to insert javascript using innerHTML (ie6 is giving me a unknown runtime error)