Loading Indicator on Synchronous Ajax

You need to show a loading display before calling the ajax requestand you can use the callback function and success to hide a loading display

  //show here the loading display  $(".loading").show();  setTimeout(function() {    var jqXHR = $.ajax({        type: "POST",        url: url,         cache: false,        data: params, // array of parameters        async: false, // responseText is empty if set to true        dataType: 'json',        error: function(){               alert("Ajax post request to the following script failed: " + url);        },         success: function(){              //hide loading display here               $(".loading").hide();        }    });   }, 0);

well you need a delay using setTimeout() before calling the ajax function because it can even halt the display of the loading display because as while $(".loading").show(); is being animated the sync ajax request will be called and will surely lock the browser before the loading display animation will be completed

You can use the Jquery Global Ajax Event Handlers. This link describes them in detail:

http://api.jquery.com/category/ajax/global-ajax-event-handlers/

$(document).ajaxStart(function () {    $("#loading").show();});$(document).ajaxComplete(function () {    $("#loading").hide();});

Hi use some thing like that to get a post in magento....

This is the html

    <div class="popupNews">    <div class="popClose">X</div>        <div id="loading"><img src="<?php echo $this->getSkinUrl('images/loader.gif'); ?>" border="0" /></div>        <div id="result"></div>    </div></div>

And this the jquery

    var url = 'http://blabla.com/ajax';jQuery.ajaxSetup({    beforeSend:function(){        jQuery("#loading").show();    },    complete:function(){        jQuery("#loading").hide();    }});jQuery.ajax({    url: url,    type: 'POST',    data: {id: post},    success: function(data) {        jQuery("#result").html(data);    }});