jQueryバインディングajaxStartとajaxCompleteをフォームタイプにバインドしますか？

Question

私のアプリにはいくつかのjquery-ui-dialogがあります。ここでは、それらの間の共通のテンプレートがあります：私が何をしたいのですがどのような

<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自身で、フォームの "formSubmitted"をAJAX成功ハンドラ内でトリガするだけです。

Answer 2

今日このような状況が続き、誰かと分かち合いたいと思っていました。

不明なフォームを呼び出すことはできませんが、私が行ったようにして "Ajax Wrapper"を作成することができます。機能に影響を与えずにコードを凝縮するという利点があります。欠点は、パフォーマンスオーバーヘッドのわずかな量です。

機能内で必要なすべてのデフォルトを定義します。私はこれが好きです。なぜなら、ダイアログには、グローバルに近い成功/エラーハンドルを使用しているからです。

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オブジェクトを持ち、両方からプロパティを継承できるようにします。一方で、overridesを優先してオーバーライドすると、2つのオブジェクトのdataが競合する可能性があります。

オーバーライドしたくない場合は、は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')} 
});