AJAX 요청 중 사용 안 함 버튼

AJAX 요청 중 사용 안 함 버튼

버튼을 클릭한 후 비활성화하려고 합니다.시도했습니다.

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

버튼이 비활성화되지 않습니다.제거할 때$("#ajaxStart").attr("disabled", false);버튼이 비활성화됩니다.

이것은 예상대로 되지 않지만, 코드 시퀀스는 정확하다고 생각합니다.어떤 도움이라도 주시면 감사하겠습니다.

놓다$("#ajaxStart").attr("disabled", false);성공 함수 내부:

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

이렇게 하면 데이터가 로드된 후 비활성화가 false로 설정됩니다.현재 버튼은 같은 클릭 기능(즉, 동시에 비활성화 및 활성화)으로 설정되어 있습니다.

코드에서는, 같은 버튼을 클릭했을 때에, 버튼을 무효로 해 유효하게 합니다.

AJAX 콜 완료 시 이 기능을 활성화해야 합니다.

이와 같은 것

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

이 문제를 해결하려면 두 가지 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();
};

첫 번째 함수는 모든 것 위에 레이어를 만듭니다.레이어가 하얗고 완전히 불투명한 이유는 레이어를 클릭할 수 있기 때문입니다.

에이잭스를 할 때 이렇게 해요.

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

나는 아약스의 글로벌 기능을 이용하여 이것을 해결했다.

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

여기 문서 링크가 있습니다.

그$.ajax()call "will not block" (차단하지 않습니다) 즉, 즉시 반환되고 버튼을 즉시 활성화하여 버튼이 비활성화되지 않도록 합니다.

AJAX가 성공했을 때, 에러가 발생했을 때, 또는 종료했을 때, 다음의 방법으로 이 버튼을 유효하게 할 수 있습니다.complete: http://api.jquery.com/jQuery.ajax/

complete(XMLHttpRequest, textStatus)

요구가 완료되면 호출되는 함수(성공 및 오류 콜백 실행 후).함수에는 다음 두 개의 인수가 전달됩니다.XMLHttpRequest 개체 및 요청 상태를 분류하는 문자열('success', 'not modified', 'error', 'timeout' 또는 'parserror').이건 Ajax 이벤트입니다.

언급URL : https://stackoverflow.com/questions/4622499/disable-button-while-ajax-request