CODEWITHSUNDEEP
jqueryajax
Thiwanka Dodanwela
Thiwanka Dodanwela

Reputation: 487

Prevent second ajax call while first one complete

I know there are so many questions in stackoverflow regarding this type of issues, but still, those wont help me to solve my one

this is the jquery code

function _get_activities_ajax() {
    $(".activity-accordian h3").click(function() {
        var catrgory      = $(this).attr("data-subject");
        var catId      = $(this).attr("id");
        if($("#"+catId+"-wrap ul").children().length==0) { 
        $("#"+catId+"-wrap").append("<div class='preloader'></div>");
            $.ajax({
                url: _getActivityAjax,
                data: {catrgory: catrgory},
                type: 'POST',
                success: function(result) {
                    $(".preloader").remove();
                    $("#"+catId+"-wrap").append(result);
                },
                error: function(e) {

                }  
            });
        }
        $(".activity-accordian h3").removeClass("active-header").removeClass("header-1");
        $(this).addClass("active-header");

        $(".categ-content ul").css("display","none");  
        $("#"+catId+"-wrap ul").css("display","block"); 
    });  
}

this is written to get data sets to an accordion.

i need to prevent the second call until the first one complete. any help would appreciate.

Thanks

Upvotes: 2

Views: 2690

Answers (2)

Mivaweb
Mivaweb

Reputation: 5732

Add a variable that holds the status of your Ajax call.

JS

function _get_activities_ajax() {

    //Variable status ajax call
    var status = true;

    $(".activity-accordian h3").click(function() {
        var catrgory      = $(this).attr("data-subject");
        var catId      = $(this).attr("id");

        if($("#"+catId+"-wrap ul").children().length==0  && status) { //check if true

            //New ajax call so status set to false
            status = false;

            $.ajax({
                url: _getActivityAjax,
                data: {catrgory: catrgory},
                type: 'POST',
                success: function(result) {

                    //set status done to true
                    status = true;
                },
                error: function(e) {


                    //if error also set status to true
                    status = true;

                }  
            });
        }

        ...
    });  
}

Upvotes: 4

Praveen
Praveen

Reputation: 56539

Previously these kind of issues are simply avoid using async property in ajax. Since this will freeze the GUI for few seconds, they improvised using callbacks.

Here in your code, write the another ajax call within the success callback of the first.

example:

$.ajax({
    url: _getActivityAjax,
    data: {catrgory: catrgory},
    type: 'POST',
    success: function(result) {
        $(".preloader").remove();
        $("#"+catId+"-wrap").append(result);
        //Place your second ajax      
    },
    error: function(e) {

    }  
});

Upvotes: 2

Related Questions