CODEWITHSUNDEEP
javascriptjqueryajax
Julien
Julien

Reputation: 4163

avoid multiple clicks on a div

It's probably sthg simple, but I still didn't find a solution, I would like to avoid multiple clicks on a button, before finishing an ajax call.

Here is what I tried : 

<button id="btn_pay"></button>

$("#btn_pay").click( function() {
    $('#btn_pay').prop('disabled', true);
    Stripe.card.createToken(form, stripeResponseHandler);
});

           var stripeResponseHandler = function(status, response) {
            $.ajax({
                type: "POST",
                success: function(data){
                   alert("success");
                },complete:function(){
                    //we re-enable the button
                    $('#btn_pay').prop('disabled', false);
                }
            });

Problem : If I click several times on the button, many alerts appear, it's like the button is still active, and many ajax call are done instead of jsut 1 at a time..

Any idea ?

Upvotes: 1

Views: 2376

Answers (6)

LSerni
LSerni

Reputation: 57388

Link the disabled state of the button to the response function firing. This way the visual cue and the button behaviour should match.

$("#btn_pay").click( function(event) {
    event.preventDefault();
    if ($(this).prop('disabled')) {
        return;
    }
    $(this).prop('disabled', true);
    Stripe.card.createToken(form, stripeResponseHandler);
});

(It would be better to pass a callback re-enabling the button to stripeResponseHandler, so that that function is not tied to a specific button calling it).

Upvotes: 0

Newton Kumar
Newton Kumar

Reputation: 350

 <div id="loader_div_all" style="position: absolute ! important;opacity: 0.60;display: none;">
<img src="ajaxSpinner.gif" style="width: 200px; height: 200px; margin-left: 500px; margin-top: 1060px;'">


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

    $.ajax({
            url: 'PATH_TO_AJAX_REQUEST_URL',
            type: 'POST',
            data: {/*Data set here*/},
            beforeSend: function () {
                $("#loader_div_all").css('display','block');
            },
            success: function(resp) {
              $("#loader_div_all").css('display','none');
              /*Perform Ajax Success Action Here*/
            }
        });
});

Upvotes: 0

Ketan Joshi
Ketan Joshi

Reputation: 91

You can also avoid multiple clicks on button by adding loading image untill your ajax call is completed in beforeSend: event. for example:

$.ajax
        ({ 
            url: 'your-url',
            data: "",
            type: 'post',
            beforeSend: function() {
                      $("#loading-image").show();
                   },
            success: function(result)
            {
                //alert(result);
                $("#loading-image").hide();
            }
       });

You have to keep image in div id 'loading-image' and by default display:none(CSS Setup).

Upvotes: 0

Fabiano
Fabiano

Reputation: 5199

You can control it with a simple variable:

    <button id="btn_pay"></button>

    var disabled = false; // global var to control button state

    $("#btn_pay").click( function() {
        if (disabled) {
            return; 
        }

        Stripe.card.createToken(form, stripeResponseHandler);
        disabled = true; // button is now blocked
    });

    var stripeResponseHandler = function(status, response) {
          $.ajax({
                    type: "POST",
                    success: function(data){
                       disabled = false; // release button lock
                       alert("success");
                    },complete:function(){
                       disabled = false; // release button lock
                    },fail: function(){
                       disabled = false; // when fail, you need to release the lock too
                    }
            });
      }

Other solutions with event handlers may work for you too, but this is a simpler way to implement this feature.

Upvotes: 4

kasper chexonz
kasper chexonz

Reputation: 541

Try e.preventdefault();

The event.preventDefault() method stops the default action of an element from happening. For example: Prevent a submit button from submitting a form. Prevent a link from following the URL.

I have Also facine this type of problem , i have prevent it by using this .. May be it will help you 

<button id="btn_pay"></button>

$("#btn_pay").click( function(e) {
     e.preventdefault();
    $('#btn_pay').prop('disabled', true);
    Stripe.card.createToken(form, stripeResponseHandler);
});

           var stripeResponseHandler = function(status, response) {
            $.ajax({
                type: "POST",
                success: function(data){
                   alert("success");
                },complete:function(){
                    //we re-enable the button
                    $('#btn_pay').prop('disabled', false);
                }
            });

Upvotes: 2

Happy Coding
Happy Coding

Reputation: 2525

Modify your code:

.unbind() Remove a previously-attached event handler from the elements.

.bind Attach a handler to an event for the elements.

<button id="btn_pay"></button>

<script>
$("#btn_pay").click( function(e) {
    $("#btn_pay").unbind("click");
    $('#btn_pay').prop('disabled', true);
    Stripe.card.createToken(form, stripeResponseHandler);
});

           var stripeResponseHandler = function(status, response) {
            $.ajax({
                type: "POST",
                success: function(data){
                   alert("success");
                },complete:function(){
                    //we re-enable the button
                    $("#btn_pay").bind("click");
                }
            });
</script>

Checkout the tutorials : http://api.jquery.com/bind/

http://api.jquery.com/unbind/

Upvotes: 0

Related Questions