2010-10-14 43 views
0

我在修復現有ASP.NET MVC網站中的錯誤時遇到問題。JQuery AJAX事件問題

其中一個視圖有一系列用戶輸入數據的文本框。每個文本框都有一些JavaScript附加到blur事件,以便在文本發生更改時回發到服務器。更具體地說,代碼使用JQuery $ .ajax方法來進行這些調用。這是爲了將臨時數據保存到會話中。

在同一視圖中還有一個保存按鈕,它也通過AJAX在click事件中發佈數據。我遇到的問題是,如果用戶在其中一個文本框具有焦點時單擊保存按鈕,則會在按鈕單擊事件和兩個ajax帖子同時被調用的同時觸發模糊事件。這會導致不可靠的行爲。

我知道目前的設計不是很好,但我正在尋找最簡單的解決方案。排隊這兩個事件是否有可能?還是有另一種解決方案?謝謝。

回答

0

使用setTimeout模糊事件觸發時,您可能會推遲Ajax調用,那麼當setTimeout火災引用的函數,檢查一個變量,看是否保存按鈕被點擊第一:

var isSaved = false; 
function onblur(ev) { 
    setTimeout(function(){ 
     if (!isSaved) { 
      // make ajax call 
     } 
    }, 200); 
} 

function onsave(ev) { 
    isSaved = true; 
    // make ajax call 
} 
+0

哈通話。同一個想法在同一時間。 – 2010-10-14 13:44:08

0

可以設置如果某些狀態變量尚未設置爲true,則在稍後超時後調用onblur,並且可以在提交表單時將該狀態變量設置爲true。事情是這樣的:

$(document).ready(function() { 
    var form_processed = false; 
    $('input:text').blur(function() { 
     var $el = $(this); 
     setTimeout(function() { 
      if (!form_processed) { 
       // do ajax call with $el ... 
      } 
     }, 500); 
    }) 
    $('form').submit(function() { 
     form_processed = true; 
     // submit form via ajax ... 
     return false; 
    }); 
}); 

(此代碼是未經測試,但希望它的工作原理)

1

而不是使用保持巡檢定時器你可以只使用一個實際的隊列。這樣可以確保每個ajax調用都按照正確的順序執行,如果有人只是通過字段選項卡,而不是在恰當的時刻觸發其定時器。

var queue = new Array(0); 
$(function() { 
    $('#inputID').blur(function() { AjaxQueue(this); }); 
}); 

function AjaxQueue(element) { 
    var length = queue.push(element); 
    if (length == 1) { 
    ExecuteNextQueueItem(); 
    } 
} 

function ExecuteNextQueueItem() { 
    var queueElement = queue.shift(); 
    if (queueElement != null) { 
    // ajax call with queueElement 
    } 
} 

然後在你的結果的回調函數的結束只是做出ExecuteNextQueueItem();

+0

爲確保發送正確的數據,您甚至可以根據字段及其值創建一個對象,並將其放入隊列中,而不是僅排隊元素本身。 – Greg 2010-10-14 14:12:41