在 JSF 中禁用命令按钮答案

【问题标题】：Disable commandButton in JSF在 JSF 中禁用命令按钮
【发布时间】：2010-11-17 12:22:53
【问题描述】：

这看起来应该很简单，但我感觉不到。

我有一个执行长时间运行的服务器端任务（10-15 秒）的 JSF 命令按钮。我已经看到了按钮上下文在被单击后发生变化的表单（按钮上的标签会发生变化，并且按钮会被禁用，直到处理完成）。

我正在使用 ICEFaces，并且在底层页面代码上将 disabled 属性设置为布尔值。

绑定到按钮的动作侦听器更改了布尔值以禁用它，但遗憾的是，JSP 上没有更改。

有人吗？

【问题讨论】：

标签： jsf icefaces

【解决方案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");
   }
}

【讨论】：