Using $(this).addClass is not working in AJAX success

Question

I am doing some ajax processing on click event that working fine but now I want to add class on success function I am using $(this).addClass("cover"); but nothing is happening . If I target class for add class mean if I use like this $('.dz-cover').addClass("cover"); it works fine but it add class all link tag that is with class name '.dz-cover' I don't want I just only want to add class only that link in which I am clicking. My code is below

$("#dropzonePreview").on("click", "a.dz-cover", function () {
    var id = $(this).data('id');
    $.ajax({
        type: 'POST',
        url: 'attachment/cover',
        data: {id: id},
        dataType: 'html',
        success: function (data) {
            $(this).addClass("cover");                   
        }
    });
});

score 4 · Accepted Answer · answered Mar 21 '16 at 08:48

4

That is because context of element a.dz-cover is lost in ajax call, you can set context in ajax calls using option context:

$("#dropzonePreview").on("click", "a.dz-cover", function () {

var id = $(this).data('id');
$.ajax({
    type: 'POST',
    url: 'attachment/cover',
    context:this,
    data: {id: id},
    dataType: 'html',
    success: function (data) {
        $(this).addClass("cover");

    }
  });
});

answered Mar 21 '16 at 08:48

Milind Anantwar

81,290
25
94
125

Not working. Now something strange is happening if i click one link class does not add on that link now i click on anther link now class is adding but not that in which click now it is adding on that link in which i click before – Muhammad Umar Mar 21 '16 at 09:06
@MuhammadUmar: you should show loader on click and then hide it in success function. – Milind Anantwar Mar 21 '16 at 09:42

score 2 · Answer 2 · answered Mar 21 '16 at 08:48

2

this will not work in this case, because success is another block.

$("#dropzonePreview").on("click", "a.dz-cover", function () {
    var elm = $(this);
    var id = elm.data('id');
    $.ajax({
        type: 'POST',
        url: 'attachment/cover',
        data: { id: id },
        dataType: 'html',
        success: function (data) {
            elm.addClass("cover");
        }
    });
});

answered Mar 21 '16 at 08:48

Ibrahim Khan

20,616
7
42
55

It should work. Can you make a fiddle? @MuhammadUmar – Ibrahim Khan Mar 21 '16 at 08:58
Now something strange is happening if i click one link class does not add on that link now i click on anther link now class is adding but not that in which click now it is adding on that link in which i click before – Muhammad Umar Mar 21 '16 at 09:04
Can you make a fiddle with your working code? @MuhammadUmar – Ibrahim Khan Mar 21 '16 at 09:37

score 0 · Answer 3 · answered Mar 21 '16 at 08:49

You are trying to use $(this) out of context. You should set it to a variable to be able to use it within your AJAX callback like so:

$("#dropzonePreview").on("click", "a.dz-cover", function () {
    var id = $(this).data('id');
    var element = $(this);
    $.ajax({
        type: 'POST',
        url: 'attachment/cover',
        data: {id: id},
        dataType: 'html',
        success: function (data) {
            element.addClass("cover");

        }
    });
});

Using $(this).addClass is not working in AJAX success

3 Answers3