Reputation:
I am unable to call loader on my ajax jQuery call.
I want to show loader when my ajax calls an api and hide when ajax completes the api call.
I have 2 JavaScript files for that.
1 is main signin.js in which I have call ajax method
_signin.SignIn = function () {
debugger;
var obj = {};
obj.user_name = $("#email").val();
obj.password = $("#password").val();
CallSignIn(user, 'signin', obj, _signin.onsuccesssignin, '');
};
2 is that call above CallSignIn method
function CallSignIn(baseUrl, strUrl, strData, onSuccess, onFailure) {
debugger;
strUrl = baseUrl + strUrl;
$.ajax({
type: 'POST',
url: strUrl,
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: JSON.stringify(strData),
async: false,
success: onSuccess,
complete: function(){
$('.pageloader').hide();
},
error: function (err) {
$(".pageloader").hide();
swal({
title: "Something Wents Wrong", text: "", type: "error",
showCancelButton: false, closeOnConfirm: true, confirmButtonText: "OK",
}, function (isConfirm) {
});
console.log(err);
}
});
}
And I have put my loader element in starting of my signin.cshtml
<div class="pageloader">
<div class="section-loader">
<div class="loaderNew">
<div class="loader-imgNew"></div>
</div>
</div>
</div>
Can someone help me to find a solution?
Upvotes: 0
Views: 496
Reputation: 1477
Try this with your html inside append()
, It's just an example...
function blockUI(){
$('body').append('<div class="blockUI-overlay" style="position: fixed;width: 100%;height: 100vh;top: 0;background: rgba(0, 0, 0, 0.34);cursor: progress;"></div>');
}
function removeblockUI(){
$('.blockUI-overlay').remove();
}
//Call anywhere in your file with ajax request
$(document).on('click','.yourClassname',function(){
blockUI();
$.ajax({
url:'yourURL',
type:'post',
success:function(data){
alert('hye');
removeblockUI();
},
error:function(){
alert("Bye");
removeblockUI();
},
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" class="yourClassname">abc</a>
Upvotes: 1
Reputation: 261
While I'm not exactly sure what you are doing here, maybe try and make the div hidden(hidden="hidden") and then do a show when the function is first called..
$(".pageloader").show();
That way when the method is first executed, it will show the div, then when it completes it will hide it...
Upvotes: 0
Reputation: 26
You can define the behaviour on an object like:
var wait= (function () {
var waitDiv = $('<div class="modal" id="waitDialog" data-backdrop="static" data-keyboard="false"><div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="wait"></div></div></div></div>');
return {
showWait: function() {
waitDiv.modal();
},
hideWait: function () {
waitDiv.modal('hide');
},
};
})();
use it with wait.showWait() and wait.hideWait();
jQuery needed, but i think you are already using it :)
Edit: Sorry, my example is based on bootstrap...
Upvotes: 0
Reputation: 11598
You can use beforeSend
function of $.ajax
$.ajax({
type: 'POST',
url: strUrl,
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: JSON.stringify(strData),
async: false,
beforeSend: function(){
$('.pageloader').show(); // here it is
}
success: onSuccess,
complete: function(){
$('.pageloader').hide();
},
error: function (err) {
$(".pageloader").hide();
swal({
title: "Something Wents Wrong", text: "", type: "error",
showCancelButton: false, closeOnConfirm: true, confirmButtonText: "OK",
}, function (isConfirm) {
});
console.log(err);
}
});
Upvotes: 0
Reputation: 82
if you are show ".pageloader' in .css file, just make it in 'display:none', after that once user click button on signin just show by calling like "$('.pageloader').show();", this this below code:
_signin.SignIn = function () {
$('.pageloader').show();
var obj = {};
obj.user_name = $("#email").val();
obj.password = $("#password").val();
CallSignIn(user, 'signin', obj, _signin.onsuccesssignin, '');
};
Upvotes: 0