jQuery: on click disable click event till response from ajax call

Question

Doing following in jQuery:

$('#signupbox1').on('click', '#signup1', function() {

    var str = $('#signupform').serialize();

    // make it look like a waiting button
    $('#signup1').addClass("btn_wait");
    var btn_val = $('#signup1').val();
    $('#signup1').val('');

    $.ajax({
        type: "POST",
        url: "signup_step1.php",
        data: str,
        success: function(msg) {

            //doing stuff here

        $('#signup1').removeClass("btn_wait");
        $('#signup1').val(btn_val);
        }
    });

});

How could you disable the click event as well till you receive an answer from the ajax call? So, when you click on the button it not only "transforms" to a waiting button because of the added class, but also the click event will be "paused"... is this possible?

Thank you very much in advance!

Zoltan Toth · Accepted Answer · 2012-07-09 20:15:43Z

14

$('#signupbox1').on('click', '#signup1', function() {

    var str = $('#signupform').serialize();

    // make it look like a waiting button
    var btn_val = $('#signup1').val();
    $('#signup1').addClass("btn_wait").val('').unbind('click');

    $.ajax({
        type: "POST",
        url: "signup_step1.php",
        data: str,
        success: function(msg) {
            $('#signup1').removeClass("btn_wait").val(btn_val);
        },
        complete: function() {
            $('#signup1').bind('click'); // will fire either on success or error
        }
    });

});

edited Jul 9, 2012 at 20:15

answered Jul 9, 2012 at 20:03

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

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

6 Comments

Shyju Over a year ago

you may need to bind it back on error event also. User should be able to try again.

Chris Over a year ago

oh thank you Zoltan! so easy! oh my god... I feel ashamed! :)

Zoltan Toth Over a year ago

@Shyju - it's re-binded :) in success function

Chris Over a year ago

@ZoltanToth: I guess what Shyju means is if there is no answer from the ajax call... like the code breaks before or sth like that... probably?

Shyju Over a year ago

Yea. What i meant is it should be re enabled even if there is an error also ( once the ajax response comes back). Thanks Chris for clarifying

|

Joseph · Accepted Answer · 2012-07-09 20:10:21Z

3

You can add a flag to denote "currently loading". You can use anything like a variable, property or attribute. In this example, I use jQuery .data()

Also, it's advisable that you use submit event instead of adding a click handler to the submit button when you submit a form.

$('#signupform').on('submit', function() {

    var form = $(this),
        loading = form.data('loading'), //check loading status
        str, button, val;

    //if not loading
    if(!loading){

        //set loading to true
        form.data('loading',true);

        str = form.serialize();
        button = $('#signup1', form);
        val = button.val();

        // make it look like a waiting button
        button
            .addClass("btn_wait");
            .val('');

        $.ajax({
            type: "POST",
            url: "signup_step1.php",
            data: str,
            success: function(msg) {

                //remove loading state
                form.data('loading',false);

                //return button to normal
                button
                    .removeClass("btn_wait");
                    .val(val);
            }
        });
    }

});

answered Jul 9, 2012 at 20:10

Joseph

120k31 gold badges186 silver badges238 bronze badges

2 Comments

Chris Over a year ago

oh, wow.. thank you Joseph for this comprehensive answer! So, setting .data to loading only works on submit event? Currently I hide the first part of the form (4 inputs) and show the second one (4 more inputs) and then on the second one I wanted to use the submit button for the whole form... do you think this not a good idea? The signup_step1.php just checks the values for correctness... which has to be done again, you are right, when submitting the whole form as the data could have been changed of course...

Joseph Over a year ago

@Chris jQuery .data() can be used by anything. And I believe that form issue of yours needs to be in another question.

Collectives™ on Stack Overflow

jQuery: on click disable click event till response from ajax call

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related