Failing to call a function after AJAX completes

Question

I have a function named ajaxCall which makes an AJAX call. I have another function called filterItem . On button click of filter I want the ajaxCall function to fire so that all items can be retrieved then the filterItem function should fire and filter items. However this function is not triggered.

$(document).on('click', '.items', function() {
    ajaxCall().promise().done(function() {
        alert();
        console.log("trigger");
        filterItem();
    });
});

Answer 1

In Ajax call there is an async Property make it false and it should work. No need to use .promise()

$.Ajax({
type:  "Post",
url: "Your URL",
async: false,
success : function(){
alert("ajax Complete");
}
});

You can also call your dependent function in Success block if it is possible in your scenario.