Changing CSS class dynamically

Question

I have an indicator on a page which is either a red or green circle.

<div class="publicBm changeState" currentstate="1" statusid="56" title="This is Public"></div> <!-- green -->
<div class="privateBm changeState" currentstate="1" statusid="57" title="This is Private"></div> <!-- red -->

When a user clicks the circle (which is a div with class changeState as shown above) an AJAX call is made to update the database to the opposite of what the item currently is, public or private. Then it returns the opposite class.

All works perfectly but I want to change the class on the circle clicked to reflect that the update has been successful.

Here's what I'm trying - as I said, the actual database call within the php file is perfect it's just that the div is not having it's class changed.

NOTE - there can be multiple lines on each page so I can't simply give the DIV an id

$('.changeState').click(function() {
    var bm_id = $(this).attr('statusID');
    var current = $(this).attr('currentState');
    $.ajax({
        type: "POST",
        url:      '/ajax/actions/editStateBm.php?bm_id='+bm_id+'&current='+current,
        success:  
            function(data) {
                $(this).removeAttr('class').attr('class', data + ' changeState');

            }
    });

});

PSL · Accepted Answer · 2013-10-24 15:54:47Z

1

Your issue is this. this is not the DOM element inside the ajax success callback. Instead set the context as that of the element so that this inside the callback now refers to the element and not jqXhr object.

$.ajax({
    type: "POST",
    url:      '/ajax/actions/editStateBm.php?bm_id='+bm_id+'&current='+current,
    context: this, //<-- Here
    success:  
        function(data) {
            this.className = data + ' changeState';

        }
});

or use a cached context.

   ...
   var self = this;
   $.ajax({
        type: "POST",
        url:      '/ajax/actions/editStateBm.php?bm_id='+bm_id+'&current='+current,
        success:  
            function(data) {
                self.className = data + ' changeState';

            }
    });
    ...

BTW what are you posting? you need to use GET?

 $.ajax({
    type: "GET",
 ....

edited Oct 24, 2013 at 15:54

answered Oct 24, 2013 at 15:48

PSL

124k21 gold badges257 silver badges243 bronze badges

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

2 Comments

StudioTime Over a year ago

Ha, how weird - i'm using GET and its getting it just fine although says type:POST

StudioTime Over a year ago

Awesome thanks, also now allowed me to make lots more changes using same theory so many thanks for that mate! Appreciate the mini lesson too.

Tushar Gupta - curioustushar · Accepted Answer · 2013-10-24 15:42:23Z

1

Use .addClass()

success: function (data) {
    $(this).removeAttr('class').addClass(data + ' changeState');
}

and removeProp

success: function (data) {
    $(this).removeProp('class').addClass(data + ' changeState');
}

answered Oct 24, 2013 at 15:42

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

2 Comments

StudioTime Over a year ago

Doesn't do anything I'm afraid

PSL Over a year ago

@DarrenSweeney 2 things, should that be POST or GET, and this doesn't represent the DOM element inside the callback. See my answer, that might work if for no other issues.

Irfan TahirKheli · Accepted Answer · 2013-10-24 15:45:13Z

0

This should be something like:

$(this).removeClass('class').addClass(data + ' changeState');

answered Oct 24, 2013 at 15:45

Irfan TahirKheli

3,6621 gold badge25 silver badges36 bronze badges

Collectives™ on Stack Overflow

Changing CSS class dynamically

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related