jquery replaceWith() not working in $.post function

Question

I'm trying to make a to-do list type thing. Here, I want the new goal to be saved to the database, and then for only the div with the relevant list to refresh, showing the list with the new goal added.

The database updates fine, the new html with the new list item is returned just fine, but .replaceWith() doesn't seem to work. Nothing happens.

It works outside of that function, but not inside of it, and I'm not sure why.

$('.addGoal').submit(function(event){
    var listid = $(this).attr('id');
    var desc = $(this).children('.goalinput').val();

    event.preventDefault();

    if(desc == "") {
        console.log("empty!");
        return;
    }

    var posting = $.post("updatedata.php", { what :'addgoal', id: listid, data: desc});
    posting.done(function(data){
            console.log("saved!" + data); //this works, the updated html is being returned
            $(this).closest('#goallist').replaceWith("Returned data goes here"); //this works outside of this function but not inside of it. 
        });
    });

score 2 · Answer 1 · answered Jan 26 '14 at 03:08

2

this doesn't automatically keep its value in the callback function. You need to bind a closure variable:

$('.addGoal').submit(function(event){
    var listid = $(this).attr('id');
    var desc = $(this).children('.goalinput').val();

    event.preventDefault();

    if(desc == "") {
        console.log("empty!");
        return;
    }

    var that = this; // Closure variable
    var posting = $.post("updatedata.php", { what :'addgoal', id: listid, data: desc});
    posting.done(function(data){
        console.log("saved!" + data);
        $(that).closest('#goallist').replaceWith("Returned data goes here");
    });
});

answered Jan 26 '14 at 03:08

Barmar

741,623
53
500
612

And as IDs must be unique, one uses `$('#goallist').replaceWith(...)`. – Ram Jan 26 '14 at 03:09
That's true, although it won't work in the more general case where you need to find an element relative to this. – Barmar Jan 26 '14 at 03:10
Thank you, I hadn't known much about `this`. I've got it working now. – Cactuar Jan 26 '14 at 03:17

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

Please see

How to access the correct this / context inside a callback? for an explanation and solution for the general problem, and
$(this) inside of AJAX success not working for a similar problem with $.ajax

But since IDs are supposed to be unique in an HTML document anyway, you can replace $(this).closest('#goallist') with $('#goallist') and completely ignore this.

edited May 23 '17 at 11:56

Community

1
1

answered Jan 26 '14 at 03:08

Felix Kling

795,719
175
1,089
1,143

1

Thank you! Not only does it work perfectly now, but I feel very educated in general. – Cactuar Jan 26 '14 at 03:14

jquery replaceWith() not working in $.post function

2 Answers2