CODEWITHSUNDEEP
javascriptjqueryajax
Dinshaw Raje
Dinshaw Raje

Reputation: 963

How to disable a page on ajax request

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.

Upvotes: 3

Views: 8278

Answers (2)

Dhaval Bharadva
Dhaval Bharadva

Reputation: 3083

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

Upvotes: 10

A Biswas
A Biswas

Reputation: 431

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.

Upvotes: 0

Related Questions