Change behavior of button using AJAX

Question

I'm trying to figure out how to change behaviour of a button using AJAX.

When the button is clicked, it means that user confirmed order recently created. AJAX calls /confirm-order/<id> and if the order has been confirmed, I want to change the button to redirect to /my-orders/ after next click on it. The problem is that it calls again the same JQuery function. I've tried already to remove class="confirm-button" attribute to avoid JQuery again but it does not work. What should I do?

It would be enough, if the button has been removed and replaced by text "Confirmed", but this.html() changes only inner html which is a text of the button.

 $(document).ready(function () {
        $(".confirm-button").click(function (b) {
            b.preventDefault();
            var $this = $(this);
            var id = this.value;
            var url = '/confirm-order/'+id;

            $.ajax({
                type: 'get',
                url: url,
                success: function (data) {
                    $this.empty();
                    $this.attr('href','/my-orders/');
                    $this.parent().attr("action", "/my-orders/");
                    $this.html('Confirmed');
                }
            })
        });
    });

meskobalazs · Accepted Answer · 2016-06-08 13:57:39Z

1

The event handler will be still attached to the button, so this will run again:

b.preventDefault();

which will prevent the default, which is opening the href. You need to remove the event handler on success. You use the jQuery #off() method:

$(".confirm-button").off('click');

or more shortly:

$this.off('click');

edited Jun 8, 2016 at 13:57

answered Jun 8, 2016 at 13:56

meskobalazs

16.1k2 gold badges44 silver badges63 bronze badges

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

1 Comment

Milano Over a year ago

Hello, that's the problem, I can't figure out how to remove the handler on success.

Gilad Artzi · Accepted Answer · 2016-06-08 13:55:56Z

1

You can add to your success function something like: $this.data('isConfirmed', true);

And then in your click handler start by checking for it. If it's true, redirect the user to the next page.

$(".confirm-button").click(function (b) {
    b.preventDefault();
    var $this = $(this);

    if ($this.data('isConfirmed')) {
        ... redirect code ...
    }
    else {
        ... your regular code ...
    }
}

answered Jun 8, 2016 at 13:55

Gilad Artzi

3,0841 gold badge17 silver badges24 bronze badges

Comments

Andrew · Accepted Answer · 2016-06-08 13:59:44Z

1

You need to use .on() rather than .click() to catch events after the document is ready, because the "new" button appears later.

See http://api.jquery.com/on/

$(document).ready(function() {
  $('.js-confirm').click(function(){
    alert('Confirmed!');
    $(this).off('click').removeClass('js-confirm').addClass('js-redirect').html('Redirect');
  });
  
  $(document).on('click', '.js-redirect', function(){
    alert('Redirecting');
  });
});

<button class="js-confirm">Confirm</button>

answered Jun 8, 2016 at 13:59

Andrew

1,2038 silver badges12 bronze badges

Collectives™ on Stack Overflow

Change behavior of button using AJAX

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related