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

Question

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

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

我怎么能这样做？

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

Answer 1

您可以在 onevent 的帮助下做到这一点。 <f:ajax> 的属性它指向一个处理 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;
    }
}