在 JSF 中禁用命令按钮
Posted
技术标签:
【中文标题】在 JSF 中禁用命令按钮【英文标题】:Disable commandButton in JSF 【发布时间】:2010-11-17 12:22:53 【问题描述】:这看起来应该很简单,但我感觉不到。
我有一个执行长时间运行的服务器端任务(10-15 秒)的 JSF 命令按钮。我已经看到了按钮上下文在被单击后发生变化的表单(按钮上的标签会发生变化,并且按钮会被禁用,直到处理完成)。
我正在使用 ICEFaces,并且在底层页面代码上将 disabled 属性设置为布尔值。
绑定到按钮的动作侦听器更改了布尔值以禁用它,但遗憾的是,JSP 上没有更改。
有人吗?
【问题讨论】:
【参考方案1】:您可以做的是使用 javascript 更改按钮的状态:
<h:commandButton ... onclick="this.disabled=true"/>
修改评论:
如果前面的代码没有提交表单,那么您必须在单击后一段时间禁用按钮,而不是在单击本身的“期间”。您可以使用以下代码执行此操作:
<h:commandButton ... onclick="setTimeout('this.disabled=true', 100);"/>
我不确定在 setTimeout 方法中直接使用 this 关键字是否能正常工作。如果没有,您可以使用另一种方式:
<h:commandButton ... onclick="disableButton(this.id);"/>
使用以下 Javascript 函数:
function disableButton(buttonId)
setTimeout("subDisableButton(" + buttonId + ")", 100);
function subDisableButton(buttonId)
var obj = document.getElementById(buttonId);
if (obj)
obj.disabled = true;
(我确信这段代码可以被增强,因此)
【讨论】:
遗憾的是,对于icefaces,这种方法不起作用。它实际上完全禁止它提交。我尝试在 onMouseUp 上执行此操作,但在第一次单击后将其禁用... 那我的新回复呢? 按钮禁用后可以重新启用吗?【参考方案2】:您应该使用 ice:commandButton 而不是 h:commandButton,因为它具有 partialSubmit 属性,它将作为 AJAX 调用执行操作。这应该会刷新按钮的状态,因此如果服务器上的属性已设置为 false,则应禁用按钮。
【讨论】:
+1 用于利用 OP 使用的框架以优雅的方式解决问题。【参考方案3】:做一个 javascript submit();先禁用按钮,然后禁用按钮
【讨论】:
【参考方案4】:类似于 romaintaz 的解决方案
对于 Firefox 特定的解决方案,以下工作(在 IE 中不起作用):
<h:commandButton ... onclick="disableButton(this.id);" />
使用Javascript函数:
function disableButton(buttonId)
var obj = document.getElementById(buttonId);
if (obj)
setTimeout(function(thisObj) thisObj.disabled=true; , 50, obj);
【讨论】:
【参考方案5】:在 icefaces 更新 DOM 后执行此操作。你可以使用ice.onAfterUpdate(callback)
:
这里有 jQuery
ice.onAfterUpdate(function()
updateButtons();
);
function updateButtons()
if(!isButtonEnabled())
jQuery(".myButton").attr('disabled', true);
jQuery(".myButton").removeClass("iceCmdBtn").addClass("iceCmdBtn-dis");
else
jQuery(".myButton").removeAttr('disabled');
jQuery(".myButton").removeClass("iceCmdBtn-dis").addClass("iceCmdBtn");
【讨论】:
以上是关于在 JSF 中禁用命令按钮的主要内容,如果未能解决你的问题,请参考以下文章
当命令 CanExecute 为 false 时,按钮不会被禁用