Prevent second ajax call while first one complete

Question

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

you can use a variable which holds the status of your call. For example: `var done = false;`. And in your `success()` method you can say: `done = true;` — Mivaweb, May 21 '14 at 06:33
Yeah! @VDesign I'll Suggest you to make that comment as answer. and OP please Try it. +1 VDesign. — Vedant Terkar, May 21 '14 at 06:37
Thanks to VDesign! You save my time! and also thanks to Vedant Terkar, Jai, Praveen and Ehsan Sajjad — Thiwanka Dodanwela, May 21 '14 at 07:01

Mivaweb · Accepted Answer · 2014-05-21T06:50:54.593

4

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;

                }  
            });
        }

        ...
    });  
}

edited May 21 '14 at 06:50

answered May 21 '14 at 06:40

Mivaweb

5,580
3
27
53

Good one! +1. But I think that `var status=false;` should be outside function body and `status=false` should be in function **after ajax call** and you should check `status` variable before making call . – Vedant Terkar May 21 '14 at 06:41
@VedantTerkar How is it _Really Good one!_? What is status doing here just updating the var values. – Jai May 21 '14 at 06:44
I have updated to code in my anwser. I forgot the if statement. – Mivaweb May 21 '14 at 06:45
@Jai It is good because it is simple. and +1 for enthusiasm of User. But still this answer needs correction. – Vedant Terkar May 21 '14 at 06:49
1

@VedantTerkar that's fine seems `.off()` has to be used in this case, that would be a better solution. – Jai May 21 '14 at 06:52
Thanks VDesign! you save my time!, Thanks to VedantTerkar, Jai and Praveen – Thiwanka Dodanwela May 21 '14 at 06:56

score 2 · Answer 2 · edited May 23 '17 at 12:09

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) {

    }  
});

Prevent second ajax call while first one complete

2 Answers2