Allow jquery .One method to click again after Ajax call

Question

I have a click that triggers payment. I'm using the .One method to disallow further clicking, but in case the payment comes back declined I'd like to re-enable the click for another try - one time again of course. And let this re-occur in case of another decline.

    $(".pay").one("click", function(event){ 

        ...//payment code executes

      });

Ajax

$.ajax({
   ...
    success: function(data){
        $('.pay').html(data); //comes back declined. Re-enable .one click again.
    }

[Looking through the documentation](http://api.jquery.com/one/) it says that `jquery.one('click'...)` would be the same as `jquery.on('click', function(e){... $(this).off(e)} `, which may give you a starting point — Jhecht, Nov 21 '16 at 01:24

score 2 · Accepted Answer · edited May 23 '17 at 12:01

2

I would say, the best way is to:

Add a class.
Check if the class is present, then don't execute.
Fire the AJAX call.
Remove the class.

This is how disabling works.

This is better to use:

.addClass();
.removeClass();

Than writing entire function again and again, duplicating the code.

Update: If DOM manipulation is harder, or costlier, it is better to store the context sensitive values as a key-value pair using $.data(element, key, value); method and set the flag for execution.

Thanks to the Soviut and adeneo for their comments. :D

Example

added as per request...

$(".pay").on("click", function (event) {
  if ($(this).hasClass("stop"))
    return false;
  $(this).addClass("stop");
  // Other codes to follow.
});

$.ajax({
  //...
  success: function (data) {
    $('.pay').html(data)           //comes back declined. Re-enable .one click again.
             .removeClass("stop"); // remove the class that disables.
  }
});

edited May 23 '17 at 12:01

Community

1
1

answered Nov 21 '16 at 01:24

Praveen Kumar Purushothaman

164,888
24
203
252

2

Why use a class when a variable will do the same thing more reliably without having to access the DOM? – Soviut Nov 21 '16 at 01:25
@Soviut What if there are multiple elements, how do you get the context? Also, not to clutter the global scope variables. And it is generally [**a bad idea to have global variables**](http://stackoverflow.com/questions/10525582). – Praveen Kumar Purushothaman Nov 21 '16 at 01:26
1

FYI: jQuery has `$.data` – adeneo Nov 21 '16 at 01:28
@adeneo How is adding class and adding `data-*` attribute make any difference? `:)` Both have the same amount of DOM manipulation right? Moreover, adding and removing class is supported in more browsers than that of `data-*` attributes. – Praveen Kumar Purushothaman Nov 21 '16 at 01:29
Nope, jQuery's `$.data` doesn't manipulate the DOM, it stores data internally on a per-element basis, which is why it's great for this kinda thing. – adeneo Nov 21 '16 at 01:30
@adeneo Doesn't it make ``? – Praveen Kumar Purushothaman Nov 21 '16 at 01:31
1

No, it gets it's initial value from the data-attribute, if one exists, but it never sets it. – adeneo Nov 21 '16 at 01:31
1

You triggering DOM redraws when you add and remove classes. Context can be easily achieved without global variables but this speculation about multiple buttons is already out of scope from the original question. – Soviut Nov 21 '16 at 01:31
Okay, nice. Thanks for your comments. I guess I could add the `$.data` as another way too. `:)` – Praveen Kumar Purushothaman Nov 21 '16 at 01:32
Updated answer and credited both of you too. Thanks buddies. `:D` – Praveen Kumar Purushothaman Nov 21 '16 at 01:34
1

Praveen, would you mind giving a simple example? This seems like the right answer, but I'm not getting the logic. – obreezy Nov 21 '16 at 01:41
@user4175297 Added example. – Praveen Kumar Purushothaman Nov 21 '16 at 01:44
1

Thank you @PraveenKumar I was able to make that work! Is there any reason why this logic didn't work for me, adding another class in the .pay like .clickonce and then doing $(".pay.clickonce").on("click", function (event) { then remove the .clickonce class after submitting and re-add if the payment was declined. I tried this but it didn't work. – obreezy Nov 21 '16 at 01:59
@omar Could be because of you need to delegate the events. Not sure why, without analysing it further. `:)` – Praveen Kumar Purushothaman Nov 21 '16 at 02:10

score 1 · Answer 2 · edited Nov 21 '16 at 01:24

1

One way is to define the event again in the ajax success

$.ajax({
   ...
    success: function(data){
        $('.pay').html(data); //comes back declined. Re-enable .one click again.
        $(".pay").one("click", function(event){ 
        ...//payment code executes
        });
    }

edited Nov 21 '16 at 01:24

Praveen Kumar Purushothaman

164,888
24
203
252

answered Nov 21 '16 at 01:23

Jorge Londoño

588
2
14

This won't allow retrying if the ajax call fails and calls the `error` method. – Soviut Nov 21 '16 at 01:24

score 1 · Answer 3 · answered Nov 21 '16 at 01:25

Delegate the function explicitly instead of using closure.

var triggerPayment = function (evt) {
    ... //payment code executes
}

$(".pay").one("click", triggerPayment);

$.ajax({
   ...
    success: function(data){
        if (isDeclined(data)) {
            $(".pay").one("click", triggerPayment);
        }
    }
});

score 0 · Answer 4 · answered Nov 21 '16 at 01:24

Newer versions of JQuery $.ajax() return promises, allowing you to easily perform a final step if the ajax call succceeds or fails.

var jqxhr = $.ajax("example.php")
  .done(function() {
    console.log("success");
  })
  .fail(function() {
    console.log("error");
  })
  .always(function() {
    console.log("complete");

    // re-apply click event
    $(".pay").one("click", function(event) { 
    });
  });

score 0 · Answer 5 · answered Nov 21 '16 at 01:56

//Let's say you have your button like this:

<!--Button 1-->
<button type='submit' class='pay pay-button'>Pay Now</button>

//Create a similar button, for example..

<!--Button 2-->
<button type='button' class='wait pay-button' style='display: none'>Pay Now</button>

$(".pay").on("click", function(e) {
    $(".pay-button").hide(); //Hides the two buttons
    $(".wait").show(); //Shows the dummy button

    return false;
});


//The Ajax request:
var jqxhr = $.ajax("example.php")
  .done(function() {
    allow_click = false;
  })
  .fail(function() {
      $(".pay-button").hide(); //Hides the two buttons
    $(".pay").show(); //Shows the dummy button
    console.log("error");   
  });

I hope this works for you.

Allow jquery .One method to click again after Ajax call

5 Answers5