如何在不阻止动作和actionListener被调用的情况下禁用h：commandButton？

问题描述

我有一个简单的脚本标记，其中包含一个函数，我将其包含在html正文的底部。此脚本只是禁用提交按钮。然后我有一个 onclick 事件调用该函数。

I have a simple script tag with a function that I include at the bottom of the html body. This script simply disables a submit button. I then have a onclick event that calls the function.

我在5个不同的页面中有这个代码，它有效五个中的三个。

I have this code in 5 different pages and it works on 3 of the five.

以下是代码：

<!-- more non-important html -->

<h:commandButton id="buttonToDisable"
    value="some text"
    action="#{myBean.myBeansAction}"
    actionListener="#{myBean.myBeansActionListener}"
    onclick="disableButton()">

    <!-- I also have an f:param in some of these pages but I didn't
    think that would matter -->

</h:commandButton>

<!--  more non-important html -->

<script>
    function disabledButton() {
        document.getElementById("myForm:buttonToDisable").disabled = 'true';
    }
</script>

任何帮助将不胜感激。执行和不执行的页面之间的唯一区别是操作和 actionListeners 是不同类型的bean还有一些 f：params 而其他人没有。

Any help would be greatly appreciated. The only differences between the pages that do and don't work is that the action and actionListeners are different types of beans and some have f:params and others don't.

推荐答案

您应该在click事件之后从服务器端actionListener设置commandButton组件的启用状态。

You should be setting the enabled status of the commandButton component from the server side actionListener after the click event.

<h:commandButton disabled="#{managedBean.someBooleanPropertyThatWasToggledInTheEvent}" />

您可以在调用服务器端事件后设置托管属性，并在页面上禁用它刷新。

You can simply set the managed property after invoking your server side event and it will be disabled on the page refresh.

更新：

我刚才意识到OP已经完全不同的问题。用户不耐烦并单击按钮而不是等待回发。但是，禁用命令按钮有时会阻止调用服务器端操作。

I just realized that the OP has a completely different issue. Users are impatient and clicking the button and not waiting for the postback. Disabling the command button however will sometimes prevent the server side actions from being invoked.

解决此问题的正确方法是在页面上放置一个绝对位置div覆盖比页面上任何其他元素更高的z-index。这样可以防止在叠加div之外的任何内容上发生进一步的点击。以下是一个示例：

The correct way to resolve this is to put an absolute position div overlay across the page with a higher z-index than any other element on the page. This will prevent further clicks from occurring on anything but the overlay div. Here is an example:

CSS样式

.div-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
}

利用jQuery fadeToggle功能的Javascript切换功能

function toggleLoadingOverlay() {
  var div = jQuery('.div-overlay');
  div.fadeToggle(150);
}

**单击按钮后将发生的JSF commandButton onclick事件（和假设事件传播尚未中断）**

** JSF commandButton onclick event that will occur once the button is clicked (and assuming that event propogation has not been interrupted)**

<h:commandButton onclick="toggleLoadingOverlay();" action="..." />

这篇关于如何在不阻止动作和actionListener被调用的情况下禁用h：commandButton？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！