CODEWITHSUNDEEP
jqueryajaxjsonloadingsynchronous
little_edian
little_edian

Reputation: 121

Loading Indicator on Synchronous Ajax

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

My dilemna is this:

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

Upvotes: 9

Views: 30693

Answers (3)

open-ecommerce.org
open-ecommerce.org

Reputation: 1814

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

Upvotes: 2

Netorica
Netorica

Reputation: 19327

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

Upvotes: 20

Baahubali
Baahubali

Reputation: 4802

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

Upvotes: 10

Related Questions