ASP.NET MVC：遅延付きAJAX送信フォーム

Question

ユーザーがテキストボックスに何かを入力するたびに提出する必要があるAJAXフォームがあります。

次のコードは動作します：

<% using (Ajax.BeginForm("myAction", "myController", null, new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "resultDiv" }, new { id = "myForm" })) 
    {%> 

<script type="text/javascript" language="javascript"> 
    jQuery("#myForm").keyup(function() { $('#myForm').trigger('onsubmit'); }); 
</script> 

Search: <input type="text" id="myTextField" /> 

<%} %> 

私は、フォームを送信中に1秒の遅延があるように、コードを更新しようとしてきました。この遅延は、ユーザーが1秒間の入力を中止したときにのみフォームが送信されるようにします。このコードはを動作しません：

<% using (Ajax.BeginForm("myAction", "myController", null, new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "resultDiv" }, new { id = "myForm" })) 
    {%> 

<script type="text/javascript" language="javascript"> 
    var timerid; 
    jQuery("#myForm").keyup(function() { 
     clearTimeout(timerid); 
     timerid = setTimeout(function() { $('#myForm').trigger('onsubmit'); }, 1000); 
    }); 

</script> 

Search: <input type="text" id="myTextField" /> 

<%} %> 

ユーザーが短時間の入力を停止するまでに提出されてからAjaxフォームを遅らせる方法上の任意の提案は？

更新日： Chromeを使用すると、スクリプトがMicrosoftAjax.jsのどこかで捕捉された例外で停止することがわかりました。私は例外が何であるかを正確に見つける方法を知らない。デバッグ目的のため

次のように、私は、コードを書き直し：

var timerid; 

    jQuery("#myForm").keyup(submitWithTimeout); 

    function submitWithTimeout() { 
     clearTimeout(timerid); 
     timerid = setTimeout(submitAjaxForm, 2000); 
    } 

    function submitAjaxForm() { 
     $('#myForm').trigger('onsubmit'); 
    } 

コードが「submitWithTimeout」関数の両方のラインを実行し、正確に2秒待ちます。 submitAjaxForm関数に到達し、前述のように、MicrosoftAjax.jsファイルの捕捉された例外で停止します。

更新2：私は現在、MicrosoftAjax.jsのデバッグバージョンを使用しており、エラーの原因を発見しました。 Chromeで式ウォッチャーを使用すると、次の問題に絞り込むことができました。「eventObject」変数は、MicrosoftAjax.jsが実行されている間はnullです。私がソースコードから集めるのは、タイマーを使ってフォームを送信するときに、onsubmitコードの「イベント」がnullであるということです。なぜどんなアイデア？タイムアウト法を用いる場合

<form action="myAction" id="myForm" method="post" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'myResult' });"> 

new Sys.UI.DomEvent(event)

は、「イベント」パラメータにNULL値を有します。

Answer 1

一定の遅延の後にAJAXフォームを送信しようとしたときに特別な要件があるようです。

私の最後の更新（質問を参照）で述べたように、MicrosoftAjax.jsライブラリが実行され、フォームを送信しようとすると、event変数が割り当て解除されてしまうという問題があります。 event変数には、フォームの送信をトリガしたKeyboardEvent（または私の想像するMouseEvent）があります。このevent変数は、 "keyup"イベントが発生したときに割り当てられますが、有効期限が切れた後には使用できなくなる場合は、のスコープが失われている可能性があります（）。

私の回避策は、イベントデータをキーが押されたときの状態にリセットするためにグローバル変数に値を格納することです。

そのため、コードは次のようになります：

var timerid; 
var timerEvent; 

jQuery("#myForm").keyup(submitWithTimeout); 

function submitWithTimeout() { 
    clearTimeout(timerid); 
    timerEvent = event; 
    timerid = setTimeout(function() { submitAjaxForm(); }, 2000); 
} 

function submitAjaxForm() { 
    event = timerEvent; 
    $('#myForm').trigger('onsubmit'); 
} 

Answer 2

TypeWatch jquery pluginを使用することをお勧めします。これは、これを非常に簡単に行うことができます。あなたのコードは、単純に次のようになります。

$("#myForm input").typeWatch({ 
    callback: function() { 
     $('#myForm').trigger('onsubmit'); 
    }, 
    wait: 1000, 
    highlight: true, 
    captureLength: 3 
});