I have a jquery bug that I cant solve - hoping for help with a solution. Dont know if it is browser bug related (probably not), jQuery related, or Yii (our backend) related - but I need to try to solve it with the jQuery portion. Code at bottom of message.
我有一个我无法解决的jquery错误 - 希望得到解决方案的帮助。不知道它是否与浏览器bug相关(可能不是),jQuery相关,或Yii(我们的后端)相关 - 但我需要尝试用jQuery部分来解决它。消息底部的代码。
Requirement: Disable accidental double submissions on forms.
要求:禁用表单上的意外双重提交。
Current Solution: Check for form submission state through a delegate and when the DOM form state changes to submit - append the disable attribute to the form submit button to prevent accident double form submission.
当前解决方案:通过委托检查表单提交状态,并在DOM表单状态更改为提交时 - 将disable属性附加到表单提交按钮以防止意外双表单提交。
jQuery double click disabler:
jQuery双击disabler:
$( document ).ready(function() {
$('html').delegate('form', 'submit', function() {
$(this).find(':submit').attr('disabled', true);
});
});
Problem: This works perfectly on every part of the CRM we are developing EXCEPT for a single timekeeper (clock in/clock out) feature. With the timekeeper the form has two submit buttons (one for clock in, one for clock out). Only one submit button shows at a time (Either "In" or "Out". When you click the button - it submits the form and changes the submit button to the other state by checking a session var to determine what state it is in and determines which of the two submit buttons are to be displayed. Problem is if you click it, the form appears to submit, but the state don't change. If you click it really fast a few times you can get it to change state. I suspect this is a timing or order of operations issue, but I have no idea how to fix it. The fix MUST be done on the front end, so here is the code (both the PHP being impacted and jQuery double click prevention). Perhaps a different method of disabling double submissions may work, please post your solution if you have one to try. Commenting out the current jQuery allows the form to function as designed. What might be causing this, and how might I change the jQuery double click prevention to solve it?
问题:这对于我们正在开发的CRM的每个部分都非常有效,除了单个计时器(时钟输入/时钟输出)功能。使用计时器,表单有两个提交按钮(一个用于时钟输入,一个用于时钟输出)。一次只显示一个提交按钮(“输入”或“输出”。当您单击按钮时 - 它会提交表单并通过检查会话变量将提交按钮更改为其他状态,以确定它处于什么状态和确定要显示两个提交按钮中的哪一个。问题是如果你点击它,表单似乎提交,但状态不会改变。如果你真的很快点击它几次就可以让它改变状态。我怀疑这是操作的时间或顺序问题,但我不知道如何修复它。修复必须在前端完成,所以这里是代码(PHP受影响和jQuery双击预防)。也许一种禁用双提交的不同方法可能有效,如果你有一个尝试,请发布你的解决方案。注释掉当前的jQuery允许表单按设计运行。可能导致这种情况,以及如何更改jQuery双击预防要解决吗?
On page PHP for the time clock:
在页面PHP上的时钟:
<form action = "<?=$clockUrl?>" method = "post" >
<input type = "hidden" name = "previousUrl" value = "<?=$currentUrl?>">
<?php if ($sessionVar->timeclockin) {?>
<input type = "submit" name = "submit-clockout" value = "Out">
<class="clock-time" ><?=$sessionVar->timeclockin?></class="clock-time">
<?php } else {?>
<input type = "submit" name = "submit-clockin" value = "In">
<?php }?>
</form>
2 个解决方案
#1
Thank you for pointing me in the right direction Tyler! I was able to fix the issue with the following alteration to my script.
谢谢你指点我正确的方向Tyler!我能够通过对我的脚本进行以下更改来解决问题。
function do_nothing() {
console.log("click prevented");
return false;
}
$('html').delegate('form', 'submit', function(e) {
$(e.target).find(':submit').click(do_nothing);
setTimeout(function(){
$(e.target).unbind('click', do_nothing);
}, 10000);
});
#2
Update 1:
If you are looking to prevent the button from being pressed twice then inside of your onclick or submit function, you should use something similar to the following:
如果您希望防止按钮被按下两次,那么在您的onclick或提交功能中,您应该使用类似于以下内容的内容:
$('#yourButton').prop('disabled', true);
If the page then redirects then you won't have to undo this. If it does, then do the opposite by changing true to false.
如果页面然后重定向,那么您将不必撤消此操作。如果是,则通过将true更改为false来执行相反的操作。
The submit function should instead disable the submit button until it either returns or fails.
提交函数应该禁用提交按钮,直到它返回或失败。
An alternative is to use a lambda style function and replace it temporarily with an empty function until the request returns or fails.
另一种方法是使用lambda样式函数,并使用空函数临时替换它,直到请求返回或失败。
#1
Thank you for pointing me in the right direction Tyler! I was able to fix the issue with the following alteration to my script.
谢谢你指点我正确的方向Tyler!我能够通过对我的脚本进行以下更改来解决问题。
function do_nothing() {
console.log("click prevented");
return false;
}
$('html').delegate('form', 'submit', function(e) {
$(e.target).find(':submit').click(do_nothing);
setTimeout(function(){
$(e.target).unbind('click', do_nothing);
}, 10000);
});
#2
Update 1:
If you are looking to prevent the button from being pressed twice then inside of your onclick or submit function, you should use something similar to the following:
如果您希望防止按钮被按下两次,那么在您的onclick或提交功能中,您应该使用类似于以下内容的内容:
$('#yourButton').prop('disabled', true);
If the page then redirects then you won't have to undo this. If it does, then do the opposite by changing true to false.
如果页面然后重定向,那么您将不必撤消此操作。如果是,则通过将true更改为false来执行相反的操作。
The submit function should instead disable the submit button until it either returns or fails.
提交函数应该禁用提交按钮,直到它返回或失败。
An alternative is to use a lambda style function and replace it temporarily with an empty function until the request returns or fails.
另一种方法是使用lambda样式函数,并使用空函数临时替换它,直到请求返回或失败。