Internet Explorer showing flickering effect when updating html form after submit
I have the following html/php/javascript code:
<?php
$textBox1 = $_POST["textBox1"];
?>
<html>
<head>
</head>
<body>
<table border="0" cellpadding="2" cellspacing="2" align="center" bgcolor="#996ad6">
<form method="post" action="<?php echo $PHP_SELF;?>" name="form1">
<thead>
<tr><th> Title </th></tr>
</thead>
开发者_开发问答<tbody>
<tr>
<td align="left">
<textarea rows="8" cols="35" name="textBox1" textAlign="left" onKeyUp="changeVal()"><?php
if (isset($_POST['textBox1'])) {
echo $textBox1;
}
?></textarea><br />
</td>
<td align="left">
<textarea rows="8" cols="35" name="textBox2" wrap="physical" align="left"><?php
if (isset($_POST['textBox1'])) {
echo "hello ".$textBox1;
}
?></textarea><br />
</td>
</tr>
</tbody>
<script type="text/javascript" language="JavaScript">
s1 = new String(form1.textBox1.value)
var timer;
function changeVal() {
stoper();
timer = setTimeout ( "document.form1.submit()", 800 );
}
function stoper() {
clearTimeout(timer);
}
</script>
</form>
</table>
</body>
</html>
This works fine in Chrome and Firefox, but is causing some annoying flickering effect with Internet Explorer v8.0.
Is there any way to get rid of the flickering?
What this looks like is that you're posting the form and reloading the whole page if the user types anything and stop typing for more than 8 seconds.
I can see how this could cause the page to flicker. In fact, I'm surprised you haven't got worse problems than that - I would also expect it to lose the form field's focus and position when the page is refreshed, which would cause issues for the user (or at the very least, confusion).
A much better solution to this would be to implement it using an Ajax method, which allows you to submit and receive data via Javascript without having to refresh the page. You may want to read up on httpRequest, which is the object that you'd use in Javascript to do this. However, there's no need to re-invent the wheel, as there are a number of JS libraries available which do all the hard work for you. The most well known is JQuery, but there's plenty of others.
By the way (off topic, but worth mentioning):
$PHP_SELFis deprecated. You should use$_SERVER['PHP_SELF']instead.The HTML spec states that the
<head>section cannot be empty. At the very least, it must contain a<title>.
When you submit via the browser, the page is reloaded. Chrome and Firefox are fast enough on the redraw that you don't notice the reload, but IE isn't, it would seem.
To avoid the flickering of reloading, you will probably have to use javascript httpRequest to post the form values and to keep the two textareas in sync.
加载中,请稍侯......
精彩评论