在 ajax 事件上禁用/启用命令按钮答案

【问题标题】：Disable/enable commandbutton on ajax event在 ajax 事件上禁用/启用命令按钮
【发布时间】：2011-12-21 12:17:35
【问题描述】：

我希望能够在按下命令按钮后禁用它，并在事件侦听器运行并呈现 msg1 后启用它。

<h:commandButton value="Submit">                    
  <f:ajax execute="@form" render="msg1" listener="{bean.method}" />
</h:commandButton>

我该怎么做？

更新：我发现我可以将 onclick 事件附加到 commandButton 元素本身以禁用它。如何检测侦听器方法已返回，以便再次启用按钮？

【问题讨论】：

请注意，您使用的不是 JSP，而是 JSF。更重要的是，您很可能使用 JSP 的后续 Facelets（JSP 不直接支持 f:ajax）。我编辑了标题和标签。请记住这一点，以备将来的问题。要了解差异，请参阅stackoverflow.com/questions/2095397/…

标签： ajax jsf jsf-2

【解决方案1】：

您可以借助<f:ajax> 的onevent 属性来完成此操作，该属性指向处理JSF Ajax 事件的JavaScript 函数。

例如：

<h:commandButton value="Submit">
  <f:ajax execute="@form" render="msg1" listener="#{bean.method}" onevent="handleDisableButton" />
</h:commandButton>

（请注意，我在 listener 中也修复了错误的 EL）

用这个 JS：

function handleDisableButton(data) {
    var buttonElement = data.source; // The HTML DOM element which invoked the ajax event.
    var ajaxStatus = data.status; // Can be "begin", "complete" and "success".

    switch (ajaxStatus) {
        case "begin": // This is called right before ajax request is been sent.
            buttonElement.disabled = true;
            break;

        case "complete": // This is called right after ajax response is received.
            // We don't want to enable it yet here, right?
            break;

        case "success": // This is called when ajax response is successfully processed.
            buttonElement.disabled = false;
            break;
    }
}

【讨论】：

我无法让 handleDisableButton 执行。出于某种原因，onevent 不会触发。 :|
您使用的是什么 JSF impl/version？您使用的是 JSP 还是 Facelets？（即，您使用的是 .jsp 还是 .xhtml 文件？）您最初使用 JSP 标记了问题，但随后 <f:ajax> 在不破解一个和另一个的情况下根本无法工作。
我正在使用 .xhtml 文件和 JSF 2.0
您对 JSF impl/version 并不完全清楚。您刚刚提到了 JSF 规范版本。我要的是 impl（Mojarra 或 MyFaces 或其他任何东西及其版本）。它在 Mojarra 2.0.6 和 2.1.3 上运行良好（尽管如果它不适用于旧版本，我会感到惊讶）。
嗯，我已经在早期的 JSF 版本中使用了 onevent 处理程序，当然也使用 Mojarra 2.1.1。也许您的 JS 代码只是语法错误。您究竟从我的回答中编辑了什么？ webbrowser 的 JS 解析器/控制台到底说了什么？

【解决方案2】：

如果您使用richfaces，a4j:commandButton 具有防止这种情况发生的状态属性。

【讨论】：