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 сек.Задержка позволит отправить форму только тогда, когда пользователь перестанет набирать текст в течение одного секунды.Этот код не работает :

<% 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, как упоминалось ранее.

UPDATE 2 : я сейчас использую отладочную версию MicrosoftAjax.js и обнаружилисточник ошибки.Используя средство наблюдения за выражениями в Chrome, я смог сузить его до следующей проблемы: переменная «eventObject» имеет значение null, пока выполняется MicrosoftAjax.js.Что я понял из исходного кода, так это то, что «событие» кода onsubmit является нулевым при использовании таймера для отправки формы.Любые идеи, почему?

<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) * * * * * * Значение параметра *1027* имеет нулевое значение для параметра «событие».

Answer 1

Я бы порекомендовал вам использовать плагин TypeWatch jquery , который позволит вам очень легко этого добиться.Ваш код может выглядеть просто так:

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

Answer 2

Кажется, есть особое требование при попытке отправить форму AJAX после определенной задержки.

Как упоминалось в моем последнем обновлении (см. Вопрос), проблема связана с тем, что переменная event не назначается при запуске библиотеки MicrosoftAjax.js при попытке отправить форму. Переменная 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');
}