$(this) not working inside the success function of ajax

Question

I am using ASP.NET MVC with Jquery, and this seems to be a jquery fault.

I am making an ajax call to my method, my code is

$('.reopenBtn').live('click', function () {
    var taskId = $(this).attr("data-taskid");

    $.ajax({
        url: '/Task/ReopenTask/?strTaskId=' + taskId,
        type: "POST",
        success: function (data) {
            // this does not work !!
            $(this).parent().parent().closest("div").remove();              
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('Error');
        }
    });
});

The remove doesn't work however when creating a jsfiddle for this question here , this works.

So, is $(this) something different inside the success function of the ajax call ?

How do I get around this ? Thanks

Answer 1

context property will work inside the success function of ajax context: this,

$('.reopenBtn').live('click', function () {
    var taskId = $(this).attr("data-taskid");
    var self = this;
    $.ajax({
        url: '/Task/ReopenTask/?strTaskId=' + taskId,
        type: "POST",
        success: function (data) {
            $(self).parent().parent().closest("div").remove();              
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('Error');
        }
    });
});

Or you could set context property of ajax option.

    $('.reopenBtn').live('click', function () {
        var taskId = $(this).attr("data-taskid");
        $.ajax({
            url: '/Task/ReopenTask/?strTaskId=' + taskId,
            type: "POST",
            context: this,
            success: function (data) {
                $(this).parent().parent().closest("div").remove();              
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert('Error');
            }
        });
    });

Answer 2

I prefer this method, wrapping with $.proxy, two args are callback function and this as 2nd argument.

$.post('/foo', data, $.proxy(function(d){
  // do stuff with data
}, this));

I think it is shortest and cleanest.

You can do what others say above as well, either copying this to that ( self is a reserved word) and then using in callback, or using $.ajax with context: this parameter.

Answer 3

The context of the click method is simply not the same as for the success method. Thus you do not have the same this in the inner function. You can avoid that by using a local variable like $this or clickedButton and use it in your success method:

$('.reopenBtn').live('click', function () {
  var $this = $(this)
  var taskId = $this.attr("data-taskid");

  $.ajax({
    url: '/Task/ReopenTask/?strTaskId=' + taskId,
    type: "POST",
    success: function (data) {
        // $this is taken from the outer function context
        $this.parent().parent().closest("div").remove();              
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert('Error');
    }
  });
});

For detailed explanation you might want to take a look at Closures in JavaScript