Prevent double click in JSF page

Question

I am going to disable the button after clicked as describes Here

Here is my code, but it can't disable the button after clicked.

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

And the showClicked() simply says clicked :

@ManagedBean
@SessionScoped
public class Bean2 {

private String email;

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

The code is exactly what he preferred.

score 0 · Accepted Answer · answered May 10 '15 at 16:40

It's working fine. It only submits the form too fast you didn't even notice it actually being disabled for a short time. Put a debug breakpoint in the action method or add Thread#sleep() to the action method, then you'll notice it better.

Given that you're asking this question in its current form anyway, I understand that you actually want to permanently disable it after submit so that the enduser is never able to click it? (note that this is absolutely not the same as "double click prevention")

In that case, remove the code line below complete. It's namely re-enabling the button on complete of ajax request. This is apparently not what you wanted.

Unrelated to the concrete problem, the jsf.ajax.addOnEvent basically tells JSF to execute the given JS function on complete of every <f:ajax> request. Yet you're hooking it once again in <f:ajax onevent>. This is unnecessary. Choose the one or other, depending on the concrete functional requirement.

And, it wouldn't be a bad idea either to take a little JSF pause and spend a bit more time in learning basic JavaScript, so that you can tell the actual code flow by simply reading the JavaScript code. JSF requires a basic understanding of not only Java and Servlets, but also HTTP, HTML, CSS and JavaScript.

I removed the `data.source.disabled = false;` line, Now it not disabled after submit. — , May 10 '15 at 17:11
The IDE says : `The expression is not assignment or call` in `f:ajax onevent="handleDisableButton"` — , May 10 '15 at 17:13
The problem is not visible in the information provided so far. Your code works just fine for me. — BalusC, May 10 '15 at 17:25

Prevent double click in JSF page

1 Answers1