How to create an delay until ajax process done?

Question

I have a button named "insert comment". When user clicks on it, form will be submit (using ajax) and insert a new comment in the database. Now my problem is when user clicks twice (quickly) on this button, comment will be insert two time.

Now I want to prevent of inserting again, I mean is I want to disable all event while ajax process is working... Is it possible?

Here is my code:

 $("#bottunId").click(function(){
        $("#form-"+pure_id).submit(function(e){
           e.preventDefault(e);            
           comment(pure_id);
         });
});

function comment(pure_id){

    $("#textarea-"+pure_id).animate({opacity: 0.5}, 0);
    var frm = $('#form-'+pure_id);

    $.ajax({
        url :  frm.attr('action'),
        type : frm.attr('method'),
        data : frm.serialize(),
        dataType : 'JSON',
        success : function (commenting_system) {

        if(commenting_system.error_msg){
            $(".error_msg").html(commenting_system.error_msg); $(".error").fadeIn(200);
            close_error_msg = setTimeout(function(){ $(".error").fadeOut(100); }, 5000);
            $("#textarea-"+pure_id).animate({opacity: 1}, 0);
        }

        else{
                $("#table-"+pure_id).append('<tr><td>new row</td></tr>');
                $("#textarea-"+pure_id).animate({opacity: 1}, 0);
        }

        } // for success
    }); // for ajax
} // function comment

Why dont you just disable the button once you pressed it? If you're using a framework like bootstrap its super easy. http://stackoverflow.com/questions/17327668/best-way-to-disable-button-in-twitters-bootstrap and then just enable it again in your success callback. — Daryl Rodrigo, Sep 25 '15 at 12:51
Binding an event inside another event normally leads to problems. Click the button twice and now you have two submit handlers bound. — epascarello, Sep 25 '15 at 13:00
@epascarello sorry for asking again, but I tried to understand how can I use `off("submit");` in my code? or how can I use it without binding it onclick? can you please leave a answer for my question? tnx — Shafizadeh, Sep 25 '15 at 13:18
`$("#form-"+pure_id).off("submit").on("submit", function (e) { ... });` — epascarello, Sep 25 '15 at 13:27

score 1 · Accepted Answer · answered Sep 25 '15 at 14:04

1

This should work for you. It sets a flag called submitted in the form, which will prevent the form from submitting again until the page is refreshed.

$("#bottunId").click(function(){

    $("#form-"+pure_id).submit(function(e){

        if ($(this).data('submitted') !== true) {
            // Mark it so that the next submit can be ignored
            $(this).data('submitted', true);

            // submit form
            comment(pure_id);
        }
        e.preventDefault();
    });

});

answered Sep 25 '15 at 14:04

jv-k

618
5
20

thanks, +1upvote for you. but your code is usable just one time, you need to add `$(this).data('submitted', false);` in the end of `success` for activating that button again. – Shafizadeh Sep 25 '15 at 14:19
Your welcome. My purpose was to show you how to disable the button to prevent double comments, whatever specific application you want to use it for / after is upto you :) Don't forget to accept the solution, cheers. – jv-k Sep 25 '15 at 16:07

score -2 · Answer 2 · edited Sep 25 '15 at 12:58

-2

$("#bottunId").attr('disabled', 'disabled');

In ajax success method u can remove it.

$("#bottunId").removeAttr('disabled');

edited Sep 25 '15 at 12:58

Rayon

36,219
4
49
76

answered Sep 25 '15 at 12:57

Mahesh Durairaj

102
10

Still inserts twice ...! – Shafizadeh Sep 25 '15 at 13:05

How to create an delay until ajax process done?

2 Answers2