2012-08-05 111 views
0

所有:表 - 停止雙提交

我正在開發使用jQuery/MVC /淘汰賽正在採集數據,並使用.post的$它發佈到服務器在一個相當昂貴的交易中的Web應用程序。

我不希望用戶「雙擊」或不耐煩點擊兩次。除此之外,UI的線索發生了一些事情,我想出了一種我相信能夠達到這個目的的方法,但我想確保沒有這樣做的警告或隱藏的危險。

下面是一個使用setTimeout模仿「通過ajax提交」請求的JSFiddle。我在函數「alreadyClicked」上設置了一個內部字段爲true,運行「ajax請求」,並在後處理完成後將其設置爲false。如果你轉到下面的小提琴並且有一個支持console.log的調試器工具(la firefox),你可以點擊瘋狂並在進入方法時以及跳過時跳過。

http://jsfiddle.net/puhfista/vVUCm/7/

感謝在這個主題中,您覺得像渲染的任何建議。

+0

您如何提交?通過'$ .ajax'?您可以禁用'beforeSend'中的按鈕並在'complete'事件中重新啓用它 – Andre 2012-08-05 15:07:35

回答

0

你在你的問題,你在這個項目中使用的淘汰賽中提到。你想要什麼實現的淘汰賽方式是聲明在您的視圖模型中觀察到所謂的像「isPosting」:

self.isPosting = ko.observable(false); 

在HTML您提交按鈕,數據綁定到這個觀察到:

<button data-bind="click:doPost, disable: isPosting">Submit</button> 

在您的「doPost」單擊處理程序中,您需要在發佈帖子時將isPosting設置爲true,並在完成後設置爲false。

1

你爲什麼不這樣做:

$("<your element selector>").click(function(){ 
    $(this).attr('disabled', 'disabled'); 
    // do your postback here 
}); 

只是不要忘了啓用元素回來一次回傳完成

0

@DimitryV:這不是一個很好的解決方案。你會更好地控制提交事件,以便你能夠捕捉到用戶按Enter鍵來提交表單。

$("form").submit(function() { 
    $(this).attr('disabled', 'disabled'); 
    // do your postback here 
}); 

這樣你就可以捕獲所有提交。就像一個注意事項!