$ .post() 콜백 메소드 제안

Question

나는이 같은 항상 사용 무언가 :

$("a.button").click(function() { 
    data = ...; 
    url = ...; 
    $.post(url, data, function() { 
     $(this).toggleClass('active'); 
    }); 
}); 

사용자가 해당 버튼을 느린 연결과 클릭이있는 경우 문제가 아무것도 할 것으로 보인다하지 않는 것입니다, 요청이 완료되면 버튼이 자신의 상태 (active 클래스 추가)를 변경하기 때문입니다. 물론 요청을로드하는 동안 회 전자를 추가하여이 동작을 "수정할"수 있습니다.

지금이 하나를 체크 아웃 : 버튼을 누를 때 즉

$("a.button").click(function() { 
    $(this).toggleClass('active'); 
    data = ...; 
    url = ...; 
    $.post(url, data, function() { 
     // if request is successful do nothing 
     // else, if there's an error: $(this).toggleClass('active) 
    }); 
}); 

, 나는 즉시 버튼의 상태를 변경하고,이 후, 나는 성공/오류가 있는지 점검합니다. 이것은 좋은 방법입니까? 당신이 무엇에 대해 생각하는지? 다른 방법이 있습니까?

Answer 1

이 코드보다 UI 질문의 더 많은 것이다. 개인적으로 응답이 없으면 혼란 스러울 수있는 경우 회 전자를 표시하는 것을 선호합니다. 어떤 클래스를 토글하고 어떤 요소가 요소에 미치는 영향을 알지 못하기 때문에 성공하기 전에 토글하는 것이 전혀 혼란 스러울 지 모르겠습니다.

어느 누구도 살아있는 모든 사람이 로딩 스피너를 알고 있습니다. 아마도 그걸로가는 것이 안전 할 것입니다.

Answer 2

일반적인 아이디어가 있습니다. 이 방법은 특정 이벤트, 초기화 또는 완료 등 는, 어떤 장소를 취할 때 핸들러가 호출 등록

$("a.button").click(function() { 
    data = ...; 
    url = ...; 
    $.post(url, data, function() { 
     // if request is successful do nothing 
    }); 
}).ajaxStart(function() { 
    $(this).toggleClass('active'); 
}).ajaxComplete(function() { 
    $(this).toggleClass('active'); 
}).ajaxError(function() { 
    //never forget to add error handling, you can show the user a message or maybe try the AJAX request again 
}); 

: 당신은 세계 AJAX ajaxStart 및 ajaxSuccess 기능을 설정하여 예를 들어, 다른 방법으로 그것을 구현할 수 있습니다 AJAX 요청에 페이지. 전역 이벤트는 jQuery.ajaxSetup()의 글로벌 속성이 true 인 경우 기본적으로 모든 AJAX 요청에서 시작됩니다. 참고 : 전역 이벤트의 값에 관계없이 도메인 간 스크립트 또는 JSONP 요청에 대해서는 글로벌 이벤트가 실행되지 않습니다.

출처 : http://api.jquery.com/category/ajax/global-ajax-event-handlers/

Answer 3

사용 $.ajaxsuccess :

jquery docs에서 :

$.ajax({ 
    url: "test.html", 
    success: function(){ 
    $(this).addClass("done"); 
    } 
}); 

Answer 4

당신은 같은 것을 할 수있는 :

$("a.button").click(function() { 
    var old_text = $(this).text(); 
    var button = $(this); 
    $(this).text('Processing...'); 
    $(this).attr('disabled', 'disabled'); // disable to button to make sure it cannot be clicked 
    data = ...; 
    url = ...; 
    $.post(url, data, function() { 
     // after request has finished, re-enable the link 
     $(button).removeAttr('disabled'); 
     $(button).text(old_text); 
    }); 
}); 

다음 일을, 당신은 오류 (버튼을 다시 활성화)을 잡기위한 비슷한 일을해야 할 것입니다.

Answer 5

항상 사이트를 구축 한 방식에 따라 다르지만, 내 생각에 활성 상태는 클릭 한 순간에만 트리거해야합니다.

이렇게해야합니다. onmousedown 클래스를 추가하고 onmouseup을 제거하십시오.

Ajax 호출은 로딩 대화 상자/회 전자를 표시하는 다른 기능을 트리거 할 수 있습니다.

건물을 짓는 데는 여러 가지 방법이 있습니다. 각 요소마다 개별적으로 또는 일반적인 스타일 지정 기능을 사용하는 것입니다. Jasper가 말했듯이 ajaxStart ajaxComplete 함수를 사용하는 Ajax와 동일합니다.

개인적으로 나는 항상 집중적으로 DOM을 사용하고 있는데, DOM을 동적으로 변경하기 때문에, 라이브 쿼리를 사용하여 주어진 클래스가있는 요소가 DOM에 나타날 때 자동으로 이벤트로 변경되는 스타일을 설정하고 ajaxStart 및 ajaxComplete를 사용하여 표시합니다 로드 대화 상자.