I am using jQuery ajax version 1.4.1 in my MVC application (though the issue I am discussing was same with the old jQuery version 3.2.1) as well, to check during customer registration if the username is already registered. As the user clicks on the "Check Availibility" button, I am showing a busy image in place of the check button (actually hiding the check button and showing the image) while checking the availibility on the server and then displaying a message. It is a Sync call (async: false) and I used beforeSend: and complete: to show and hide the busy image and the check button. This thing is working well on Firefox but in IE 8 and Chrome, neither the busy image appear nor the check button hides rather the check button remained pressed as the whole thing has hanged. The available and not available messages appear correctly though. Below is the code:
HTML in a User Control (ascx):
(i have replaced the angular braces with square below)
[div id="available"]This Username is Available
[div id="not_available"]This Username is not available
[input id="txtUsername" name="txtUsername" type="text" size="50" /]
[button id="check" name="check" type="button"]Check Availability[/button]
[img id="busy" src="/Content/Images/busy.gif" /]
On the top of this user control, I am linking an external javascript file that has the following code:
$(document).ready(function() {
$('img#busy').hide();
$('div#available').hide();
$('div#not_available').hide();
$("button#check").click(function() {
var available = checkUsername($("input#txtUsername").val());
if (available == "1") {
$("div#available").show();
$("div#not_available").hide();
}
else {
$("div#available").hide();
$("div#not_available").show();
}
});
});
function checkUsername(username) {
$.ajax({
type: "POST",
url: "/SomeController/SomeAction",
data: { "id": username },
timeout: 3000,
async: false,
beforeSend: function() {
$("button#check").hide();
$("img#busy").show();
},
complete: function() {
$("button#check").show();
$("img#busy").hide();
},
cache: false,
success: function(result) {
return result;
},
error: function(error) {
$("img#busy").hide();
$("button#check").show();
alert("Some problems have occured. Please try again later: " + error);
}
});
}