嗨,我的要求是显示加载微调器,并且在为此发送ajax请求时,页面会禁用并且不可点击,我已经提供了给定的代码
$('#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
上面的代码片段ajax loader可以正常工作,但是在微调器加载时我的页面没有被禁用。请指导我如何在加载Ajax时禁用页面。
这是显示微调器直到ajax响应的示例代码:
HTML Spinner代码:
<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");
}
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句