Jquery AJAX: Как изменить значение кнопки на «успех»?

Question

У меня есть несколько кнопок на одной странице. После нажатия я отслеживаю идентификатор кнопки, отправляю значение кнопки в бэкэнд-код php, который возвращает мне обновленное значение путем изменения базы данных. Я могу вернуть все, что мне нужно, кроме этого: Установка значения кнопки в случае успеха! Это код, который я использую:

$(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){

                    }
                });
        });
});

Answer 1

Я думаю, this не правильно, потому что обратный вызов выполняется в глобальной области.

Не проверено, но попробуйте прямо перед $.ajax написать var $this = $(this), а затем в вашем обратном вызове используйте $this.val(json.update)

---

Редактировать: Обновлен фрагмент кода для обеспечения локального $this путем объявления с помощью var.Другие посты предлагают использовать var button = $(this), что, вероятно, лучше в больших проектах, где отслеживать переменные более сложно - но все ответы на самом деле одинаковы.

Answer 2

Сохраните кнопку в локальной переменной во внешнем цикле, затем обратитесь к этой переменной во внутренней области действия обработчика успеха:

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

Answer 3

Проблема в том, что «this» внутри ajax-запроса указывает на объект xhr, а не на кнопку.Вы должны сохранить ссылку на кнопку до совершения вызова, например var button = $(this);, а затем обновить ее button.val(json.update);

Answer 4

$ (это) не будет ссылаться на кнопку во время вызова функции успеха. Вам нужно будет передать кнопку (или идентификатор кнопки) в качестве параметра для вашего обратного вызова. Хранения одной глобальной переменной недостаточно, поскольку вы потенциально можете нажать на вторую кнопку до того, как первый вызов ajax вернется.