jQuery Parent change inner HTML

Question

I got this so far:

$('.event-tools a').click(function() 
{
    var status = $(this).attr('id');
    var id = $(this).parent().attr('id');

    $.ajax({
        type: "GET",
        url: "http://localhost:8888/update/test.php",
        data: "rsvp=" + status + '&id=' + id,
        success: function()
        {
            $(this).parent().html(status);
            //alert(status);
        },
        error: function()
        {
            alert('failz');
        }
    });
});

With this:

<span class="rsvp" id="1">
    <a href="#" class="rsvp" id="Attending">Attending</a>
    <a href="#" class="rsvp" id="Maybe Attending">Maybe Attending</a>
    <a href="#" class="rsvp" id="Not Attending">Not Attending</a>
</span>

When I click on one of them and use the alert() it works by prompting the alert box, however, when I use the $(this).parent().html(status); on the success: event, it doesn't change the HTML with the status...

Answer 1

this inside your success-function does not have the same scope as outside of it, since JavaScript has function scope. You need to do something like this to preserve the original value of the outer function's this:

var self = this;
$.ajax({
    // ...
    success: function() {
        $(self).parent().html(status);
    }
});

Alternatively, you could use jQuery's .proxy()-method:

$.ajax({
    // ...
    success: $.proxy(function() {
        $(this).parent().html(status);
    }, this)
});

Answer 2

try this

JS:

$('.event-tools a').click(function(ev) 
{
    ev.stopPropagation()

    var status = $(this).attr('id'),
        id = $(this).parent().attr('id'),
        myparent = $(this).parent();

    $.ajax({
        type: "GET",
        url: "http://localhost:8888/update/test.php",
        data: "rsvp=" + status + '&id=' + id,
        success: function()
        {
            $(myparent).parent().html(status);
            //alert(status);
        },
        error: function()
        {
            alert('failz');
        }
    });
    return false;
});

HTML:

<span class="event-tools" id="1"><!-- this has class = "rsvp" -->
    <a href="#" class="rsvp" id="Attending">Attending</a>
    <a href="#" class="rsvp" id="Maybe Attending">Maybe Attending</a>
    <a href="#" class="rsvp" id="Not Attending">Not Attending</a>
</span>