jQuery success:function{} issue

Question

I have several 'select' elements on the page. When I choose some of options, the ajax request is being sent to server and the element adjacent to this 'select' must be updated with response value. I expected the following code to be working:

$(".vars").live("change", function() { //selected something in <select> list
    $.ajax({
        type: "POST",
        url "someurl.php",
        data: {somedata},
        success: function(html) {
            $this.next().html(html); //this does not update .next() element.
        }
    });
});

If I replace

$(this).next().html(html);

with

alert(html);

I can see the ajax request was successful. Moreover, it works only if there is only one 'select' on the page, otherwise the empty pop-up appears.

Answer 1

$(".vars").live("change", function() { //selected something in <select> list
    var $this = $(this);
    $.ajax({
        type: "POST",
        url "someurl.php",
        data: {somedata},
        success: function(html) {
            $this.next().html(html); //this does not update .next() element.
        }
    });
});

Answer 2

I believe that "this" isn't what you think it is while referenced in your callback. Try this:

$(".vars").live("change", function() { //selected something in <select> list 
    var $driver = $(this);
    $.ajax({ 
        type: "POST", 
        url "someurl.php", 
        data: {somedata}, 
        success: function(html) { 
            $driver.next().html(html); //this does not update .next() element. 
        } 
    }); 
});