Ajax success forgetting $(this)

Asked Sep 29 '18 at 16:09

Active Sep 29 '18 at 21:52

Viewed 17 times

I've got a little ajax script that, on success, text is supposed to change.

$(document).on('click','.favorite', function(){
    $URLtitle = $(this).attr('data-image-URLtitle');
    $username = $(this).attr('data-username');
    $token     = $('meta[name=csrf-token]').attr("content");
    $(this).text('test text 1');
    $.ajax({
        type: "POST",
        url: host + '/' + $username + '/' + $URLtitle + '/favorite/',
        data: {username: $username, URLtitle: $URLtitle, _token:$token},
        success: function(res) {
            $(this).text('test text 2');    alert('success');       

        }
    });

    if ( $(this).attr('data-fav') == 0) {
        $(this).data('data-fav', 1);
    } else if ( $(this).attr('data-fav') == 1) {
        $(this).data('data-fav', 0);
    }

});

As you can see, there's two $(this).text in this example, one at the start and one after success.

However, the text becomes "test text 1" and not "test text 2" even after I get the alert of success. What's going on?

edited Sep 29 '18 at 21:52

Nicholas K

15,148
7
31
57

asked Sep 29 '18 at 16:09

Felix

2,532
5
37
75

1

`this` isn't what you think it is inside the success callback – charlietfl Sep 29 '18 at 16:14
It's `this` here and *"that"* there. :) On-topic: inside the callback, `this` is an [jqXHR](http://api.jquery.com/jQuery.ajax/#jqXHR) object. It's not your form or whatever initiated the call. – tao Sep 29 '18 at 16:15
1

One simple fix is adding `context:this` option for `$.ajax` – charlietfl Sep 29 '18 at 16:16
context:this worked. – Felix Sep 29 '18 at 16:40

Ajax success forgetting $(this)

0 Answers0