有没有办法在呈现 ajax 响应之前禁用命令链接答案

【问题标题】：Is there a way to disable the command link until the ajax response is rendered有没有办法在呈现 ajax 响应之前禁用命令链接
【发布时间】：2013-07-18 21:48:14
【问题描述】：

我们有单选按钮和 ajax 调用来改变单选按钮的值。

<h:selectOneRadio id="name" value="#{nameTO.suffix}">           
        <f:ajax render="fname lname"/>
        <f:selectItems value="#{optionValues['suffix']}" />
</h:selectOneRadio>

如果用户选择了不同的值，则 ajax 调用会出现延迟，同时用户单击提交表单并且空值被传递到后端（因为页面上没有出现字段）。

有没有办法在呈现 ajax 响应之前禁用命令链接？

【问题讨论】：

标签： javascript ajax jsf-2

【解决方案1】：

是的，当然有。您只需要通过命令按钮更改命令链接，因为 JSF 命令链接不会通过 JS 方式轻易禁用。如有必要，您可以添加一些 CSS 以使按钮看起来更好。

完成后，您可以使用<f:ajax onevent> 来监听ajax 事件。在 ajax 请求开始时，您可以禁用命令按钮。 ajax 请求成功后，您可以重新启用命令按钮。

所以，给定这个事件函数监听器的例子，

function handleDisableButton(data) {
    var button = document.getElementById("formId:buttonId");

    switch (data.status) {
        case "begin": // This is called right before ajax request is been sent.
            button.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 right after update of HTML DOM.
            button.disabled = false;
            break;
    }
}

或者，更短，但对初学者来说可能更难解释：

function handleDisableButton(data) {
    document.getElementById("formId:buttonId").disabled = (data.status != "success");
}

您可以按如下方式执行所需的要求：

<f:ajax ... onevent="handleDisableButton" />

【讨论】：