Changing text of a button on clicking

Question

I am trying to change the text of a button when clicked after doing an ajax call. Why doesn't this work?

HTML

<button type="submit" class="register-button">REGISTER</button>

JS

$(".register-button").click(function () 
{
    $.ajax({
        //some ajax stuff
    }).
    success(function(){
        console.log("done");
        $(this).html("Registered");
        //$(this).hide(); doesn't work either
    });
});

http://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working — artur99, Sep 06 '14 at 13:24
add `context: this,' inside ajax, like this: http://jsfiddle.net/2j8Lrbhq/ — artur99, Sep 06 '14 at 13:27

score 4 · Accepted Answer · answered Sep 06 '14 at 13:17

4

this inside success is not the button. Try this - excuse the pun:

$(".register-button").click(function () 
{
        var thisButton = this;

        $.ajax({
            //some ajax stuff
        }).
        success(function(){
            console.log("done");
            $(thisButton).html("Registered");
            //$(this).hide(); doesn't work either
        });
});

answered Sep 06 '14 at 13:17

Donal

31,121
10
63
72

1

Totally missed it! Thank you! – aandis Sep 06 '14 at 13:21
@zack no problem, glad to be of help. – Donal Sep 06 '14 at 13:22

dashtinejad · Answer 2 · 2014-09-06T13:24:01.070

2

this inside your success callback, is the object which passed to $.ajax. You should keep reference to your element before:

$(".register-button").click(function () {
    var $elem = $(this);

    $.ajax({
        //some ajax stuff
    }).success(function(){
        console.log("done");
        $elem.html("Registered");
        $elem.hide();
    });
});

jsFiddle Demo.

edited Sep 06 '14 at 13:24

answered Sep 06 '14 at 13:18

dashtinejad

6,193
4
28
44

score 1 · Answer 3 · answered Sep 06 '14 at 13:17

this takes on new scope. So store it before the function declaration:

$(".register-button").click(function () 
{
    var that = this;
    $.ajax({
        //some ajax stuff
    }).
    success(function(){
        console.log("done");
        $(that).html("Registered");
        //$(that).hide(); should work
    });
});

score 0 · Answer 4 · answered Sep 06 '14 at 13:18

try this one:

$(".register-button").click(function () {
        var that=this;
        $.ajax({
            //some ajax stuff
            success:function(){
                console.log("done");
                $(that).html("Registered");
                $(that).hide();
            });
        })
});

Changing text of a button on clicking

4 Answers4