Tukukkk

I need to wait for all Ajax request to be done before I execute the next although both async true
and I don't want to make async false because i want loader to be showen, here's my code

$('#RequestDetails_VacationPeriod').blur(function () {

        AddPeriodToDate();



        ShowSickLeavesDistributionInfo(null);



    });

function AddPeriodToDate() {

        var employeeNumber = $("#RequestDetails_EmployeeNo").val();

        var vacationStartDate = $("#VacationStartDate").val();

        var periodValue = parseInt($("#RequestDetails_VacationPeriod").val());

        vacationTypeSelectedVal = $("#RequestDetails_VacationRequestSettingId").find(":selected").val();

        var totalLeavePeriodsUnderProcessing = $("#RequestDetails_TotalLeavePeriodsUnderProcessing").val();



        if (vacationStartDate && periodValue && vacationTypeSelectedVal) {



            $(".loader").fadeIn();



            $.ajax({

                type: "GET",

                url: "/EServices/Leave/NewLeaveRequest/AddPeriodToDate",

                async: true,

                data: {

                    "employeeNumber": employeeNumber,

                    "vacationStartDate": vacationStartDate,

                    "periodValue": periodValue,

                    "totalLeavePeriodsUnderProcessing": totalLeavePeriodsUnderProcessing,

                    "decisionTypeNumber": vacationTypeSelectedVal

                },

                cache: true,

                contentType: "application/json; charset=utf-8",

                contentType: "json",

                success: function (result) {



                    $(".loader").fadeOut();

                    $("#RequestDetails_VacationEndDate").val(result.VacationEndDate);



                    $("#RequestDetails_RemainingBalance").val(result.objVacationRequestDetail.RemainingBalance);



                    var remainingBalanceVal = parseInt($("#RequestDetails_RemainingBalance").val());



                    if (periodValue >= remainingBalanceVal) {



                        $("#RequestDetails_VacationPeriod").val("");

                        $('#Modal_RemainingBalance').addClass("md-show");



                        return false;

                    } else {

                        $('#Modal_RemainingBalance').removeClass("md-show");



                        return true;

                    }



                    $("#RequestDetails_RemainigAnnualDays").val(result.objVacationRequestDetail.RemainigAnnualDays);

                    $("#RequestDetails_RemainingAnnualDaysAfterDeductingLeavesPeriodUnderProcessing").val(result.objVacationRequestDetail.RemainingAnnualDaysAfterDeductingLeavesPeriodUnderProcessing);

                    $("#RequestDetails_RemainingBalanceAfterDeductingLeavesPeriodUnderProcessing").val(result.objVacationRequestDetail.RemainingBalanceAfterDeductingLeavesPeriodUnderProcessing);



                    var remainingBalanceAfterDeductingLeavesPeriodUnderProcessing = $("#RequestDetails_RemainingBalanceAfterDeductingLeavesPeriodUnderProcessing").val();

                    var remainingAnnualDaysAfterDeductingLeavesPeriodUnderProcessing = $("#RequestDetails_RemainingAnnualDaysAfterDeductingLeavesPeriodUnderProcessing").val();



                    if (parseInt(periodValue) > parseInt(remainingBalanceAfterDeductingLeavesPeriodUnderProcessing) ||

                        parseInt(periodValue) > parseInt(remainingAnnualDaysAfterDeductingLeavesPeriodUnderProcessing)) {



                        $("#RequestDetails_VacationPeriod").val("");

                        $('#Modal_VacationBalanceWithUnderProccessingNotEnough').addClass("md-show");



                        return false;



                    } else {

                        $('#Modal_VacationBalanceWithUnderProccessingNotEnough').removeClass("md-show");



                        return true;

                    }

                }

            });

        }

    }

function ShowSickLeavesDistributionInfo(e) {

    var employeeNo = $("#RequestDetails_EmployeeNo").val();

    var vacationStartDate = $("#VacationStartDate").val();

    var vacationPeriod = $("#RequestDetails_VacationPeriod").val();

    vacationTypeSelectedVal = $("#RequestDetails_VacationRequestSettingId").find(":selected").val();



    if ($(e) && $(e).attr("id") == "btn-Control") {



        var sickLeavesDistributionRequiredMessage = "";



        if (vacationTypeSelectedVal === "") {

            ReadFromResources("Ksu_SickLeavesDistributionVacationsystemCodeGroupReuired");

            sickLeavesDistributionRequiredMessage = resourceValue + " ,";

        }



        if (vacationStartDate === "") {



            ReadFromResources("Ksu_SickLeavesDistributionVacationStartReuired");

            sickLeavesDistributionRequiredMessage += resourceValue + " ,";

        }



        if (vacationPeriod === "") {

            ReadFromResources("Ksu_SickLeavesDistributionvacationPeriodReuired");

            sickLeavesDistributionRequiredMessage += resourceValue;

        }



        if (sickLeavesDistributionRequiredMessage) {



            var lastChar = sickLeavesDistributionRequiredMessage.substr(sickLeavesDistributionRequiredMessage.length - 1);



            if (lastChar === ",") {

                sickLeavesDistributionRequiredMessage = sickLeavesDistributionRequiredMessage.slice(0, -1);

            }



            $(".SickLeavesDistributionParametersRequired").html(sickLeavesDistributionRequiredMessage);

            $('#Modal_SickLeavesDistributionParametersRequired').addClass("md-show");



            return false;

        } else {

            $('#Modal_SickLeavesDistributionParametersRequired').removeClass("md-show");



            return true;

        }

    }



    if (vacationStartDate && vacationPeriod && vacationTypeSelectedVal) {



        if (vacationTypeSelectedVal == "00804" || vacationTypeSelectedVal == "00805" ||

            vacationTypeSelectedVal == "00810" || vacationTypeSelectedVal == "00820") {



            $(".loader").fadeIn();



            $.ajax({

                type: "GET",

                url: "/EServices/Leave/NewLeaveRequest/GetSickLeavesDistribution",

                async: true,

                data: {

                    "employeeNo": employeeNo,

                    "pSDate": vacationStartDate,

                    "pDays": vacationPeriod,

                    "systemCodeGroup": vacationTypeSelectedVal

                },

                contentType: "html",

                cache: false,

                success: function (result) {



                    $(".loader").fadeOut();



                    if (result == "") {



                        var selectedVacation = $("#RequestDetails_VacationRequestSettingId").find(":selected").text();



                        ReadFromResources("Ksu_SickLeavesDistributionMessage");

                        $(".SickLeavesDistributionMessage").html(resourceValue.replace("{0}", selectedVacation));

                        $("#RequestDetails_VacationRequestSettingId").val('');

                        $("#RequestDetails_VacationRequestSettingId").selectpicker('refresh');



                        $('#Modal_SickLeavesDistribution').addClass("md-show");



                        return false;



                    } else {

                        $('#DivSickleavesdistributionInfo').html(result);

                        $('#DivSickleavesdistribution').removeClass("md-show");



                        return true;

                    }

                }

            });

        }

    }

}

if it execute AddPeriodToDate() and return false, i want to stop not execute ShowSickLeavesDistributionInfo(null);

Assuming you're using a recent enough version of jQuery (>= 1.5), the solution as mentioned in the jQuery documentation would be:

$.when( 

  $.ajax( "/page1.php" ), 

  $.ajax( "/page2.php" ) 

).then( myFunc, myFailure );

In short, you can add up any number of ajax calls in the $.when clause, which will all be sent off asynchronously. Once all complete, the success or failure method is fired in the $.then clause.