jquery ajax loading div not working in IE & Chrome - ajax

Question

This has been asked many many times. But none of the solutions are working for me in IE and Chrome.
I basically want to show a loading image while ajax call is being made.
Following is what I'm trying.
function ws(){
showL();
var res=$.ajax({url:'webservice.asp?service=LoadingTestSRV',async:false,cache:false}).responseText;
$('#dv').html(res);
hideL();
$('#complete').html('Done');
}
function showL()
{
$('#loading').show();
}
function hideL()
{
$('#loading').hide();
}
Following is the HTML
<table cellspacing="1" cellpadding="1" border="1">
<tr><td>
<input type="button" value="ckick" id="btn" onClick="ws();">
<input type="button" value="clear" onClick="$('#dv,#complete').html('');">
</td><td>
<div id="dv"></div>
</td></tr><tr>
<td>Here<div id="loading" style="display:none" >Loading.................</div></td>
<td>final<div id="complete"></div></td></tr>
</table>
After above js, I tried
ajaxStart and ajaxStop
$.ajaxSetup
$.ajax({...}).done(hideL)
All the js codes I tried are working in Firefox but none of them are working in IE and Chrome.
In Firefox, the code works as expected. Loading div gets shown, ajax is called, loading div gets hidden. This is exactly what I'm expecting.
In IE & Chrome, loading div doesn't show up. Maybe It's getting shown and hidden very fast after or before ajax call.
Please let me know what can be done to make the code work in IE & Chrome.
There has to be some workaround as I've seen other sites show loading div. Or maybe I'm doing something stupid.
Once the code is working in all browsers. I want to make a generic function (like a jQuery plugin) to show a loading div when ajax is being called.

Answer 1

try this:
This will ensure that ur DIV is hidden after the ajax call completes
function ws() {
showL();
var res ="";
$.ajax({
url: 'webservice.asp?service=LoadingTestSRV',
async: true,
cache: false,
success: function(data) {
res=data;
$('#dv').html(res);
hideL();
$('#complete').html('Done');
}
});
}
function showL() {
$('#loading').show();
}
function hideL() {
$('#loading').hide();
}​

Answer 2

This form has worked for me previously: (I put in the slow so you could see it if it is fast)
$('#loading').ajaxStart(function() {
$(this).show("slow");
}).ajaxComplete(function() {
$(this).hide("slow");
});
Test example of this here:
http://jsfiddle.net/MarkSchultheiss/xgFkw/

Answer 3

I do it this way try if it helps..
$.ajax({
beforeSend: function () {
$('#loadingDiv').show();
$('#accordion').hide()
},
complete: function () {
$('#loadingDiv').hide();
$('#accordion').show();
},
type: "GET",
url:
data: shallowEncodedData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (

Answer 4

There is a problem in your ajax call. Remove the async:false from ajax call and it will work even in IE8/9 and Chrome. For other Lost-souls, please do the above changes and try again.

Answer 5

simple just Add async=true in ajax function. It will work in chrome

Answer 6

My workaround for this issue in Chrome, use a timeout on the AJAX call of one millisecond.
E.g.
$("#mySpinningLoader").show();
var t = setTimeout(function () {
$.ajax({
url: rootPath + controllerNAction,
async: false,
type: "POST",
data: JSON.stringify(lightweightObject),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
$("#mySpinningLoader").hide();
}
});
}, 1);