CODEWITHSUNDEEP
javascriptjqueryajax
user8718405
user8718405

Reputation:

How can I show loader while using ajax jquery

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

Answers (5)

Ankit Singh
Ankit Singh

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

kingtreelo
kingtreelo

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

Dennis G.
Dennis G.

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

Paritosh
Paritosh

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

Kamal Raj
Kamal Raj

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

Related Questions