Looking for Workaround Firefox Table Redraw Bug

arnoschaefer · Oct 20, 2007

Hi,

Firefox does not correctly redraw a table when a table cell is expanded after receiving an onchange-event from a select box in the same table row (see example code).

Is there a workaround to force a redraw?

Best Regards,

Arno

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>test</title>
<script type="text/javascript" language="JavaScript">
function addvalue () {
target = document.getElementById ("foo");
target.appendChild (document.createTextNode ("some text"));
target.appendChild (document.createElement ("br"));
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<form action="#" method="post">
<select name="test1" onchange="addvalue();">
<option value="1">foo</option>
<option value="2">bar</option>
</select>
</form>
</td>
<td width="100" id="foo">
</td>
</tr>
<tr>
<td>
<form action="#" method="post">
<select name="test2" onchange="addvalue();">
<option value="1">foo</option>
<option value="2">bar</option>
</select>
</form>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>

j4606 · Oct 22, 2007

try making it draw.. this works for me

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>test</title>
<script type="text/javascript" language="JavaScript">
function addvalue () {
    trtarget = document.getElementById ("foo");
    tdtarget = document.getElementById ("bar");
    tdtarget.appendChild (document.createTextNode ("some text"));
    tdtarget.appendChild (document.createElement ("br"));
	trtarget.innerHTML = trtarget.innerHTML;

}
</script>
</head>
<body>
    <table border="1">
    	<tr id="foo">
         <td>
	        <form action="#" method="post">
	             <select name="test1" onchange="addvalue();">
	                <option value="1">foo</option>
	   	            <option value="2">bar</option>
	             </select>
	         </form>
            </td>
            <td width="100" id="bar">

            </td>
        </tr>
        <tr>
            <td>
                <form action="#" method="post">
                    <select name="test2" onchange="addvalue();">
                        <option value="1">foo</option>
                        <option value="2">bar</option>
                    </select>
                </form>
            </td>
            <td>
            </td>
        </tr>
    </table>
</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Looking for Workaround Firefox Table Redraw Bug

arnoschaefer

Programmer

j4606

MIS

Similar threads

Part and Inventory Search

Sponsor