How can I show loader while using ajax jquery

Question

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?

Ajax has a beforeSend: function(){ here} api.jquery.com/jquery.ajax — Roy Bogado
– Roy Bogado, Commented Feb 16, 2018 at 10:24

Ankit Singh · Accepted Answer · 2018-02-16 10:37:00Z

1

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>

answered Feb 16, 2018 at 10:37

Ankit Singh

1,4871 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kamal Raj · Accepted Answer · 2018-02-16 10:28:12Z

0

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, '');
    };

answered Feb 16, 2018 at 10:28

Kamal Raj

825 bronze badges

Comments

Paritosh · Accepted Answer · 2018-02-16 10:29:04Z

0

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

answered Feb 16, 2018 at 10:29

Paritosh

11.7k5 gold badges64 silver badges80 bronze badges

Comments

Dennis G. · Accepted Answer · 2018-02-16 10:29:09Z

0

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...

answered Feb 16, 2018 at 10:29

Dennis G.

261 bronze badge

Comments

Ankit Singh · Accepted Answer · 2018-02-16 10:31:47Z

0

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...

edited Feb 16, 2018 at 10:31

Ankit Singh

1,4871 gold badge13 silver badges22 bronze badges

answered Feb 16, 2018 at 10:26

kingtreelo

2613 silver badges16 bronze badges

Collectives™ on Stack Overflow

How can I show loader while using ajax jquery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related