有没有一种方法来禁用命令链接到Ajax响应呈现 [英] Is there a way to disable the command link until the ajax response is rendered

问题描述

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

We have radio buttons and ajax call for change in value of the radio button.

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

如果用户选择不同的价值没有在Ajax调用，并在此期间用户点击提交表单和空值被传递到后端的延迟（如字段没有出现在页面上）。

If user selects a different value there is a delay in the ajax call and in the mean time users clicks submit form and empty values are being passed to the backend (as fields did not appear on the page).

有没有一种方法来禁用命令链接到Ajax响应呈现？

Is there a way to disable the command link until the ajax response is rendered?

推荐答案

是的，肯定是有。你只需要改变一个命令按钮的命令链接，因为JSF命令链接不平凡disablable被JS手段。你可以在必要时扔在一些CSS来使按钮看起来更好。

Yes, certainly there is. You only need to change the command link by a command button, because a JSF command link is not trivially disablable by JS means. You could if necessary throw in some CSS to make the button look like better.

一旦做到这一点，你可以使用＆LT; F：AJAX的OnEvent＆GT; 来对AJAX事件监听。在开始Ajax请求的，你可以只禁用命令按钮。在Ajax请求的成功，你可以只重新启用命令按钮。

Once done that, you could make use of <f:ajax onevent> to listen on ajax events. On begin of the ajax request, you could just disable the command button. On success of the ajax request, you could just re-enable the command button.

因此​​，考虑到这一事件监听器功能例如，

So, given this event function listener example,

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;
    }
}

或者更短，但也许很难跨preT对于初学者：

Or, shorter, but perhaps harder to interpret for starters:

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

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

You can perform the desired requirement as follows:

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

这篇关于有没有一种方法来禁用命令链接到Ajax响应呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！