AJAX function is called first even before first line of jQuery button click, why?

Question

I am working on MVC application where I have to hide button on button click and show when ajax request completed. But the button is hiding after all request is completed. Below is what I have tried.

<input type="button" id="btnCalculateAndSave" value="Calculate & Save" style="float: right" />

Below is the jQuery click even which has also ajax function calling on same button click.

$("#btnCalculateAndSave").on("click", function (e) {
  $("#btnCalculateAndSave").hide();

  //Several lines for validation

  $.ajax({
    url: '@Url.Action("myControllerFunction", "myController")',
    type: "GET",
    async: false,
    cache: false,
    dataType: "JSON",
    data: { 
      "p1": v1, 
      "p2": v2
    },
    success: function(result) {
    }  
  }
}
});

As I have to prevent multiple time button click event. So button is hiding but after all process of ajax is happened even button hide code is in the first line of jQuery click event.

Answer 1

Hope this helps,

    var pr;
    $("#btnCalculateAndSave").on("click", function (e) {
              var btn = $(this)
              btn.hide()   

             if(pr)
                 pr.abort() //Prevent multiple time click

            //Several lines for validation
            pr =    $.ajax({
            url: '@Url.Action("myControllerFunction", "myController")',
            type: "GET",
            async: false,
            cache: false,
            dataType: "JSON",
            data: { 
              "p1": v1, 
              "p2": v2
            },
            success: function(result) {
                     btn.show()
            }  
          }
        }
    });

Answer 2

You can use something like this:

$("#btnCalculateAndSave").on("click", function (e) {
    $("#btnCalculateAndSave").hide(0, ajaxCall);
    //.....
    //Several lines for validation
    //.....

});

function ajaxCall() {

    $.ajax({
        url: '@Url.Action("myControllerFunction", "myController")',
        type: "GET",
        async: false,
        cache: false,
        dataType: "JSON",
        data: { "p1": v1, "p2": v2 },
        success: function (result) {
            //Add this line
            $("#btnCalculateAndSave").show();
        }
    });
}

Answer 3

Kindly write main code inside hide function.

$("#btnCalculateAndSave").hide(function(){ /* Main Code */ });

Below is your main code.

 $("#btnCalculateAndSave").on("click", function (e) {
      $("#btnCalculateAndSave").hide(function(){

 $.ajax({
    url: '@Url.Action("myControllerFunction", "myController")',
    type: "GET",
    async: false,
    cache: false,
    dataType: "JSON",
    data: { 
      "p1": v1, 
      "p2": v2
    },
    success: function(result) {
    }  
  }
});

});

});

Answer 4

You hide the button first on the click by $("#btnCalculateAndSave").hide(); , but there's no instruction for removing the button afterwords.

As per your question, you need to show the button after ajax call is completed. So what you can do is, put code to display the button in ajax success

$("#btnCalculateAndSave").on("click", function (e) {
   $("#btnCalculateAndSave").hide();
   .....
   //Several lines for validation
   .....
   $.ajax({
                    url: '@Url.Action("myControllerFunction", "myController")',
                    type: "GET",
                    async: false,
                    cache: false,
                    dataType: "JSON",
                    data: { "p1": v1, "p2": v2},
                    success: function (result) { 
//Add this line
$("#btnCalculateAndSave").show();  

                            }  
                        }
                    }
            });