jquery + ajax replace class

Question

I trying to replace button class with ajax, what i do wrong?

my button:

<input type="button" class="btn btn-default btn-sm addLike" name="{{ answer.pk }}" value="Like" ></input>

my js:

$('.addLike').click(function(){

    $.ajax({
        type: "POST",
        url: "{% url 'add_like' %}",
        data: {'answer_pk': $(this).attr('name'), 
                'csrfmiddlewaretoken': '{{ csrf_token }}'},
        dataType: 'json',
        success: function(response){
            alert(response.message);
            if ( $(this).hasClass('btn-default')) {
                $(this).removeClass('btn-default').addClass('btn-success');
            }
            else if ($(this).hasClass('btn-success')) {
                $(this).removeClass('btn-success').addClass('btn-default');
                }

            }
    }); 
})

message, it's just test alert message from my django view function. Problem only with replace element

Inside the callback, `$(this)` refers to the jqXHR object of the Ajax call, not the element the event handler was bound to. — Sushil, Oct 30 '15 at 21:16
you can create a variable before your ajax call and set the current object in that variable and use it in the success callback. — Sushil, Oct 30 '15 at 21:17

score 3 · Accepted Answer · edited May 19 '23 at 15:43

3

Inside the callback, $(this) refers to the jqXHR object of the Ajax call, not the element the event handler was bound to.

Try doing this:

$('.addLike').click(function() {

    var element = this; // adding the current object in a variable

    $.ajax({
        type: "POST",
        url: "{% url 'add_like' %}",
        data: {
            'answer_pk': $(element).attr('name'),
            'csrfmiddlewaretoken': '{{ csrf_token }}'
        },
        dataType: 'json',
        success: function(response) {
            alert(response.message);
            if ($(element).hasClass('btn-default')) {
                $(element).removeClass('btn-default').addClass('btn-success');
            } else if ($(element).hasClass('btn-success')) {
                $(element).removeClass('btn-success').addClass('btn-default');
            }
        }
    });
});

edited May 19 '23 at 15:43

halfer

19,824
17
99
186

answered Oct 30 '15 at 21:19

Sushil

2,837
4
21
29

@DinoMyte thanks but your answer was right too but not in this context. he wanted to get the object in the callback event and my answer was doing that. other than that your answer is perfectly right. – Sushil Oct 30 '15 at 21:54
sorry for nooby question, if I want to save this class after reload page, i must do this on server site of django or I can do it by ajax way? – Ivan Semochkin Oct 30 '15 at 22:22
1

you can save it in a cookie if you dont want to do it server side or you can store it in the local storage – Sushil Oct 30 '15 at 22:22
Thank you. I mean, I cant do this by this script? So i just add condition in my Django template – Ivan Semochkin Oct 30 '15 at 22:30
1

where do you want to save the class? do you want it to be stored on the client side or the server side? for server side you can use this ajax call and pass the className to server and store it or simply store it in the cookie or localStorage using javascript – Sushil Oct 30 '15 at 22:32
I store it in server side, thank you a lot, I will try to find this solution by ajax – Ivan Semochkin Oct 30 '15 at 22:38
1

just pass it as an extra parameter in your url and you will get it in the server side – Sushil Oct 30 '15 at 22:53

score 1 · Answer 2 · answered Oct 30 '15 at 21:26

A simple toggleClass would do the job, without checking for individual classes and adding and removing them.

$("input").click(function()
{
    $(this).toggleClass('btn-default btn-success');
    alert($(this).attr("class"));
});

http://jsfiddle.net/vwLfxdya/

jquery + ajax replace class

2 Answers2