Desactivar el botón mientras se solicita AJAX

Question

Intento desactivar después de hacer clic en el botón. Escribo mi código de la siguiente manera:

$("#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); 
         }, 
         error: errorhandler, 
         dataType: 'json' 
       }); 
       $("#ajaxStart").attr("disabled", false); 
      }); 

pero el botón no está deshabilitado. mientras elimino $("#ajaxStart").attr("disabled", false);, el botón se desactiva.

por qué esto podría suceder con el código anterior, creo que la secuencia de código es correcta.

Answer 1

Ponga $("#ajaxStart").attr("disabled", false); dentro de la función del éxito:

$("#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' 
    }); 
}); 

Esto asegurará que desactivar se establece en falso después de los datos se han cargado .. Actualmente, deshabilita y habilita el botón en la misma función de clic, es decir, al mismo tiempo.

Answer 2

En su código, simplemente desactive & habilite el botón en el mismo botón, haga clic en.

Tienes que permita el interior de la finalización de AJAX llamar

algo como esto

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

Answer 3

La llamada $.ajax() "no se bloqueará" - eso significa que volverá de inmediato, y luego habilita el botón inmediatamente, por lo que el botón no está deshabilitado.

Puede activar el botón cuando el AJAX es exitosa, tiene errores, o que sea terminado, mediante el uso de complete: http://api.jquery.com/jQuery.ajax/

completa (XMLHttpRequest, textStatus)

una función que será se llama cuando la solicitud finaliza (después de que el éxito y las devoluciones de errores se ejecutan ). La función se pasa dos argumentos: el objeto XMLHttpRequest y una cadena que categoriza el estado de la solicitud ("éxito", "no modificado", "error", "tiempo de espera" o "parsererror"). Este es un Evento Ajax.

Answer 4

He resuelto esto definiendo dos funciones jQuery:

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(); 
}; 

La primera función crea una capa encima de todo. La razón por la que la capa es blanca y completamente opaca es que, de lo contrario, IE te permite hacer clic a través de ella.

Al hacer mi ajax, lo hago de esta manera:

$("#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'   
    });  
}); 

Answer 5

He resuelto mediante el uso de la función global de ajax

  $(document).ajaxStart(function() { 
      $("#btnSubmit").attr("disabled", true); 
     }); 
     $(document).ajaxComplete(function() { 
      $("#btnSubmit").attr("disabled", false); 
     }); 

aquí es la documentación link.