Pulsante Disabilita mentre Richiesta AJAX

Question

Sto tentando di disattivare dopo aver fatto clic sul pulsante. Scrivo il mio codice come segue:

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

ma il pulsante non è disabilitato. mentre rimuovo $("#ajaxStart").attr("disabled", false); il pulsante disabilitato.

perché questo potrebbe essere successo al codice sopra, penso che la sequenza di codice sia corretta.

Answer 1

Mettere $("#ajaxStart").attr("disabled", false); all'interno della funzione di successo:

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

Questo farà sì che disable è impostato su false dopo i dati sono stati caricati .. Attualmente disattivi e abiliti il ​​pulsante nella stessa funzione di clic, cioè allo stesso tempo.

Answer 2

Nel codice, è sufficiente disabilitare & abilitare il pulsante sullo stesso clic del pulsante.

Devi abilitare all'interno del completamento del AJAX chiamare

qualcosa di simile

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

Answer 3

La chiamata "non bloccherà" $.ajax() - significa che verrà restituita immediatamente e quindi si abilita immediatamente il pulsante, quindi il pulsante non è disabilitato.

È possibile attivare il pulsante quando l'AJAX è successo, ha errore, o è comunque finito, utilizzando complete: http://api.jquery.com/jQuery.ajax/

completa (XMLHttpRequest, textStatus)

una funzione da chiamato quando la richiesta termina (dopo il successo e le richiamate di errore sono eseguite ). La funzione viene passato due argomenti: l'oggetto XMLHttpRequest e una stringa categorizzare lo stato della richiesta ("successo", "notmodified", "errore", "timeout", o "ParserError"). Questo è un evento Ajax.

Answer 4

Ho risolto questo definendo due funzioni 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 prima funzione crea uno strato sulla cima di tutto. Il motivo per cui il livello è bianco e completamente opaco, è che altrimenti, IE ti permette di cliccarci sopra.

Nel fare il mio ajax, lo faccio in questo modo:

$("#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

ho risolto questo usando la funzione globale del ajax

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

qui è la documentazione link.