animation not work in IE when jQuery ajax calling inside js function

I'm trying to show a div with gif animation inside when a button click via javascript call. But the problem is, it's working fine in firefox only. In IE and Chrome, the animation won't show up. I've tried debugging with alert("stop"); before and after the animation and it's indeed working, but after I removed the alert, it won't work anymore. Any suggestion please?

Here's the snippet for the TestPage.aspx:

<div id="animationDiv" style="display: none;">
    <img src="loading.gif" />
</div>
...
<div>
    <asp:Button ID="testButton" runat="server" Text="Test AJAX" OnClientClick="return testButtonClick();" />
</div>
...
<script type="text/javascript">
<!--
    var docWidth, docHeight;

    function testButtonClick() {
        var o_animationDiv = $("#animationDiv");

        o_animationDiv.width(docWidth);
        o_animationDiv.height(docHeight);
        o_animationDiv.show();

        $.ajax({
            type: "Post",
            url: "TestPage.aspx/TestAjax",
            async: false,
            cache: false,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: testAjaxSuccess,
            error: testAjaxError
        });

        function testAjaxSuccess(data, status, xhr) {
            // do something here
        };

        function testAjaxError(xhr, status, error) {
            // do something here
        };

        o_animationDiv.hide();

        return false;
    };

    $(document).ready(function () {
        docWidth = $(document).width();
        docHeight = $(document).height();
    });
//-->
</script>

Here's the snippet for TestPage.aspx.cs:

// using PageMethod for ajax
[System.Web.Services.WebMethod(EnableSession = true)]
public static string TestAjax()
{
    System.Threading.Thread.Sleep(5000); // 5 seconds

    // or do something else here
    // ie. if validation error, throw an exception

    return string.Empty;
}

UPDATE 1: added some javascript function

Answers


Why don't you call the .hide() on the post success:

$.ajax({
  type  : "Post",
  url   : "TestPage.aspx/TestAjax",
  cache : false,
  data  : "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(data) {

    // hide element when POST return as arrived,
    // meaning the "5 seconds" period has ended!
    o_animationDiv.hide();

  }
});

You can read about callback function at the jQuery documentation!


jQuery ajax is asynchronous, so that won't wait for ajax result to hide again.

 o_animationDiv.hide();
 o_animationDiv.show();

This lines work in serial and you can't see if it's working properly. So you should wait for ajax result to hide it.Try this,

  $.ajax({
            type: "Post",
            url: "TestPage.aspx/TestAjax",
            async: false,
            cache: false,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        }).done(function() {
            o_animationDiv.hide();
        });

UPDATE:

Sorry I missed the point that you create a synchronous ajax request. But there is a problem already. Most browsers lock itself when running a synchronous XHR. This also effects previous proccess sometimes.

Maybe if you use beforeSend, you can avoid this problem.

beforeSend

 A pre-request callback function that can be used to modify the jqXHR 
(in jQuery 1.4.x, XMLHTTPRequest) object before it is sent

Try this one,

$.ajax({
            type: "Post",
            url: "TestPage.aspx/TestAjax",
            async: false,
            cache: false,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend : function() {
               o_animationDiv.show();
            }
        }).done(function() {
            o_animationDiv.hide();
        });

UPDATE-2:

If that doesn't work, try this one,

...
o_animationDiv.width(docWidth);
o_animationDiv.height(docHeight);
o_animationDiv.show();

setTimeout(function() {
        $.ajax({
            type: "Post",
            url: "TestPage.aspx/TestAjax",
            async: false,
            cache: false,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: testAjaxSuccess,
            error: testAjaxError
        }).done(function() {
            o_animationDiv.hide();
        });
}, 600);

Need Your Help

Cordova / Sqlite foreign keys

sql sqlite cordova

I am trying to run a simple example using Cordova and sqlite

"npm install" only those modules that arent already installed globally

node.js npm install packages

Is there anyway to install dependencies which are not installed globally? For example: i got gulp installed globally, then I have some app with gulp inside package.json. When i run: