Here's what I tried.
I have copied the code from my page and cleaned it up so I only have
one form field and my ajax call.
Here is the code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-
type" />
<title>Simple IE Ajax Test</title>
<script src="jquery.js" type="text/javascript"></script> <!--
jQuery -->
<script src="firebug/firebug.js" type="text/javascript"></script>
<!-- Firebug -->
<!-- AJAX Username Availability Script -->
<script type='text/javascript'>
<!--
$.ajaxSetup({timeout: 3000});
$(document).ready(function(){
// Execute the checkUsername on onBlur event
$("#txtUserName").blur(
function() {
checkUsername();
});
});
// This will check if the username is already used by another
user.
function checkUsername() {
var username = "";
var previous_username = "";
var in_ajax;
// Removed Ajax result
$("#username_status").html("");
// If there is already a validation error, don't bother with
username verification
if( $("#txtUserName").parent(".error").length > 0 )
return;
username = $("#txtUserName").val();
if ((previous_username != username) && (username != '') &&
(in_ajax != 1)) {
in_ajax = 1;
$("#username_status").html("<img src='images/ajax/
loading.gif' border='0' valign='middle' alt='Loading...' />");
try {
$.ajax({
type: "GET",
data: {txtUserName: username},
url: "http://server/AJAXCheckUsername.jsp?time="; +
(new Date()).getTime(),
timeout: 5000,
success: function(data) {
in_ajax = 0;
if( data == "Available" ) {
$("#username_status").html('<img
src="images/ajax/accept.png" border="0" alt="Available"
style="vertical-align: middle;" /> Username is Available!');
$
("#txtUserName").parent().removeClass("error");
} else if( data == "Not Available" ) {
$("#username_status").html('<img
src="images/ajax/cross.png" border="0" alt="Not Available"
style="vertical-align: middle;" /> Sorry. This username is already
taken.');
$
("#txtUserName").parent().addClass("error");
} else {
$("#username_status").html('<img
src="images/ajax/error.gif" border="0" alt="Error" style="vertical-
align: middle;" /> An Error Has OOOccured!');
$
("#txtUserName").parent().addClass("error");
}
},
//error: function(xhr,err,e) {
// //$("#username_status").html('An Error
has occured. Please retry.');
// $("#username_status").html('Error : ' +
err);
// console.log("Error : " + err );
// }
error: function(object, msg) {
//$("#username_status").html('An Error has
occured. Please retry.');
$("#username_status").html('Error : ' +
msg);
}
});
} catch(error) {
null;
}
}
previous_username = username;
}
//-->
</script>
<!-- END AJAX Username Availability Script -->
</head>
<body>
Simple IE Ajax Test<br />
<form id="frmGeneral" name="frmGeneral" action="" method="post"
class="uniForm">
<fieldset class="inlineLabels">
<legend>Login Information</legend>
<div class="ctrlHolder">
<label for="txtUserName"><em>*</em> Username</label>
<input name="txtUserName" id="txtUserName" value=""
size="20" maxlength="25" type="text"/>
<div class="rightSection" id="username_status">
<span style="font-family : 'Verdana'; font-size : 8pt;
font-weight: bold;"></span>
</div>
<p class="formHint">
Note: At least 6 characters long.<br>Only letters,
numbers, _ and .
</p>
</div>
</fieldset>
</form>
<!-- end frmGeneral -->
</body>
</html>
As you can see, it's pretty simple now. In FF it works fine, no
errors. However, in IE I get the error: function part executed and
the msg value is "error".
My questions :
1) Am I doing the error: function() part correctly ?
2) How can I catch the real exception error message (something that
will help me get somewhere) ? I tried with the error:
function(xhr,err,e) syntax and always get the "error" message in IE.
Thanks for your help !!!
0xCAFE
