[jQuery] AJAX form not working in IE6
Hi,
I had been trying to use the form plugin and follow through its
example, got it working in FF but in IE got an error. I'm using jquery
1.2.3 and jquery form plugin 2.07.
It is a very simple page and I'm so frustrated as to why IE doesn't
work!!
Here are the sources:
The HTML (html-echo.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ajax test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="/firebug/firebug.js"></script>
<script type="text/javascript">
$().ajaxError(function(event, request, settings){
alert("<li>Error requesting page " + settings.url + "</li>");
console.log("Error requesting page " +settings.url);
});
// prepare the form when the DOM is ready
$(document).ready(function() {
// bind form using ajaxForm
$('#htmlForm').ajaxForm({
// target identifies the element(s) to update with the server
response
target: '#htmlExampleTarget',
// success identifies the function to invoke when the server
response
// has been received; here we apply a fade-in effect to the
new content
success: function() {
$('#htmlExampleTarget').fadeIn('slow');
}
});
});
</script>
</head>
<body>
<form id="htmlForm" action="/testing/ajax/html-echo.php"
method="post">
Message: <input type="text" name="message" value="Hello HTML" />
<input type="submit" value="Echo as HTML" />
</form>
<hr>
<div id="htmlExampleTarget"></div>
</body>
</html>
The PHP (html-echo.php):
<?php
echo '<div style="background-color:#ffa; padding:20px">' .
$_POST['message'] . '</div>';
?>
When run under FF, the whatever message is the input textbox gets
echoed in the div element below; but in IE I got the alert message
"Error requesting page /testing/ajax/html-echo.php"
I'd been searching through the archives but didn't find suitable
solution....
Could anyone please help me out here? Thank you!!