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



The information in this article applies to:

  • Microsoft Internet Explorer (Programming) 5.5
  • Microsoft Internet Explorer (Programming) 6.0

This article was previously published under Q298974

SYMPTOMS

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

<input type="button">

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

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.

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

<input type="button">

with the following tag:

<button></button>

STATUS

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

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>

				

REFERENCES

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

Modification Type:MajorLast Reviewed:5/11/2006
Keywords:kbbug kbIE550preSP2fix kbnofix KB298974