Question

I have a MVC application where i call a jquery post method on textbox blur function.
The problem is the form has many input fields and on each input field blur call same ajax method, and if users click in and out in different text boxes very fast, the ajax method call two three times and resulted in wrong result.

Here is an example

    Flight 1
    Airline     Flight #    Class         Date
S1  TextBox1    TextBox2    TextBox3      TextBox4 
S2  TextBox1    TextBox2    TextBox3      TextBox4 
S3  TextBox1    TextBox2    TextBox3      TextBox4

One solution to this which i tired is to Disable all input filed when calling ajex like this

function Submit() {
     $('input').attr("disabled", "disabled");
     $.post("/ItineraryBuilder/GetFlightData", { opportunityId: oppID}, function (data) 
     {
          $("#DivResult").html(data);
          $('input').removeAttr("disabled");
     }
}

This disable all input fields and restrict user to in-out from textboxes frequently which in turn do not call Ajax post again and again. But as soon as input fields are disabled, focus has been also lost and make it difficult to use TAB in this case.

So is there any way i can lock down the ajax call or Controller/Action for a while so until one action is in process another will not start, or any other better way to do this?

Hope i clear my point.

Answer 1

if($.active){ 
  //there's an ajax function running
}else{ 
  //there's no ajax function running
}