disable button using jquery and enable after action is completed using jquery

Question

I would like to write a if else statement in a jQuery. If the button is click, disable the button until the action is completed then only enable back. This is the codes I currently have. When I navigate to the page, the action kept looping non stop. Pls bear with me as I'm still new to jQuery.

FYI, I am using primefaces commandbutton

<?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.w3c.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:hx="http://www.ibm.com/jsf/html_extended">
<h:head>
    <title>ma1009.xhtml</title>
    <meta http-equiv="keywords" content="enter,your,keywords,here" />
    <meta http-equiv="description"
    content="A short description of this page." />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <script src="../../jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            if ($("#button").click()) {
                $("#button", this).prop('disabled', true);
            } else {
                $("#button", this).prop('disabled', false);
            }

        });
    </script>
</h:head>

<h:body>
    <h:form id="form1" enctype="multipart/form-data" prependId="false">

        <p:commandButton id="button" type="submit" value="Submit"
            action="#{pc_Ma1009.doSubmitAction}" ajax="false"></p:commandButton>

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

It seems your code is completely wrong, tell me what action is intended to be complete? — frogatto
– frogatto, Commented Jul 18, 2013 at 6:16
@ABFORCE the action="#{pc_Ma1009.doSubmitAction}". This will take around 15 second to complete. — hahagal
– hahagal, Commented Jul 18, 2013 at 6:30
I think the Alexey Aza's answer is very good for you, you should do your action in the specified place in Alexey Aza answer — frogatto
– frogatto, Commented Jul 18, 2013 at 6:33
@ABFORCE how should I call the action inside the javascript? — hahagal
– hahagal, Commented Jul 18, 2013 at 6:38
Is your action a function? if so, call it in javascript by your_function_name(); — frogatto
– frogatto, Commented Jul 18, 2013 at 6:40

Oleksii Aza · Accepted Answer · 2013-07-18 06:32:17Z

2

It should be something like this:

 $(document).ready(function(e) {
    e.preventDefault();
    $("#button").click(function(){
        $(this).prop("disabled", true);
        //your action (maybe function pc_Ma1009.doSubmitAction()), look at your html generated by <p:commandButton id="button"
        $(this).prop("disabled", false);
    });

});

edited Jul 18, 2013 at 6:32

answered Jul 18, 2013 at 6:23

Oleksii Aza

5,40832 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

frogatto Over a year ago

Why e.preventDefault(); ?

Oleksii Aza Over a year ago

Didn't noticed that it is submit

hahagal · Accepted Answer · 2013-07-19 04:04:49Z

I managed to get it with the following codes. @ABFORCE Thanks for the help! ^^ @Alexey Aza Thanks for the help! ^^

<?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.w3c.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:hx="http://www.ibm.com/jsf/html_extended">
<h:head>
    <title>ma1009.xhtml</title>
    <meta http-equiv="keywords" content="enter,your,keywords,here" />
    <meta http-equiv="description"
        content="A short description of this page." />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link type="text/css" rel="stylesheet"
        href="#{request.contextPath}/theme/primefaces-aristo/theme.css" />

    <script src="../../jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("button").click(function() {
                $(this).css('background', 'red');
                $(this).addClass('ui-state-disabled');  
            });
        });
    </script>
</h:head>

<h:body>
    <h:form id="form1" enctype="multipart/form-data" prependId="false">

        <p:commandButton id="button" type="submit" value="ma1009" styleClass="commandButton"
            action="#{pc_Ma1009.doSubmitAction}" widgetVar="ajaxStatusDialog">
            <p:ajaxStatus onstart="ajaxStatusDialog.show();" onsuccess="ajaxStatusDialog.hide();"></p:ajaxStatus>

        </p:commandButton>

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

Collectives™ on Stack Overflow

disable button using jquery and enable after action is completed using jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related