CODEWITHSUNDEEP
ajaxjquery
Aakash Goel
Aakash Goel

Reputation: 1179

Jquery AJAX: How to Change button value on "success"?

I have multiple buttons on one page. Upon click, I track the button id, send the button value to backend php code that returns me updated value by changing the database. I am able to get back everything i need except this: Setting the button value on success!! This is the code i'm using:

$(document).ready(function(){
    $("input[type='button']").click(function(){
        var selected = $(this).attr("id");
        var val = prompt("Enter new value",0);
                    $.ajax({
                    url:'updateCostItems.php',
                    data:{toupdate:selected, updatewith:val},
                    type:'GET',
                    dataType:'json',
                    success:function(json){
                        $(this).val(json.update);
                    },
                    error:function(xhr, status){
                        alert("Problem");
                    },
                    complete:function(xhr, status){

                    }
                });
        });
});

Upvotes: 6

Views: 7646

Answers (4)

Billy Moon
Billy Moon

Reputation: 58531

I think this is not correct, because the callback is run in the global scope.

Untested, but try just before $.ajax to write var $this = $(this) and then in your callback use $this.val(json.update)

Edit: Updated code snippet to ensure local $this by declaring with var. Other posts suggest using var button = $(this) which is probably better in bigger projects where keeping track of the variables is more challenging - but all the answers are the same really.

Upvotes: 4

James Montagne
James Montagne

Reputation: 78650

$(this) will not refer to the button at the time the success function is called. You will need to pass the button (or the button's id) along as a parameter to your callback. Storing a single global variable is not sufficient since you could potentially click on a 2nd button before the first ajax call returns.

Upvotes: 0

Martijn Pieters
Martijn Pieters

Reputation: 1121962

Store the button in a local variable in the outer loop, then refer to that variable in the inner scope of the success handler:

$(document).ready(function(){
    $("input[type='button']").click(function(){
        var $btn = $(this)
        var selected = $btn.attr("id");
        var val = prompt("Enter new value",0);
        $.ajax({
            url:'updateCostItems.php',
            data:{toupdate:selected, updatewith:val},
            type:'GET',
            dataType:'json',
            success:function(json){
                $btn.val(json.update);
            },
            error:function(xhr, status){
                alert("Problem");
            },
        });
    });
});

Upvotes: 1

morgar
morgar

Reputation: 2407

The problem is that 'this', inside the ajax request, points to the xhr object, not the button. You should store the reference to the button prior to do the call, like var button = $(this); and later updating it button.val(json.update);

Upvotes: 1

Related Questions