jquery ajax loading div not working in IE & Chrome

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

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 2

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();
    }​