jquery losing value of $(this) on ajax request

Question

Hi I am using jquery to make an ajax request to the database to add and remove favourites from the database. This works fine however I want to replace part of the href in the anchor link so that a user can add/remove again if required without refreshing the page e.g. the link is built as so http://article.local/favourite/delete/uniqueid therefore I need to replace the 'delete' with add and vise versa for the add favourite button. However I can't use the class name otherwise this will apply to all of the classes rather than the one clicked at that time.

$( ".remove-favourite" ).click(function(e) {
    e.preventDefault();
    var favform = $(this).parent('.fav-form-contents');
    $(favform).append("<img src='/images/loading.gif' class='form-loader' class='loading-icon'/>");                    

 $.ajax({
         type     : "POST",
         cache    : false,
         url      : $(this).attr('href'),
         data     : $(this).serialize(),
        success  : function(data) {
             $('.loading-icon').hide();
            $(this).attr('href').replace(/delete/, 'add');
            $(this).removeClass('remove-favourite').addClass('add-favourite');
        }
      })
}); // end click function

However the error message I get back is as follows:

Uncaught TypeError: Cannot read property 'replace' of undefined

This suggests that it has lost the current item, any ideas as to what I am doing wrong??

Please use the search function of SO. This is one of the most frequently asked questions here. — Denys Séguret, May 29 '15 at 12:18

score 6 · Accepted Answer · edited May 29 '15 at 12:31

6

You need to preserve $(this) in a variable for the callback like

var $link = $(this);
$.ajax({
         type     : "POST",
         cache    : false,
         url      : $(this).attr('href'),
         data     : $(this).serialize(),
        success  : function(data) {
             $('.loading-icon').hide();
            $link.attr('href').replace(/delete/, 'add');
            $link.removeClass('remove-favourite').addClass('add-favourite');
        }
  })

this itself will have changed because the execution context of the success callback in $.ajax is different then when you called $.ajax.

edited May 29 '15 at 12:31

Denys Séguret

372,613
87
782
758

answered May 29 '15 at 12:14

AmmarCSE

30,079
5
45
53

This isn't because "$.ajax is asynchoronous"... – Denys Séguret May 29 '15 at 12:18
@DenysSéguret, I said it is because the **success** callback **in** $.ajax is asynchoronous. Not $.ajax itself – AmmarCSE May 29 '15 at 12:19
Still totally wrong ^^ – Denys Séguret May 29 '15 at 12:21
@DenysSéguret, can you please explain or point me to a link? I would really appreciate it – AmmarCSE May 29 '15 at 12:21
@DenysSéguret, surely the success callback is not synchronous? – AmmarCSE May 29 '15 at 12:25
`({fun:function(){ ['a'].forEach(function(){ console.log(this) })}}).fun()`. No asynchronicity here. The asynchronicity isn't relevant to the problem. What is relevant is the context of the call of the callback. – Denys Séguret May 29 '15 at 12:25
@DenysSéguret, absolutely. I see now. Updating my answer. – AmmarCSE May 29 '15 at 12:25
Cool, I'll remove my downvote when it's done ;) – Denys Séguret May 29 '15 at 12:27
@DenysSéguret, ok, hows that? – AmmarCSE May 29 '15 at 12:29
ok. I took the liberty to add some semantics to the variable. Revert if you don't like that edit. – Denys Séguret May 29 '15 at 12:31
@DenysSéguret, no thats fine. Also, I notice you changed `$(this)` at the end to `this` which is more correct. Thanks for the helpful info, I have benefited! :) – AmmarCSE May 29 '15 at 12:32

Balachandran · Answer 2 · 2015-05-29T12:15:56.923

1

make this as global means with in function

like var _this = $(this) use in ajax suuceess

edited May 29 '15 at 12:15

answered May 29 '15 at 12:14

Balachandran

9,567
1
16
26

Not a good idea. Can have multiple `this` instances (of different things), and making it global will mess up everything.. @AmmarCSE's solution is best – Andrey Popov May 29 '15 at 12:15
i could not say like that .assigning variable with in function – Balachandran May 29 '15 at 12:17
@AndreyPopov Read the code. "global" was just a poor choice of words, it's not global, just in the external scope. – Denys Séguret May 29 '15 at 12:17
Swearing is also a poor choice of words, but people suffer from them :) There is no such thing as "global within a function". This is called "member". Global means global, straightforward.. – Andrey Popov May 29 '15 at 12:18

score 1 · Answer 3 · answered May 29 '15 at 12:16

1

this inside ajax is related to xhr object.

Use context option of ajax,

This object will be the context of all Ajax-related callbacks. By default, the context is an object that represents the Ajax settings

$.ajax({
     context:this,
     ....

answered May 29 '15 at 12:16

Shaunak D

20,588
10
46
79

jquery losing value of $(this) on ajax request

3 Answers3