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

发布于 2024-12-13 10:51:51 字数 336 浏览 4 评论 0原文

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

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

我怎么能这样做呢？

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

原文

I want to be able to disable the commandbutton below once it's hit and enable it once the event listener runs and msg1 is rendered.

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

How could I do this?

UPDATE: I found out that I can attach onclick event to the commandButton element itself to disable it. How can I detect the listener method has returned so I can enable the button again?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

初见终念 2024-12-20 10:51:51

您可以借助的 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;
    }
}

You could do it with help of the onevent attribute of <f:ajax> which points to a JavaScript function which handles the JSF Ajax events.

E.g.:

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

(note that I fixed the wrong EL in listener as well)

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

回复收藏 0 原文