Disable Button while AJAX Request Disable Button while AJAX Request ajax ajax

Disable Button while AJAX Request


Put $("#ajaxStart").attr("disabled", false); inside the success function:

$("#ajaxStart").click(function() {    $("#ajaxStart").attr("disabled", true);    $.ajax({        url: 'http://localhost:8080/jQueryTest/test.json',        data: {             action: 'viewRekonInfo'        },        type: 'post',        success: function(response){            //success process here            $("#alertContainer").delay(1000).fadeOut(800);            $("#ajaxStart").attr("disabled", false);        },        error: errorhandler,        dataType: 'json'    });});

This will ensure that disable is set to false after the data has loaded... Currently you disable and enable the button in the same click function, ie at the same time.


In your code, you just disable & enable the button on the same button click,.

You have to enable it inside the completion of AJAX call

something like this

           success: function(response){                    $("#ajaxStart").attr("disabled", false);                        //success process here                       $("#alertContainer").delay(1000).fadeOut(800);                   },


I have solved this by defining two jquery functions:

var showDisableLayer = function() {  $('<div id="loading" style="position:fixed; z-index: 2147483647; top:0; left:0; background-color: white; opacity:0.0;filter:alpha(opacity=0);"></div>').appendTo(document.body);  $("#loading").height($(document).height());  $("#loading").width($(document).width());};var hideDisableLayer = function() {    $("#loading").remove();};

The first function creates a layer on top of everything. The reason the layer is white and completely opaque, is that otherwise, IE allows you to click through it.

When doing my ajax, i do like this:

$("#ajaxStart").click(function() {             showDisableLayer(); // Show the layer of glass.   $.ajax({                    url: 'http://localhost:8080/jQueryTest/test.json',                    data: {                             action: 'viewRekonInfo'                    },       type: 'post',                    success: function(response){                           //success process here                           $("#alertContainer").delay(1000).fadeOut(800);                                              hideDisableLayer(); // Hides the layer of glass.      },      error: errorhandler,                    dataType: 'json'             });      });