防止在 JSF 页面中双击答案

【问题标题】：Prevent double click in JSF page防止在 JSF 页面中双击
【发布时间】：2015-05-10 16:23:23
【问题描述】：

按照Here的描述，我将在点击后禁用按钮

这是我的代码，但点击后无法禁用按钮。

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>
    <title></title>

    <script language="JavaScript" type="javascript">
        function handleDisableButton(data) {
            if (data.source.type != "submit") {
                return;
            }

            switch (data.status) {
                case "begin":
                    data.source.disabled = true;
                    break;
                case "complete":
                    data.source.disabled = false;
                    break;
            }
        }

        jsf.ajax.addOnEvent(handleDisableButton);
    </script>

</h:head>
<h:body>

    <h:form>
        <h:inputText id="email" value="#{bean2.email}"/>

        <h:commandButton id="saveBtn" action="#{bean2.showClicked}" value="send">
            <f:ajax onevent="handleDisableButton"/>
        </h:commandButton>

    </h:form>
</h:body>
</html>

而showClicked() 只是说clicked：

@ManagedBean
@SessionScoped
public class Bean2 {

private String email;

public void showClicked(){
    System.out.println("clicked");
}
//getter/setter for email
}

代码正是他喜欢的。

【问题讨论】：

标签： javascript jsf

【解决方案1】：

一切正常。它只是太快地提交表单，您甚至没有注意到它实际上在短时间内被禁用。在 action 方法中设置调试断点或在 action 方法中添加Thread#sleep() 会更好。

鉴于您仍然以当前形式提出此问题，我了解您实际上希望在提交后永久禁用它，以便最终用户永远无法点击它？（注意，这和“防止双击”是绝对不一样的）

在这种情况下，删除complete 下面的代码行。即在完成 ajax 请求时重新启用按钮。这显然不是您想要的。

与具体问题无关，jsf.ajax.addOnEvent 基本上告诉 JSF 在完成每个 <f:ajax> 请求时执行给定的 JS 函数。然而，你又在<f:ajax onevent> 中钩住了它。这是不必要的。根据具体的功能要求选择其中一种。

而且，暂停一点 JSF 并花更多时间学习 basic JavaScript 也不是一个坏主意，这样您就可以通过简单地阅读 JavaScript 代码来了解实际的代码流。 JSF 不仅需要对 Java 和 Servlet 有基本的了解，还需要对 HTTP、HTML、CSS 和 JavaScript 有基本的了解。

【讨论】：

我删除了data.source.disabled = false; 行，现在提交后它没有被禁用。
IDE 说：The expression is not assignment or call in f:ajax onevent="handleDisableButton"
到目前为止提供的信息中看不到问题。你的代码对我来说很好用。
对，您的 <script> 声明在具有该 XHTML 文档类型的 Chrome 中失败。摆脱type 和language。你不需要它们。只需使用不带任何属性的 <script> 或 <h:outputScript>，最好与普通 HTML5 文档类型 <!DOCTYPE html> 一起使用。