Loading Indicator on Synchronous Ajax

Question

I'm using ajax with jQuery on my site and need to show a progress / loading indicator.

My dilemna is this:

• Synchronous AJAX locks the browser, so I cant do anything (e.g. show a loading indicator) till the contents are returned, by which time it is too late
• I am using JSON as the return data type and setting async = true returns an empty response string
• my whole framework relies on the return type being JSON-formatted

I cannot seem to find any way to get JS to give the user an indication that something is in progress, except for doing an alert(). (For some reason an alert does work).

Any suggestions?

My code:

JS

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

} ); 

var html = jqXHR.responseText;

PHP

$return = array();
$return['status'] = 1;
$return['message'] = "some html here ...";
echo json_encode($return);

Answer 1

You need to show a loading display before calling the ajax request and 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

Answer 2

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

Answer 3

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