在具有Ajax事件的页面上,我想在Ajax调用返回之前禁用所有操作(以防止双重提交等问题)
我通过return false;在"锁定"页面时预先设置当前的onclick事件来尝试此操作,并在"解锁"页面时稍后删除它.但是,在"解锁"后,操作不再处于活动状态 - 您无法触发它们.
为什么这不起作用？见下面的示例页面.还有其他想法来实现我的目标吗？
示例代码:
链接和按钮都显示JS警报; 当按下锁定,然后解锁事件处理程序与以前一样,但不起作用......？!？
该代码最终将与特立尼达合作,但也应在外部工作.
<html><head><title>Test</title>
<script type="text/javascript">
function lockPage()
{
document.body.style.cursor = 'wait';
lockElements(document.getElementsByTagName("a"));
lockElements(document.getElementsByTagName("input"));
if (typeof TrPage != "undefined")
{
TrPage.getInstance().getRequestQueue().addStateChangeListener(unlockPage);
}
}
function lockElements(el)
{
for (var i=0; i<el.length; i++)
{
el[i].style.cursor = 'wait';
if (el[i].onclick)
{
var newEvent = 'return false;' + el[i].onclick;
alert(el[i].onclick + "\n\nlock -->\n\n" + newEvent);
el[i].onclick = newEvent;
}
}
}
function unlockPage(state)
{
if (typeof TrRequestQueue == "undefined" || state == TrRequestQueue.STATE_READY)
{
//alert("unlocking for state: " + state);
document.body.style.cursor = 'auto';
unlockElements(document.getElementsByTagName("a"));
unlockElements(document.getElementsByTagName("input"));
}
}
function unlockElements(el)
{
for (var i=0; i<el.length; i++)
{
el[i].style.cursor = 'auto';
if (el[i].onclick && el[i].onclick.search(/^return false;/)==0)
{
var newEvent = el[i].onclick.substring(13);
alert(el[i].onclick + "\n\nunlock -->\n\n" + newEvent);
el[i].onclick = newEvent;
}
}
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h1>Page lock/unlock test</h1>
<p>Use these actions to lock or unlock active elements on the page:
<a href="javascript:lockPage()">lock</a>,
<a href="javascript:unlockPage()">unlock</a>.</p>
<p>And now some elements:</p>
<a onclick="alert('This is the action!');return false;" href="#">link action</a>
<input type="button" value="button action" onclick="alert('This is another action!')"/>
</body>
</html>
谢谢你们的想法和答案.
现在我看到我混淆了字符串和函数,这显然无法工作;(
我应该明确表示我们使用一些Web FW和标记库(Trinidad)来创建事件处理(和Ajax)代码,因此我无法直接编辑它或使用同步Ajax等.
而且,Ajax只是应该执行此代码的一种情况.它的目的是阻止用户双重提交页面/操作,这也与非Ajax页面相关,您可以在其中点击按钮.我知道这不是很安全,并且只是为了避免过于频繁地获取导航错误页面(当然我们有服务器端保护),这只是一个"方便"的东西.
所以,可能会尝试div叠加.
再次感谢
Christoph.
如何设置全局变量
actions_disabled = 0
当AJAX调用开始时递增,然后在完成时递减.然后,您的所有"操作"处理程序都可以开始
if (actions_disabled) return false;
比调试自修改代码简单得多!
或者,要锁定您的控件,您可以设置:
control.disabled="disabled"
这将有灰色的奖励,使用户明显无法提交.要解锁,只需设置:
control.disabled=""
基于评论的新想法(不能在评论中引用代码,它似乎......):
您总是可以从Javascript对象中挂起额外的属性:
要锁定,您可以:
control.onclick_old = control.onclick
control.onclick = "return false;"
要解锁,您可以:
control.onclick = control.onclick_old