CODEWITHSUNDEEP
javascriptasp.net-mvc-3jquery
Yasser Shaikh
Yasser Shaikh

Reputation: 47794

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

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

Upvotes: 3

Views: 1977

Answers (3)

xdazz
xdazz

Reputation: 160893

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');
            }
        });
    });

Upvotes: 8

chovy
chovy

Reputation: 75774

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.

Upvotes: 1

Tharabas
Tharabas

Reputation: 3422

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

Upvotes: 0

Related Questions