CODEWITHSUNDEEP
jquery
seoppc
seoppc

Reputation: 2824

addClass is not adding class to tr

I am using the following AJAX request...

    $('.act').live('click', function(){     

$.ajax({
        type: "POST",
        async : false,
        url: req_url,
        data : {
            id : account_id
        },
        success : function(data) {
            if(data == 'banned'){
                $(this).closest('tr').addClass('danger');
                alert('updated');
            }
            else{
                alert(data);
            }
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
        }
        }); 

});

But it's not adding the danger class to tr on success, please help me to resolve, thanks.

Upvotes: 0

Views: 130

Answers (5)

OneOfOne
OneOfOne

Reputation: 99215

$(this) in that context refers to the jqxhr object, you need to reference your element some other way.

//edit

.live is deprecated now and shouldn't be used in new code.

$(document).on('click', '.act', function(){ 
    var self = $(this);
    $.ajax({
        type: "POST",
        async : false,
        url: req_url,
        data : {
            id : account_id
        },
        success : function(data) {
            if(data == 'banned'){
                self.closest('tr').addClass('danger');
                alert('updated');
            } else{
                alert(data);
            }
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
        }
    }); 
});

Upvotes: 0

Chibuzo
Chibuzo

Reputation: 6117

The $(this) you are referencing is the success instance. Look at the code below.

$('.act').live('click', function() {
var $this = $(this);

Then inside your success callback, use this

$this.closest('tr').addClass('danger');

NOTE: The use of .live() is deprecated. Use .on() instead.

Here is how to use .on()

Upvotes: 0

DevlshOne
DevlshOne

Reputation: 8457

$(body).on('click', '.act', function() {  
    var myRow = $(this).closest('tr').find('td'); // you have to identify the row up here!   
    $.ajax({
        type: "POST",
        async : false,
        url: req_url,
        data : {
            id : account_id
        },
        success : function(data) {
            if(data == 'banned'){
                myRow.addClass('danger'); // but you can still use it here
                alert('updated');
            }
            else
            {
                alert(data);
            }
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
        }
    }); 
});

Upvotes: 0

dc5
dc5

Reputation: 12441

By default, the context of the callbacks will be an object that represents the ajax settings used in the call.

If you want to have a different context you could do something like:

$('.act').live('click', function(){     
    $.ajax({
        type: "POST",
        async : false,
        url: req_url,
        context: this,  // <=== Pass context here
        data : {
            id : account_id
        },
        success : function(data) {
            if(data == 'banned'){
                $(this).closest('tr').addClass('danger');
                alert('updated');
            }
            else{
                alert(data);
            }
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
        }
    }); 
});

For more information see: context

Type: PlainObject

This object will be made the context of all Ajax-related callbacks. By default, the context is an object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax). For example, specifying a DOM element as the context will make that the context for the complete callback of a request, like so:

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

this inside the callback function does not refer the same object as it was referring outside during the ajax call was made.

The solution here is to use a closure variable which will hold the correct reference and use it inside the callback method.

$('.act').live('click', function () {
    var self = this;
    $.ajax({
        type: "POST",
        async: false,
        url: req_url,
        data: {
            id: account_id
        },
        success: function (data) {
            if (data == 'banned') {
                self.closest('tr').addClass('danger');
                alert('updated');
            } else {
                alert(data);
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
        }
    });
});

Upvotes: 0

Related Questions