BUG: Internet Explorer Stops Responding When You Dynamically Insert Table That Contains <Input Type="Button">

View products that this article applies to.

Symptoms

Internet Explorer generates an access violation and stops responding (crashes) when you dynamically insert a table that contains the following

into a Web page by updating the innerHTML of a div.

↑ Back to the top

Cause

This behavior can occur if a mouse event is pending and you wipe out the control that initiated the mouse event before the mouse event returns.

↑ Back to the top

Resolution

Workaround 1

Instead of redrawing the entire table every time, insert a single row at a time into the existing table. To do this, use the insertRow() and insertCell() methods.

Workaround 2

Replace

with the following tag:

↑ Back to the top

Status

Microsoft has confirmed that this is a bug in the Microsoft products that are listed at the beginning of this article.

↑ Back to the top

More information

The following is a sample page that quits or stops responding:

<html> 
<head> 
<script> 
var aRecords = new Array(); 
function Record( sText) 
{
        this.Text = String(sText); 
}  

function displayRecord() 
{ 
       var sDisp = '<table><tr><td>Text</td><td><input type="button" value="New" onClick="addNewRecord();"></td></tr>';
       for( var i=0; i<=aRecords.length-1; i++) 
       { 
               sDisp += '<tr><td>' + aRecords[i].Text + '</td><td ></td></tr>'; 
       } 
       sDisp += '</table>'; 
       document.getElementById("divRecord").innerHTML = sDisp; 
}  

function addNewRecord() 
{ 
       var i; 
       for( i=0; i<aRecords.length; i++) 
       { 
              aRecords[i].Active = false; 
       } 
       i = aRecords.length; 
       aRecords[i] = new Record( "#"+i+"."); 
       displayRecord(); 
} 
</script> 
</head> 
<body onload="displayRecord()"> 
       <div id="divRecord" style="background-color:#FFFF00;"><div> 
</body> 
</html>

Workaround 1 applied:

<html> 
<head> 
<script> 
var aRecords = new Array(); 
function Record( sText) 
{ 
        this.Text = String(sText); 
} 

function displayRecord() 
{ 
        var sDisp="";
        var i,sRow,sCol;
        if(window.event.srcElement.id=="button1")
        {
        i=aRecords.length-1;
		sDisp += aRecords[i].Text 
		sRow=table1.insertRow();
		sCol=sRow.insertCell();
		sCol.innerText=aRecords[i].Text;
		}	
}

function addNewRecord() 
{ 
        var i; 
        for( i=0; i<aRecords.length; i++) 
        { 
                aRecords[i].Active = false; 
        } 
        i = aRecords.length; 
        aRecords[i] = new Record( "#"+i+"."); 
        displayRecord(); 
} 
</script> 
</head> 
<body id=body1> 
        <div id="divRecord" style="background-color:#FFFF00;">
        <table id=table1><tr><td>Text</td><td>
        <input type="button" value="New" onClick="addNewRecord()" id=button1 name=button1>
        </td></tr></table><div> 
</body> 
</html>

Workaround 2 applied:

Replace the following line in displayRecord() function of the sample page:

<input type="button" value="New" onClick="addNewRecord();">

with:

<button name="button" onClick="addNewRecord();">New</button>

↑ Back to the top

References

For more information about developing Web-based solutions for Microsoft Internet Explorer, visit the following Microsoft Web sites:

http://msdn.microsoft.com/ie/

http://support.microsoft.com/iep

↑ Back to the top

Properties

Retired KB Content Disclaimer

This article was written about products for which Microsoft no longer offers support. Therefore, this article is offered "as is" and will no longer be updated.

↑ Back to the top