JQuery Ajax Type error in success callback

Question

I create a button that when clickes do something with Ajax in server and when come back from server color of the button and its text will change (something like +1 add friend in facebook) here is my code in .js:

$(".blue").on("click", function(){
    var firstName = $(this).prev().prev().text();
    var lastName = $(this).prev().text();
    $(this).text("Add Friend...");
    var data={
        firstName: firstName,
        lastName: lastName
    };
    $.ajax({
        url: '/ajax/friendRequest',
        data: data,
        dataType: 'json',
        success:function(){
            alert(123);
            $(this).removeClass("glass blue");
            $(this).addClass("greenStatic");
            $(this).text("Request sent");
        }
    });
});

every thing is OK and request will successfully change the database but when it comeback to the success callback I only see the alert(123); on the browser and 3 below lines don't run and my chrome developer tools throw exception of typeError I search SO and change $ sign to jQuery but still I have same problem

score 3 · Accepted Answer · answered Sep 06 '13 at 19:52

3

In your success callback $(this) doesn't refer to the button, cache it outside of the success callback, like

$(".blue").on("click", function(){
    var btn = $(this);
    ...
    ....
    success:function(){
        ...
        btn.addClass("greenStatic");
        ...
    }
});

answered Sep 06 '13 at 19:52

The Alpha

143,660
29
287
307

@mojibuntu yep, `$(this)` refer to jQuery object, use `$(".blue")` again – vladkras Sep 06 '13 at 19:56
Because `$(this)` doesn't refer to the element that triggered the event, I already mentioned in the answer, [read this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this). – The Alpha Sep 06 '13 at 19:58
1

@vladkras no there might be multiple `.blue` elements. You want to target the one clicked. – PSL Sep 06 '13 at 19:59
ok, then define `var $this = $(this)` before and use it inside ajax callback – vladkras Sep 06 '13 at 20:01
1

Yes, that's what I answered. – The Alpha Sep 06 '13 at 20:02
1

@SheikhHeera sorry for that, I was typing and drinking beer while you were answering, so I didn't see you CORRECT answer – vladkras Sep 06 '13 at 20:04
1

@vladkras, It's ok dear but don't drink bear, it stimulates the brain and also kills cells and creates mental dependency, hope you didn't mind. – The Alpha Sep 06 '13 at 20:06
thanks,but I finally don't understand where is the `$(this)` in success refered to ? – mojibuntu Sep 06 '13 at 20:09
[Check this answer](http://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working) and [this one too](http://stackoverflow.com/questions/6889855/jquery-ajax-success-doesnt-work-with-this). – The Alpha Sep 06 '13 at 20:11

score 1 · Answer 2 · answered Sep 06 '13 at 19:59

1

        $(this).removeClass("glass blue");
        $(this).addClass("greenStatic");
        $(this).text("Request sent");

Here this does not refer to the control, rather it refers to the Ajax request object. So, replace this by the control id. It should work.

Something like below...

        $("#controlId").removeClass("glass blue");
        $("#controlId").addClass("greenStatic");
        $("#controlId").text("Request sent");

answered Sep 06 '13 at 19:59

Tadit Dash

305
23
60
141

`#controlid` is the id of an element or something else? – mojibuntu Sep 06 '13 at 20:03
The element on which you want to do the operation addClass and removeClass. Got it? – Tadit Dash Sep 06 '13 at 20:05
Yes that should refer to the button. Please accept the answer, if it helped. – Tadit Dash Sep 06 '13 at 20:06
I have many of these items and don't want to change all of them when one is clicked then I must use `$(this)` – mojibuntu Sep 06 '13 at 20:12
That's exactly what I've answered, cached it in a variable and used it later. – The Alpha Sep 06 '13 at 20:16
1

@SheikhHeera yes, exactly. I just checked it now. – Tadit Dash Sep 06 '13 at 20:26
Ok. If you want to use it, then just store it in a variable before the Ajax request and use that like... var btn = $(this); Then inside the Ajax block use... btn.removeClass("glass blue"); btn.addClass("greenStatic"); btn.text("Request sent"); – Tadit Dash Sep 06 '13 at 20:29

JQuery Ajax Type error in success callback

2 Answers2