Przycisk Wyłącz, gdy żądanie AJAX

Question

Próbuję wyłączyć po kliknięciu przycisku. Piszę mój kod w następujący sposób:

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

, ale przycisk nie jest wyłączony. podczas gdy usuwam $("#ajaxStart").attr("disabled", false); przycisk jest wyłączony.

dlaczego to mogło się stać z powyższym kodem, myślę, że sekwencja kodu jest poprawna.

Answer 1

Put $("#ajaxStart").attr("disabled", false); wewnątrz funkcji sukcesu:

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

To zapewni, że Wyłącz jest ustawione na false po dane zostały załadowane .. Obecnie wyłącza się i włącza przycisk w tej samej funkcji kliknięcia, czyli w tym samym czasie.

Answer 2

W swoim kodzie wystarczy wyłączyć & włączyć przycisk na tym samym przycisku.

Musisz włączyć go wewnątrz zakończeniu AJAX zadzwonić

coś takiego

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

Answer 3

Połączenie "nie blokuje" - oznacza to, że natychmiast powróci, a następnie natychmiast włączasz przycisk, więc przycisk nie jest wyłączony.

Można włączyć przycisk, gdy AJAX się powiedzie, ma błędu, lub w inny sposób wykończone, używając complete: http://api.jquery.com/jQuery.ajax/

kompletne (XMLHttpRequest, textStatus)

Funkcja być wywoływana, gdy żądanie kończy się (po powodzeniu i błędzie wywołania zwrotne są wykonywane ). Funkcja zostaje przekazana dwa argumenty: Obiekt XMLHttpRequest i ciąg znaków kategoryzujący status żądania ("sukces", "niezmieniony", "błąd", "limit czasu" lub "parsererror"). To jest wydarzenie Ajax.

Answer 4

Mam rozwiązać to poprzez zdefiniowanie dwóch funkcji 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(); 
}; 

Pierwsza funkcja tworzy warstwę na górze wszystko. Powodem, dla którego warstwa jest biała i całkowicie nieprzejrzysta, jest to, że w przeciwnym razie IE umożliwia jej kliknięcie.

Podczas mojego ajax, robię tak:

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

I rozwiązać to za pomocą funkcji globalnej Ajax

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

tutaj jest dokumentacja link.