Disable Button while AJAX Request

Question

I\'m trying to disable a button after it\'s clicked. I have tried:

$(\"#ajaxStart\").click(function() {
    $(\"#ajaxStart\").attr(\"disabled\", true);
    $         


        

Answer 1

I have solved this by defining two jquery functions:

var showDisableLayer = function() {
  $('
').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'          
   });      
});