$(this) object becomes undefined after a jquery post()

Question

On the login page of my site I have two identical login forms. One is in the main body of the page and the 2nd one is loaded into a jquery dialog for the Login link in the header. I have already removed all identical ID's and used class instead.

What I am trying to do is: after user clicks submit in the dialog, I am trying to put the error msg in the right DIV but I get undefined for $(this) after the jquery post() or ajax call.

$('.login-submit').live('click', function(){
alert($(this).attr('class')); // THIS WORKS
    var form = $(this).parent('form').get(0);   
    var values = $(this).parent('form').serialize();
    $.post('/users/login',values,function(data){
        if(!data['success']) {
            alert($(this).attr('class')); // THIS SAYS UNDEFINED
            // TRYING TO DO THIS
            $(this).siblings('.form-error').html(data['error']); 
        } 
    },'json');
});

Here is the HTML:

<form class="form-login" method="post" action="/users/login">
<input type="hidden" name="_method" value="POST">
<div class="form-error"></div>
<input name="data[User][username]" type="text" maxlength="20" id="UserUsername">
<input type="button" class="login-submit" value="Sign In">
</form>

Have a look at this exact duplicate: [$(this) doesn't work in a function](http://stackoverflow.com/questions/7859558/this-doesnt-work-in-a-function) — Rob W, Dec 07 '11 at 21:33
Instead of copying the answer to the question, use the Accept answer feature (at the left side of an answer) to mark the helpful answer. — Rob W, Dec 07 '11 at 22:12

score 5 · Answer 1 · answered Dec 07 '11 at 21:33

5

The post callback is executed in a different context.

You need to save the outer this in a variable so you can use it in the inner function.

answered Dec 07 '11 at 21:33

SLaks

868,454
176
1,908
1,964

score 1 · Answer 2 · answered Dec 07 '11 at 21:34

In your example this is referring to the anonymous function. Try this:

$('.login-submit').live('click', function(){
var that = this;
alert($(this).attr('class')); // THIS WORKS
    var form = $(this).parent('form').get(0);   
    var values = $(this).parent('form').serialize();
    $.post('/users/login',values,function(data){
        if(!data['success']) {
alert($(that).attr('class')); // THIS SAYS UNDEFINED
            // TRYING TO DO THIS
            $(that).siblings('.form-error').html(data['error']); 
        } 
    },'json');
});

Your function will then have this in its execution scope, however it will be stored in the that variable.

score 1 · Answer 3 · answered Dec 07 '11 at 21:34

This is because of Javascript closures-- "this" is redefined inside each new function's scope.

$('.login-submit').live('click', function(){
    alert($(this).attr('class')); // THIS WORKS
    var form = $(this).parent('form').get(0);   
    var values = $(this).parent('form').serialize();
    var me = $(this);
    $.post('/users/login',values,function(data){
        if(!data['success']) {
            me.siblings('.form-error').html(data['error']); 
        } 
        },
    'json');
});

$(this) object becomes undefined after a jquery post()

3 Answers3

Linked