ASP.NET MVC : 지연이있는 AJAX 제출 양식

Question

사용자가 텍스트 상자에 무엇인가를 입력 할 때마다 제출해야하는 AJAX 양식이 있습니다.

다음 코드는 작동 : 나는 양식을 제출에서 1 초 지연이되도록 코드를 업데이트하기 위해 노력했습니다

<% 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" /> 

<%} %> 

사용자가 짧은 시간 동안 입력이 멈출 때까지 제출되는 아약스 양식을 지연하는 방법에 대한 어떤 제안이?

업데이트 : Chrome을 사용하여 스크립트가 catch 된 예외에서 MicrosoftAjax.js의 어딘가에서 멈추는 것을 발견했습니다. 나는 예외가 정확히 무엇인지 찾는 방법을 모른다. 2 초를 기다린다 정확하게

var timerid; 

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

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

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

코드는 "submitWithTimeout"기능 양쪽 라인을 실행하고, 다음과 같이 디버깅 목적

는 I 코드를 재 작성. submitAjaxForm 함수에 도달하고 앞서 언급 한 것처럼 MicrosoftAjax.js 파일의 catch 된 예외에서 중지합니다.

업데이트 2 : 현재 MicrosoftAjax.js의 디버그 버전을 사용하고 있으며 오류의 원인을 발견했습니다. Chrome에서 expression watcher를 사용하여 다음 문제로 범위를 좁힐 수있었습니다. MicrosoftAjax.js가 실행되는 동안 "eventObject"변수가 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)은 "이벤트"파라미터에 널 값을 갖는다.

Answer 1

.

마지막 업데이트 (질문 참조)에서 언급했듯이 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을 사용하는 것이 좋습니다. 이렇게하면 매우 쉽게 구현할 수 있습니다. 코드는 간단하게 다음과 같습니다 일정 지연 후 AJAX 양식을 제출하려고 할 때 특별한 요구 사항이있는 것 같습니다

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