Synchronize 3 Select with Loading + Jquery/ Ajax

Question

Hello, good day.

I am with my app here on the following question.

have the page index.html, on this page I have a <div> so that the loading according to the code below:

<div id="loader" style="display: none;"> <img src="loading.gif" align="center" width="200" height="180">Carregando...</div>

Now I have the js file.

 function onCarregaFunVeiEqu () {

    $.ajax({
        url: ''''''''getFun.php'''''''',
        type: ''''''''get'''''''',
        async: false,
        beforeSend: function(){
            $("#loader").show();
            $("#loader").css({display:"block"});
        },
        success: function(response){
            var obj = JSON.parse(response);
                obj.forEach(function (o, index) {
                    onSincFun(o.cdfun, o.nmfun, o.nusen, o.nmatri);
                });


            $.ajax({
                url: ''''''''getVei.php'''''''',
                type: ''''''''get'''''''',
                async: false,
                success: function(response){
                    var obj = JSON.parse(response);
                        obj.forEach(function (o, index) {
                        onSincVei(o.cdve, o.nuplaca, o.detip, o.demdl);
                    });



                    $.ajax({
                        url: ''''''''getEquipe.php'''''''',
                        type: ''''''''get'''''''',
                        async: false,
                        success: function(response){
                            DeleteEqu();
                            var obj = JSON.parse(response);
                                obj.forEach(function (o, index) {
                                    onSincEqu(o.cdequ, o.deequ, o.dearea, o.nmobra);
                                });
                        }
                    });     
                }

            });
        },
        complete: function(data){
            //$("#loader").hide();

        }
    }).always (function() {
        $("#loader").show();
        $("#loader").css({display:"block"});
    }).done (function() {
        $("#loader").hide();
        $("#loader").css({display:"none"});
    });

}

what happens is :

the Loading.. it looks, but already gone... And in the meantime, he’s synchronizing.. that is to say he had to synchronize EVERYTHING and then disappear Loading...

someone has a suggestion?

Answer 1

The problem is that you set the Hide conditions at the end of the first ajax request, and are 3

Try this:

function onCarregaFunVeiEqu () {

$.ajax({
    url: ''''''''getFun.php'''''''',
    type: ''''''''get'''''''',
    async: false,
    beforeSend: function(){
        $("#loader").show();
        $("#loader").css({display:"block"});
    },
    success: function(response){
        var obj = JSON.parse(response);
            obj.forEach(function (o, index) {
                onSincFun(o.cdfun, o.nmfun, o.nusen, o.nmatri);
            });


        $.ajax({
            url: ''''''''getVei.php'''''''',
            type: ''''''''get'''''''',
            async: false,
            success: function(response){
                var obj = JSON.parse(response);
                    obj.forEach(function (o, index) {
                    onSincVei(o.cdve, o.nuplaca, o.detip, o.demdl);
                });



                $.ajax({
                    url: ''''''''getEquipe.php'''''''',
                    type: ''''''''get'''''''',
                    async: false,
                    success: function(response){
                        DeleteEqu();
                        var obj = JSON.parse(response);
                            obj.forEach(function (o, index) {
                                onSincEqu(o.cdequ, o.deequ, o.dearea, o.nmobra);
                            });
                    }
                }).done (function() {
                   $("#loader").hide();
                   $("#loader").css({display:"none"});
                });     
            }

        });
    },
    complete: function(data){
        //$("#loader").hide();

    }
    }).always (function() {
        $("#loader").show();
        $("#loader").css({display:"block"});
    }).done (function() {
        //$("#loader").hide();
        //$("#loader").css({display:"none"});
    });

I commented on the code that hides the loading div, and put it at the end of your last request.

the .done() executes at the end of the request

and $("#loader").hide(); hides the Download