Jquery AJAX: ¿Cómo cambiar el valor del botón en "éxito"?

Question

Tengo varios botones en una página. Al hacer clic, sigo el id del botón, envío el valor del botón al código backend php que me devuelve el valor actualizado al cambiar la base de datos. Puedo recuperar todo lo que necesito, excepto esto: ¡configurar el valor del botón en el éxito! Este es el código que estoy usando:

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

Creo this no es correcto, ya que la devolución de llamada se ejecuta en el ámbito global.

no probado, pero justo antes de tratar $.ajax para escribir var $this = $(this) y luego en su devolución de llamada utilizan $this.val(json.update)

---

Editar: Actualización fragmento de código para asegurar local de $this declarando con var. Otras publicaciones sugieren utilizar var button = $(this), que probablemente sea mejor en proyectos más grandes donde el seguimiento de las variables es más desafiante, pero todas las respuestas son las mismas en realidad.

Answer 2

El problema es que 'esto', dentro de la solicitud de ajax, apunta al objeto xhr, no al botón. Debe almacenar la referencia al botón antes de hacer la llamada, como var button = $(this); y actualizarlo más tarde button.val(json.update);

Answer 3

Guarde el botón en una variable local en el bucle externo, luego consulte esa variable en el alcance interno del controlador de éxito :

$(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 4

$ (esto) no se referirá al botón en el momento en que se llama a la función de éxito. Deberá pasar el botón (o la identificación del botón) como parámetro para su devolución de llamada. Almacenar una única variable global no es suficiente, ya que podría hacer clic en un segundo botón antes de que regrese la primera llamada ajax.