CODEWITHSUNDEEP
jqueryajaxselect
nick130586
nick130586

Reputation: 841

jQuery success:function{} issue

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.

Upvotes: 1

Views: 192

Answers (2)

BradBrening
BradBrening

Reputation: 5518

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. 
        } 
    }); 
});

Upvotes: 1

Tomalak
Tomalak

Reputation: 338326

$(".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.
        }
    });
});

Upvotes: 1

Related Questions