How to add loader in ajax load with async: false

Question

I have a problem in load data using ajax, I use async false because I want my ajax process to run first. if it doesn't use async false the display and data will be stacked. how to show my loader in ajax async false?

Iwant to add my loader. this is my loader

$("#loading").show();

This is my select event when change

$('#boothFill').on('change', function () {
    if ($.fn.DataTable.isDataTable('#tbltransaction')) {
        $('#tbltransaction').DataTable().destroy();
    }
    $('#areaFill').find('.optArea').remove();
    $('#acamFill').find('.optAcam').remove();
    if ($("#boothFill").val() != "all") {
        $('#statisticData').find('.removeCardStat').remove();
        ajaxCardStatistic($('#dateStartTanggal').val(), $('#dateEndTanggal').val(), $('#areaFill').val(), $('#boothFill').val(), $('#acamFill').val(), $("#productFill").val());
    }else{
        $('#statisticData').find('.removeCardStat').remove();
    }
    ajaxArea($('#boothFill').val(), $('#acamFill').val());
    ajaxAcam($('#areaFill').val(), $('#boothFill').val());
    ajaxGet($('#dateStartTanggal').val(), $('#dateEndTanggal').val(), $('#areaFill').val(), $('#boothFill').val(), $('#acamFill').val(), $("#productFill").val(), $("#productTypeFill").val());      getAllData($('#dateStartTanggal').val(), $('#dateEndTanggal').val(), $('#areaFill').val(), $('#boothFill').val(), $('#acamFill').val());
});

this is a function called when select change

function ajaxCardStatistic(dateStartTanggal, dateEndTanggal, area, booth, acam, product){
    $.ajax({
        type: "POST",
        url: "dashboard/statisticCard",
        data: {
            dateStart : dateStartTanggal,
            dateEnd : dateEndTanggal,
            area : area,
            booth : booth,
            acam : acam,
            product : product,
        },
        dataType: "JSON",
        async: false,
        success: function (response) {
            $.each(response.data, function(item, data){
                if (!$.trim(data.product_type_name)) {
                    var html = "<div class='col-12 col-sm-6 col-lg-3 removeCardStat'><div class='card'><div class='card-header'><h4>" + data.motoquick_name + " (" + data.jenis + ")</h4></div>";
                }else{
                    var html = "<div class='col-12 col-sm-6 col-lg-3 removeCardStat'><div class='card'><div class='card-header'><h4>" + data.motoquick_name + " (" + data.jenis + " > " + data.product_type_name + ")</h4></div>";
                }
                html += "<div class='card-body' style='padding-top: 10px;padding-bottom: 10px;'><div class='row text-center'>";
                html += "<div class='col-lg-6 col-md-6 col-sm-12 col-12'><h4>" + data.transaction + "</h4><span>Trx</span></div>";
                html += "<div class='col-lg-6 col-md-6 col-sm-12 col-12'><h4>" + (data.rate*100).toFixed(0) + "% </h4><span>Avg/Day</span></div>";
                html += "</div></div>";
                html += "<div class='card-footer text-center'>" + rupiah(data.revenue) + " <br><span>Revenue</span></div>";
                html += "</div></div>";
                $("#statisticData").append(html);
            });
        }
    });
}

It's not clear what you're asking. If you're asking why your loader doesn't show when the ajax call is running, it's because you've used `async: false` and so the browser's UI is blocked waiting for the ajax call to complete. This is why you don't use `async: false`, because it locks up the UI of the browser. I don't know what you mean by "...if it doesn't use async false the display and data will be stacked..." but whatever that problem is, you can (and should) fix it without `async: false`. — T.J. Crowder, May 07 '19 at 07:29
[This question's answers](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) may be useful understanding how to correctly handle an asynchronous call. — T.J. Crowder, May 07 '19 at 07:30

score 0 · Answer 1 · answered May 07 '19 at 07:42

You can use 

beforeSend: function() {

                        $("#loading").show();
                        }


Example
function ajaxCardStatistic(dateStartTanggal, dateEndTanggal, area, booth, acam, product){   
            $.ajax({
                type: "POST",
                url: "dashboard/statisticCard",
                data: {
                    dateStart : dateStartTanggal,
                    dateEnd : dateEndTanggal,
                    area : area, 
                    booth : booth, 
                    acam : acam, 
                    product : product, 
                },
                dataType: "JSON",
                beforeSend: function() {

                        $("#loading").show();
                        },
                success: function (response) {
                    $.each(response.data, function(item, data){
                        if (!$.trim(data.product_type_name)) {
                            var html = "<div class='col-12 col-sm-6 col-lg-3 removeCardStat'><div class='card'><div class='card-header'><h4>" + data.motoquick_name + " (" + data.jenis + ")</h4></div>";
                        }else{
                            var html = "<div class='col-12 col-sm-6 col-lg-3 removeCardStat'><div class='card'><div class='card-header'><h4>" + data.motoquick_name + " (" + data.jenis + " > " + data.product_type_name + ")</h4></div>";
                        }
                        html += "<div class='card-body' style='padding-top: 10px;padding-bottom: 10px;'><div class='row text-center'>";
                        html += "<div class='col-lg-6 col-md-6 col-sm-12 col-12'><h4>" + data.transaction + "</h4><span>Trx</span></div>";
                        html += "<div class='col-lg-6 col-md-6 col-sm-12 col-12'><h4>" + (data.rate*100).toFixed(0) + "% </h4><span>Avg/Day</span></div>";
                        html += "</div></div>";
                        html += "<div class='card-footer text-center'>" + rupiah(data.revenue) + " <br><span>Revenue</span></div>";
                        html += "</div></div>";
                        $("#statisticData").append(html);
                    });
                 $("#loading").hide();
                }
            });
        }

score 0 · Answer 2 · answered May 07 '19 at 08:39

0

Just put ajax before in loader like this In your code dataType: "JSON", after

beforeSend: function() {
   $("#loader").show();
},

After success in hide this loader like this

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

Thanks

answered May 07 '19 at 08:39

Full Stop

904
11
24

score 0 · Answer 3 · answered Jun 16 '22 at 06:51

0

This will work.Do show first and wrap your async:false ajax into a setTimeout.

$("#loading").show();
setTimeout(function(){
 $.ajax({....async: false,});
},500);

answered Jun 16 '22 at 06:51

Johnson Hsieh

1

How to add loader in ajax load with async: false

3 Answers3