2012-08-05 79 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 
}); 

这样你就可以捕获所有提交。就像一个注意事项!