jQuery는 ajaxStart와 ajaxComplete를 양식 유형에 바인딩합니까?

Question

내 응용 프로그램에는 여러 가지 jquery-ui 대화 상자가 있습니다. 모두 매우 다른 작업을 수행합니다. 여기에 그들 사이의 공통 템플릿입니다 :

<div class="dialog-content">  
<form accept-charset="UTF-8" action="/NOT-UNIQUE" class="NOT-UNIQUE" data-remote="true" id="NOT-UNIQUE" method="post"> 
    <div class="ui-dialog-body"> 
all the fields 
    </div> 
    <div class="ui-dialog-footer"> 
     <input class="button" id="NOT-UNIQUE" name="commit" type="submit" value="NOT-UNIQUE"> 
     <input type="button" class="button" name="cancel" value="Cancel"> 
    </div> 
</form> 
</div> 

내가 뭘하려는 것은 .dialog 컨텐츠 양식을 제출 언제가가, 사용자가 여러 번 제출하지 않도록 제출 버튼을 비활성화합니다.

$(".dialog-content").live("submit",function(){ 

    // Comment AJAX UI, spinner, disable - Needs to be inside the submit to work dynamically 
    $("form", this).ajaxStart(function() { 
     // Disable button 
     $("input[type=submit]", this).attr("disabled", true); 
    }); 
    $("form", this).ajaxComplete(function() { 
     // Re-enable button 
     $("input[type=submit]", this).removeAttr("disabled"); 
    }); 
}); 

을하지만 그것은 작동하지 않습니다

지금까지 내가 가지고있다. 목표는 모든 대화 상자에 대해 작성하지 않아도되지만 일단 모든 대화 상자에 적용하면됩니다.

생각하십니까?

Answer 1

ajaxStart/Complete는 글로벌 이벤트이므로 어떤 양식인지 알 수 없습니다.

jQuery UI 대화 상자에서 AJAX를 자동으로 수행하고 있습니까? 아니면 다른 곳에서 호출하고 있습니까?

$("form", this).bind("formSubmitted", function() { 
    // Re-enable button 
    $("input[type=submit]", this).removeAttr("disabled"); 
}); 

을 당신이를 호출하는 경우 : 자동으로 그 일을하는 경우, API에서 봐 가지고 ... 아마, "formSubmitted」라고, 그래서 대신에 결합 양식에 사용자 정의 이벤트를 발생 AJAX 자신을 누른 다음 AJAX 성공 처리기의 양식에서 "formSubmitted"를 트리거하십시오.

Answer 2

오늘이 문제가 발생하여 다른 사람과 의견을 나누고 싶었습니다.

알 수없는 양식을 호출 할 수는 없지만 내가했던 것처럼 할 수 있고 "Ajax 래퍼"를 만들 수 있습니다. 기능에 영향을주지 않으면 서 코드를 압축하는 장점이 있습니다. 단점은 적은 양의 성능 오버 헤드입니다.

함수 내에서 원하는 모든 기본값을 정의하십시오. 대화 상자에 거의 성공/오류 핸들을 사용하기 때문에 나는 이것을 좋아한다.

function ajaxWrapper(srcForm,overrides) { 
    var ret = $.extend(true,{type: "POST", 
    url: $(srcForm).attr('action'), 
    contentType: "application/x-www-form-urlencoded", 
    data: { 
     tzOffset: new Date().getTimezoneOffset(), 
    }, 
    success: // success handler, 
    error: // error handler, 
    beforeSend: function(jqXhr,plainObject) { 
     $(srcForm).find("button[type=submit], button[type=reset], input[type=submit], input[type=reset]").prop("disabled", true); 
    }, 
    complete: function(jqXHR, textStatus) { 
     $(srcForm).find("button[type=submit], button[type=reset], input[type=submit], input[type=reset]").prop("disabled", false); 
    } 
    },overrides); 
    $.ajax(ret); 
} 

$.extend(true,,)을 사용하여 개체를 병합합니다. True은 두 개체가 모두 data 개체와 두 속성을 상속하는 딥 복사로 보내고 두 개체의 data은 충돌 할 수있는 overrides을 재정의합니다.

오버라이드를 원하지 않으면 은 true,을 제거하십시오. 현재 문서에 따라 False가 지원되지 않습니다.

나는 매우 흥미로운이

ajaxWrapper($(this),{url: $(this).attr('action'), // I choose to leave action in just to make clear to me where this ajax is submitting 
    data: {ObjectID: $('#myID').val(), 
     f1: $('#f1').val(), 
     f2: $('#f2').val(), 
     someCheckbox: $('#someCheckbox').prop('checked')} 
});