Indicatore di caricamento su Ajax sincrono

Question

Sto usando un jax con jQuery sul mio sito e devo mostrare un indicatore di avanzamento/caricamento.

Il mio dilemma è questo:

• sincrono AJAX blocca il browser, in modo da non posso fare nulla (ad esempio, mostrano un indicatore di carico) fino i contenuti vengono restituiti, quando ormai è troppo tardi
• I sto usando JSON come il tipo di dati di ritorno e l'impostazione asincrone = true restituisce una stringa vuota risposta
• tutto il mio quadro si basa sul tipo di ritorno essendo formato JSON

non riesco trovare un modo per far sì che JS fornisca all'utente l'indicazione che qualcosa è in corso, tranne che per fare un avviso(). (Per qualche motivo un avviso funziona).

Qualche suggerimento?

Il mio codice:

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

Hai bisogno di mostrare un display di carico prima di chiamare la richiesta AJAX ed è possibile utilizzare la funzione di callback e success a nascondi un display di caricamento

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

prima di chiamare la funzione ajax, perché è possibile interrompere la visualizzazione del display di caricamento perché mentre è in corso l'animazione $(".loading").show(); verrà chiamata la richiesta di sincronizzazione Ajax e sicuramente il browser verrà bloccato prima del caricamento l'animazione di visualizzazione sarà completata

Answer 2

È possibile utilizzare i gestori di eventi Ajax Global Jquery. Questo collegamento li descrive in dettaglio: utilizzare

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

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

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

Answer 3

Hi qualche cosa del genere per ottenere un posto in Magento ....

Questa è l'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> 

E questo il 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); 
    } 
});