Question

I’m having trouble updating the DOM when doing an AJAX post using JQuery. This is the JQuery code:

        $('.answerForm').live('submit', function(event) {
            event.preventDefault();
            $.post($(this).attr('action'), $(this).serialize(),
                function(data){
                     if (data.success) {
                         $(this).hide();
                     }
                     else {
                         alert("not success");
                     }
                }, "json");
        });

I’m working on a questions & answers website. The answer form (class=’answerForm’, no id) is injected within the DOM when the user presses ‘reply’. What I want to do if success happens is hide that answerForm and replace the next with the answer. But it looks like I cannot use $(this) within function(data).

I was wondering if there is any chance to select the right DOM objects besides tagging everything using ids.

Thanks

Answer 1

Capture the context into a variable, and use that within the success callback:

$('.answerForm').live('submit', function(event) {
    event.preventDefault();
    var that = this;
    $.post($(this).attr('action'), $(this).serialize(), function() {
        ...
        $(that).hide();

Also, in case it interests you, if you use $.ajax there is a context option which makes the object the context of all callbacks, so:

$.ajax({
    url: $(this).attr('action'),
    context: this,
    success: function() {
        $(this).hide();
    }
});