Putting PHP echo into a button's innerHTML doesn't work

Question

I have a jQuery code like this:

$("#erase").click(function(){
        $("#erase").attr("disabled", "disabled"); // Prevent double-clicking
        $(this).html("Erasing...");
        $.post("erase.php", {target: $("#target").val(), criteria: $("#criteria").val()}, function(data){
            $(this).html(data); // Change the button's caption to whatever erase.php echoes.
            setTimeout(function(){
                window.location.href = "index.php";
            }, 3000);
        });

The target and criteria are both HTML input tags and the button is declared with the button tag. I was expecting these would happen when user clicks the button:

Button will be greyed out and its text will say 'Erasing...'
erase.php will be called via AJAX. erase.php will delete a row from a database, and takes several seconds to complete.
When the AJAX call is completed, the button text will be the output of erase.php. It will be either "Success" or "Failure"
After 3 seconds, user will be brought back to home page.

But in my case, step 3 fails. The button gets stuck in 'Erasing....' (The request does complete, however.)

Side note: I can't really think of a better title for this question. If you can come up with one for me. Please let me know in the comments. I'd appreciate it.

provide alert message to check response. alert(data); before $(this).html(data); — Gowri
– Gowri, Commented Oct 8, 2014 at 3:54

Cheery · Accepted Answer · 2014-10-08 03:53:30Z

5

$(this) inside of $.post is not the one that you had before. Try this way

$("#erase").click(function(){
    $("#erase").attr("disabled", "disabled"); // Prevent double-clicking
    $(this).html("Erasing...");
    $this = $(this);
    $.post("erase.php", {target: $("#target").val(),
           criteria: $("#criteria").val()}, function(data){
            $this.html(data); 
            setTimeout(function(){
                window.location.href = "index.php";
            }, 3000);
        });

answered Oct 8, 2014 at 3:53

Cheery

16.3k45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

picus Over a year ago

Cheery is correct. The "this" that you are trying referencing inside the callback function is out of scope. Once inside the new function, I believe what you are referencing by "this" is the function itself - which in JS is an object. In cheery's example you are creating a new variable that is accessible lower in the scope. In short, that this ain't what this used to be.

Collectives™ on Stack Overflow

Putting PHP echo into a button's innerHTML doesn't work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related