Loading in ajax

Question

How do I add a loading to my ajax? This loading would begin when ajax was started and finished when the result returned. my code:

$.ajax({
    url: url + "login/ajaxLogin",
    type: "POST",
    data: $('#login_form').serialize(),
    success: function(result) {
        alert(result)
    }
});

return false;

Answer 1

First choose a gif of your taste: this site has some many good: http://ajaxload.info/

Now, let’s set up:

put the modal in HTML (this is the element that will appear on the screen with "loading..."):

<div class="modal"></div>

We will apply the appropriate styles in modal by CSS

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* enquanto estiver carregando, o scroll da página estará desativado */
body.loading {
    overflow: hidden;   
}

/* a partir do momento em que o body estiver com a classe loading,  o modal aparecerá */
body.loading .modal {
    display: block;
}

and in Jquery you use this way:

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

or in your case:

    $body.addClass("loading");
    $.ajax({
        url: url + "login/ajaxLogin",
        type: "POST",
        data: $('#login_form').serialize(),
        success: function(result) {
            $body.removeClass("loading");
            alert(result);
        }
    });

return false;

Source: https://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation

Answer 2

You can use this:

$(document).on({

        ajaxStart: function () {                                
            $("#ComponenteLoading").show();                                   
        },
        ajaxStop: function() {

            $("#ComponenteLoading").hide();                    
        }

    });

However, depending on the browser (Google Chrome, for example) parallelism does not work very well in this situation, and if you use synchronous ajax requests, your 'loading balloon' will not be shown.

The event will be fired along with the start of the request and with that, the browser 'hangs' and does not show the balloon correctly.

To make it work in the situation of be a synchronous ajax request, in these particular browsers, you will have to manually intercept the correct point to show/hide the balloon:

$("#ComponenteLoading").show();
$.post("/UrlServico/Teste", function(dados){
        $("#ComponenteLoading").hide();
});

Answer 3

I believe this code will help you.

$(document).ajaxStart(function (){
    //Show loading
}).ajaxStop(function () {
    //Hide loading
})