Passing into ajax success function

Question

I have developed following code, I need to pass exact 'this' value ( because lot of items with this class)in to ajax success function. How to do that.

$(document).on('click', '.address_remove_link', function(e) {
    var id = $(this).attr("data-id");
    $.ajax({
        type: 'POST',
        url: 'inc/controlllers/detele_shipping_addr.php',
        data: {
            internalId: id
        },
        success: function(response, this) {
            $(this).parent().closest('div').hide(200);
        },
        error: function(data) {
            console.log("error");
        }
    });
});

`this` always refers to the calling object in the current scope. To access the outer scope, the typical way is to store the outer `this` in a variable like `var that = this;` or `var self = this;` or use binding, as demonstrated by [this article](http://jsforallof.us/2014/07/08/var-that-this/). — SNag, Sep 13 '16 at 08:57
@SNag: *"`this` always refers to the calling object in the current scope"* No, it doesn't. For non-arrow, non-bound functions, `this` means whatever the calling code made it mean, which can be anything. — T.J. Crowder, Sep 13 '16 at 09:27

Rory McCrossan · Accepted Answer · 2016-09-13T08:34:07.647

1

The issue is because the scope of this changes within the success handler function. You can store the outer scope in the click handler function instead. Try this:

$(document).on('click', '.address_remove_link', function(e) {
    var $link = $(this); // store reference here
    var id = $link.attr("data-id");

    $.ajax({
        type: 'POST',
        url: 'inc/controlllers/detele_shipping_addr.php',
        data: {
            internalId: id
        },
        success: function(response) {
            $link.parent().closest('div').hide(200); // to use here
        },
        error: function(data) {
            console.log("error");
        }
    });
});

edited Sep 13 '16 at 08:34

answered Sep 13 '16 at 08:23

Rory McCrossan

331,213
40
305
339

You better remove the `this` parameter from the `success` function – Yosvel Quintero Sep 13 '16 at 08:33
1

@YosvelQuintero ah yes, thank you. I didn't even see that was there – Rory McCrossan Sep 13 '16 at 08:34

score 0 · Answer 2 · answered Sep 13 '16 at 08:23

One simple way is to use a variable the function closes over:

$(document).on('click', '.address_remove_link', function(e) {
    var $this = $(this);                                  // ***
    var id = $this.attr("data-id");                       // ***
    $.ajax({
        type: 'POST',
        url: 'inc/controlllers/detele_shipping_addr.php',
        data: {
            internalId: id
        },
        success: function(response) {
            $this.parent().closest('div').hide(200);      // ***
        },
        error: function(data) {
            console.log("error");
        }
    });
});

Alternately you could use Function#bind (MDN, spec):

$(document).on('click', '.address_remove_link', function(e) {
    var id = $(this).attr("data-id");
    $.ajax({
        type: 'POST',
        url: 'inc/controlllers/detele_shipping_addr.php',
        data: {
            internalId: id
        },
        success: function(response) {
            $(this).parent().closest('div').hide(200);
        }.bind(this),                                     // ***
        error: function(data) {
            console.log("error");
        }
    });
});

score 0 · Answer 3 · answered Sep 13 '16 at 08:24

You are working on the scope of the click event handler function, so you can create a self variable and use it like this:

$(document).on('click', '.address_remove_link', function(e) {
    var self = $(this),
        id = self.attr('data-id');

    $.ajax({
        type: 'POST',
        url: 'inc/controlllers/detele_shipping_addr.php',
        data: {
            internalId: id
        },
        success: function(response) {
            // Do something with "response"
            self.parent().closest('div').hide(200);
        },
        error: function(data) {
            console.log('error');
        }
    });
});

Passing into ajax success function

3 Answers3