3

Hi my requirement is show loading spinner and page get disable and non clickable when ajax request is send for this I have included given code

$('#expressShippingCalculation input').change ->
if $('#shipping_method4').is(':checked')
  additionalAmountExpress()
  data = $('#shippingDetails').serialize()
  expressValue = true
else 
  $('#additional-charge').hide()
  expressValue = false
$.ajax
  url: '/update_express_shipping?expressShipping=' +expressValue
  type: 'PATCH'
return

$(document).ajaxStart ->
  $('#spinner').show()
  return
$(document).ajaxComplete ->
  $('#spinner').hide()
  return
$(document).ajaxError ->
  $('#spinner').hide()
  return

with the above code snippet ajax loader is working but my page does not get disable when spinner is loading. Please guide me how to disable page when ajax is loading.

Dinshaw Raje
  • 933
  • 1
  • 12
  • 33
  • add `async:true` to ajax options; it will block page; – itzmukeshy7 Apr 08 '16 at 09:55
  • 1
    You may refer [this](http://stackoverflow.com/questions/1964839/how-can-i-create-a-please-wait-loading-animation-using-jquery) post for detail. It works for me. – The KNVB Apr 08 '16 at 09:57
  • 1
    @itzmukeshy7 `async: false` is deprecated as of jQuery 1.8. OP should use an overlay to block all UI except for the spinner. There's even a plugin for it if you don't want to roll your own: http://malsup.com/jquery/block/ – Andy Apr 08 '16 at 09:58

2 Answers2

10

Here is the sample code for displaying spinner until ajax response:

HTML Spinner code: 

<div id="loading-overlay">
    <div class="loading-icon"></div>
</div>

CSS: 

#loading-overlay {
    position: absolute;
    width: 100%;
    height:100%;
    left: 0;
    top: 0;
    display: none;
    align-items: center;
    background-color: #000;
    z-index: 999;
    opacity: 0.5;
}
.loading-icon{ position:absolute;border-top:2px solid #fff;border-right:2px solid #fff;border-bottom:2px solid #fff;border-left:2px solid #767676;border-radius:25px;width:25px;height:25px;margin:0 auto;position:absolute;left:50%;margin-left:-20px;top:50%;margin-top:-20px;z-index:4;-webkit-animation:spin 1s linear infinite;-moz-animation:spin 1s linear infinite;animation:spin 1s linear infinite;}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

AJAX: 

$.ajax({
        url: "YOUR PATH"
        type: "PATCH",
        data: "YOUR DATA HERE",
        beforeSend: function(){
            $("#loading-overlay").show();
        },
        success: function (data, textStatus, jqXHR) {
            $("#loading-overlay").hide();
        },
        error: function (jqXHR, textStatus, errorThrown) {
            $("#loading-overlay").hide(); 
            alert("something went wrong");
        }
    });
Dhaval Bharadva
  • 3,053
  • 2
  • 24
  • 35
  • Consider adding `complete:function(){$("#loading-overlay").hide();}` too or add `$("#loading-overlay").hide();` to `error:function(){}`; – itzmukeshy7 Apr 08 '16 at 09:57
  • For those who wants a modal for ajax calls to work for whole screen not just the viewport, use ``position:fixed;`` instead of ``position:absolute;`` – Mycodingproject Oct 06 '19 at 14:55
0

You can add an "overlay" element which covers the entire screen and whose visible property is set to false and it's get enabled on ajax start.

A Biswas
  • 421
  • 6
  • 12