Synchronize 3 Select with Loading + JQuery / Ajax

Question

Synchronize 3 Select with Loading + JQuery / Ajax

Navigation

#1 by (0 votes)

2

Hello, good morning.

I'm having my application here in the following question.

I have the index.html page, on this page I have a <div> to display loading as per 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:

Loading ... it appears, but it already disappears ... and meanwhile he is synchronizing .. ie he had to synchronize EVERYTHING to later disappear Loading ...

Does anyone have a suggestion?

javascript jquery ajax

asked by anonymous 08.10.2018 / 15:06

1 answer

Error Running Report in SQL Server Reporting Services How to differentiate the sessions in the browser tabs?

score 0 · Accepted Answer

The problem is that you have put the conditions of hide 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 on the last of your last request.

.done () runs at the end of the request

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