Question

I have the next js function that is working good:

$(function () {
    $(".country").click(function () {
        var countries = Array();
        $(".country:checked:enabled").each(function(i, element){
            countries[i] =  $(element).attr("id");
        });
        countries_string = countries.join(",");            
        $('#scroll').scrollTop(0);
        $.ajax({
            type: 'POST',
            url: '@Url.Action("CheckBoxCountryFilter", "CheckBox")',
            data: {countries:countries_string},
            success: function (result) {
                //console.log(result);
                $("#wineResult").html(result);
            }             
        });
        if(countries.length > 0){
            $("#countryImage").html('<img src="/Content/Images/icons/check.png">');            
        }else{
            $("#countryImage").html('');
        }
        $.ajax({
            url: '@Url.Action("ArtikelNumber", "CheckBox")',
            type: 'POST',                
            success: function (result) {
                $("#artikelNumber").html(result);
            }
        }); 
    });
});

but there are one problem the first $.ajax() is not executing sometime first, can I do somthing that the fist $.ajax() ever time execut first?? thank you

Answer 1

You can force that by moving the second $.ajax call into the success of the first one

$(function () {
    $(".country").click(function () {
        var countries = Array();
        $(".country:checked:enabled").each(function(i, element){
            countries[i] =  $(element).attr("id");
        });
        countries_string = countries.join(",");            
        $('#scroll').scrollTop(0);
        $.ajax({
            type: 'POST',
            url: '@Url.Action("CheckBoxCountryFilter", "CheckBox")',
            data: {countries:countries_string},
            success: function (result) {
                //console.log(result);
                $("#wineResult").html(result);
                $.ajax({
                    url: '@Url.Action("ArtikelNumber", "CheckBox")',
                    type: 'POST',                
                    success: function (result) {
                        $("#artikelNumber").html(result);
                    }
                }); 
            }             
        });
        if(countries.length > 0){
            $("#countryImage").html('<img src="/Content/Images/icons/check.png">');            
        }else{
            $("#countryImage").html('');
        }
    });
});