如何禁用h：commandButton而不阻止调用action和actionListener？

小编典典

如何禁用h：commandButton而不阻止调用action和actionListener？

jsp

我有一个简单的脚本标签，带有一个包含在html主体底部的函数。该脚本仅禁用提交按钮。然后onclick，我有一个调用该函数的事件。

我在5个不同的页面中有此代码，并且可以在5个页面中的3个上工作。

这是代码：

<!-- 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>

任何帮助将不胜感激。可以工作的页面和不能工作的页面之间的唯一区别是action和actionListeners是不同类型的bean，有些则具有，f:params而另一些则没有。

阅读 521

2020-06-08

共1个答案

小编典典

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

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

您只需在调用服务器端事件后设置托管属性，即可在页面刷新时将其禁用。

更新：

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

解决此问题的正确方法是在页面上放置绝对位置div叠加层，其z-
index值高于页面上的任何其他元素。这样可以防止在重叠div以外的任何位置上产生更多点击。这是一个例子：

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事件

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

2020-06-08